ĐIỀU HƯỚNG sử DỤNG NAVIGATION CONTROLLER

ĐIỀU HƯỚNG SỬ DỤNG NAVIGATION Để 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 ba

ĐIỀU HƯỚNG SỬ DỤNG NAVIGATION

Để 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:

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 :

– 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 :

– Đố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:

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

Đố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!

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:

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

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

– Kết nối UINavigation:

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

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”:

– Tạo thêm class để quản lý ViewController khi xem ảnh phóng to

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:

– Á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

1 @interface ViewController : UIViewController<UITableViewDelegate,UITableViewDataSource>

2 @property( strong, nonatomic ) IBOutlet UITableView *imageTableView;

3 @property( strong,nonatomic ) NSArray *urlImage;

4 @property( strong,nonatomic ) NSArray *imageInforName;

5 @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

1 @property( strong, nonatomic ) IBOutlet UIImageView *imageView;

2 @property( strong, nonatomic ) IBOutlet UILabel *labelInfor;

3 @property( strong,nonatomic ) NSString *urlImage;

4 @property( strong,nonatomic ) NSString *infor;

Thực thi code:

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

1 - ( void ) viewDidLoad {

2 [ super viewDidLoad ] ;

3 // Do any additional setup after loading the view, typically from a nib.

4 self.urlImage=@ [ @ "dev1.jpg" ,@ "dev2.png" ,@ "ios.png" ] ;

5 self.imageInforName=@ [ @ "Devpro open your world" ,@ "Devpro Việt Nam" ,@ "IOSDeveloper" ] ;

6 }

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

1 - NSInteger ) tableView: ( UITableView * ) tableView numberOfRowsInSection: ( NSInteger ) section {

2 return 3 ;

3 }

4 - UITableViewCell * ) tableView: ( UITableView * ) tableView cellForRowAtIndexPath: ( NSIndexPath * ) indexPath {

5 NSArray *indentifine=@ [ @ "cell1" ,@ "cell2" ,@ "cell3" ] ;

6 UITableViewCell *cell= [[ UITableViewCell alloc ] init ] ;

7 for( int i= 0 ; i< 3 ; i++ ) {

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”

1 - void ) tableView: ( UITableView * ) tableView didSelectRowAtIndexPath: ( NSIndexPath * ) indexPath {

2 [ self performSegueWithIdentifier:@ "prepare" sender:nil ] ;

3 }

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

1 - void ) prepareForSegue: ( UIStoryboardSegue * ) segue sender: ( id ) sender {

2 NSIndexPath *indexPath = [ self.imageTableView indexPathForSelectedRow ] ;

3 ImageViewController *destViewController = segue.destinationViewController;

4 destViewController.urlImage = self.urlImage [ indexPath.row ] ;

3 // Do any additional setup after loading the view.

4 [ self.imageView setImage: [ UIImage imageNamed:self.urlImage ]] ;

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

Link full code:

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