Điều hướng sử dụng Navigation controller

Ở bài này mình sẽ hướng dẫn cho các bạn về cách điều hướng các màn hình tuỳ chỉnh theo nhu cầu ứng dụng của các bạn. Hướng dẫn cụ thể về Navigation. Navigation là gì ? …

Navigation là một trong phong cách chuyển tiếp sử dụng rất phổ biến trong ứng dụng IOS, Giống như vào lâu đài chỉ  có một lối đi và phải qua nhiều cách cửa sau  mỗi cánh cửa là một thế giới khác nhau!, chúng ta muốn quay lại một thế giới,hay đi tiếp đều phải qua các cửa trên mội lối đi đó.  Như thế Navigation là các cách cửa giúp ta vào các thế giới khác nhau, Ở trong IOS nó là các điều hướng NEXT or BACK để mở ra các màn hình khác nhau 🙂 .

Để cụ thể hơn, trong Setting Iphone khi ta  cài ứng dụng thì nó luôn có danh sách các ứng dụng, click vào sẽ mở ra chi tiết thông tin của ứng dụng đó, khi back lại quay lại list ứng dụng đó chính là navigation.

Bắt đầu cụ thể nào :

Khởi tạo project mới đặt tên:Screen Shot 2016-07-23 at 09.38.03

Mình sẽ thiết kế ứng dụng với nội dung sau :

Sau khi thiết kế nó sẽ trông như thế này :Screen Shot 2016-07-23 at 09.44.51

 

– ViewController 1: Danh sách ảnh và thông tin về ảnh đó!

– ViewController 1: Khi click vào một ảnh thì ảnh sẽ chuyển sang chế độ xem lớn hơn, và hiển thị thông tin về ảnh.

  • Thiết kế giao diện: Vào Main.storyboard!

Kéo vào thêm một ViewController : Screen Shot 2016-07-23 at 09.54.54

 

– Đối với ViewController 1:

Kéo vào một TabelView,  và một TableViewCell. Thêm imageView ể hiển thị ảnh ở dạng list, và một label để hiển thị thông tin ảnh!, thay đổi màu nền cho ViewController.

=> Sau khi căn chỉnh ta sẽ trông như thế này:

Screen Shot 2016-07-23 at 08.58.33 Screen Shot 2016-07-23 at 09.00.27

Link tải ảnh:

http://www.mediafire.com/download/qbi32hamm5vgpmb/Archive.zip

 

Sau khi tải ảnh về , giải nén ra và kéo vào dự án:

Screen Shot 2016-07-23 at 09.03.52

 

Như vậy chúng ta đã có danh sách 3 ảnh!

Tiếp theo ta thay đổi số lượng Prototype Cells, thành 3 để set 3 ảnh vào.

Screen Shot 2016-07-23 at 09.06.33

 

setImage vào khung imageView!!!. Chọn vào imageView và set tên ảnh,  ảnh sẽ tự động set vào!.

Screen Shot 2016-07-23 at 10.16.36

Sau khi set ảnh và thay đổi text label ta sẽ được như sau:

Screen Shot 2016-07-23 at 10.19.54

 

Đối với ViewController thứ 2:

Kéo vào một imageView để phóng to ảnh, và một label để hiện thị thông tin ảnh.

Đổi text label thành: Thông tin ảnh!

 

Screen Shot 2016-07-23 at 09.12.45

Như thế chúng ta đã thiết kế xong giao diện!

Tiếp theo là Kết nối:

– Kết nối delegate cho tableView:

Screen Shot 2016-07-23 at 10.27.16

– Identifine cho từng cell, click vào từng cell:

Screen Shot 2016-07-23 at 10.35.33

 

Thay đổi tên cell ở đây mình đặt lần lượt là cell1, cell2, cell3.

Screen Shot 2016-07-23 at 10.33.26

– Kết nối UINavigation:

Click vào ViewController đầu tiên chọn editor ->Embed in->Navigation như hình sau:

Screen Shot 2016-07-23 at 10.44.31

 

Như thế chúng ta đã kết nối được navigation cho ViewController.

– Kết nối hai màn hình với nhau: Giữ Crtl  kéo từ màn hình thứ nhất đến màn hình thứ 2, chọn  push:

Tạo identifine cho kết nối trên là “prepare”: Screen Shot 2016-07-23 at 12.16.45

Screen Shot 2016-07-23 at 10.47.22– Tạo thêm class để quản lý ViewController khi xem ảnh phóng to.

Screen Shot 2016-07-23 at 10.50.51

Kết nối class , click vào ViewController cần quản lý, ở đây ViewController phóng to ảnh, Kết nối class:

Screen Shot 2016-07-23 at 10.53.34

 

– Ánh xạ property, đăng ký delegate cho TableView:

Đối với ViewController.h danh sách ảnh: đăng ký delegateDataSource, delegateDelegate.

Ánh xạ tableView đặt tên là imageTableView, tạo mảng urlImage để lưu danh sách tên ảnh, tạo mảng imageInforName để lưu danh sách thông tin ảnh.

@interface ViewController : UIViewController<UITableViewDelegate,UITableViewDataSource>
@property (strong, nonatomic) IBOutlet UITableView *imageTableView;
@property (strong,nonatomic) NSArray *urlImage;
@property (strong,nonatomic) NSArray *imageInforName;
@end

Đối với ImageViewController.h phóng to ảnh:

Ánh xạ label, imageView, đặt tên như trong code, và tạo 2 đối tượng chuỗi để nhận tên ảnh và thông tin ảnh gửi sangkhi ta lựa chọn từ danh sách ảnh trong tavleView .

@property (strong, nonatomic) IBOutlet UIImageView *imageView;
@property (strong, nonatomic) IBOutlet UILabel *labelInfor;
@property(strong,nonatomic)NSString  *urlImage;
@property(strong,nonatomic)NSString  *infor;

Thực thi code:

Đối ViewController.m : Thêm đoạn mã sau!

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    self.urlImage=@[@"dev1.jpg",@"dev2.png",@"ios.png"];
    self.imageInforName=@[@"Devpro open your world",@"Devpro Việt Nam",@"IOSDeveloper"];
}

Khởi tạo 2 mảng , định nghĩa self.urlImage lấy danh sách tên ảnh, và self.imageInforName danh sách Thông tin ảnh .

Khởi tạo 2 phương thức bắt buộc của tableView:

Do danh sách có 3 ảnh, nên ta khởi tạo ra 3 Row. Khởi tạo mảng indentifine gán danh sách identifine của các prototype Cells định danh.  Khởi tạo một đối tượng cell. Do ta chỉ làm việc với 3 row nên ta chỉ lặp 3 hàng. Kiểm tra nếu row nào  thì   truyền identifine row đấy trả về thông tin prototype Cells image, label=> Cuối cùng trả về cell.

-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
   return 3;
}
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    NSArray *indentifine=@[@"cell1",@"cell2",@"cell3"];
    UITableViewCell *cell=[[UITableViewCell alloc]init];
    for (int i=0; i<3; i++) {
        if (indexPath.row==i) {
            cell=[tableView dequeueReusableCellWithIdentifier:indentifine[i] forIndexPath:indexPath];
        }
    }
    return cell;
}

Tiếp theo ta sử dụng phương pháp didSelectRowAtIndexPath phương pháp này cung cấp khả lựa chọn hàng bất kỳ trong tableView.

Khi ta lựa chọn hàng trong tableView thì ngay lật tức chuyển sang màn hình khác có identifine “prepare”.

-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{
    [self  performSegueWithIdentifier:@"prepare" sender:nil];
}

Phương thức prepareForSegue cho phép gửi dữ liệu giữa các ViewController với nhau thông qua segue. Phương pháp này mình đã phân tích trong bài tương tác tableView.

Lấy đối tượng indexpath để lấy được hàng (row) nào ,(section) phần nào.

segue.destinationViewController cho phép gửi dữ liệu qua segue.

2 đoạn mã cuối cùng : giá trị được gửi sang lưu vào urlImage và infor của ImageViewController.

-(void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender{
    NSIndexPath *indexPath = [self.imageTableView indexPathForSelectedRow];
    ImageViewController *destViewController = segue.destinationViewController;
    destViewController.urlImage = self.urlImage[indexPath.row];
    destViewController.infor=self.imageInforName[indexPath.row];
}

=>  Như thế chúng ta đã load image vào trong ImageView , load thông tin ảnh vào label, và gửi dữ liệu sang ImageViewController.

Thực thi ImageViewController.m:

Trong ViewDidLoad: Thêm đoạn mã sau!

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    [self.imageView setImage:[UIImage imageNamed:self.urlImage]];
    self.labelInfor.text=self.infor;
}

Như vậy chúng ta đã có tên ảnh(urlImage), thông tin ảnh(infor), được gửi sang từ ViewController .

set ảnh vào imageView, và set thông tin ảnh vào labelInfor.

Bây giờ chúng ta chạy sẽ nhận được kết quả như hình:

Screen Shot 2016-07-25 at 14.39.10 Screen Shot 2016-07-25 at 14.39.23

 

Link full code:

http://www.mediafire.com/download/82zosnuei3nnumz/Navigation.zip

Có gì trong phần tiếp theo:  

Tiếp theo mình sẽ hướng dẫn các bạn về Sqlite một phần rất tuyệt vời của lập trình di động.

  • Nếu các bạn muốn biết thêm các kỹ thuật khác về ios, các bạn có thể tham khảo thêm các khóa học ios tại đây.

 

 

 

 

 

Add a Comment

Your email address will not be published. Required fields are marked *