Trang chủ > Lập trình iPhone cơ bản > Lập trình iPhone-Chuyển đổi giữa các Views

Lập trình iPhone-Chuyển đổi giữa các Views


Bài đọc này tập trung vào việc hiển thị các views khác nhau lên màn hình, chuyển từ view này sang một view khác. Chúng ta sẽ sử dụng UINavigationController của Apple. Mình sẽ sử dụng mã nguồn của bài “Hello World” viết trước đây. Vì vậy, nếu các bạn chưa đọc bài này hãy xem qua trước(bài viết khá ngắn) sau đó chúng ta sẽ tiếp tục. Bạn có thể đọc bài đó ở đây.
Trong bài học này, chúng ta sẽ:
Thêm một View mới.
Thêm một ViewController.
Chuyển màn hình đến View mới
Liên kết view với code.
Thêm vào một nút Back.
Đầu tiên, chúng ta sẽ đổi dòng chữ “Hello World” thành dòng chữ gì đó cho phù hợp với mục đích của bài này. Mở file RootViewController.m. Tìm phương thức cellForRowAtIndexPath(phương thức mà bạn đã viết để hiển thị lời chào “Hello World” ).
Thay dòng code: [cell setText:@”Hello World”]; thành [cell setText:@”Next View”];

Thêm một view mới

Bây giờ chúng ta thêm một view mới vào ứng dụng để sau đó ta sẽ đẩy view này lên màn hình chính từ main view của ứng dụng. Nháy đúp lên RootViewController.xib để mở Interface Builder. Ta không thực sự cần sửa file này. Khi đã ở trong Interface Builder bấm File->New và chọn View.

Ta thêm một view trống vào ứng dụng. Hiện tại, ta sẽ để view này thật đơn giản. Kéo thả một UILabel vào trong View. Nháy đúp lên label và đổi text của label thành bất cứ cái gì bạn thích. Ở đây mình đặt là View 2.


Lưu view lại. Bấm File->Save. Đặt tên là View 2. Chú ý lưu view vào thư mục trong ứng dụng của bạn. Rất có thể thư mục mặc định không nằm trong ứng dụng của bạn.


Tiếp theo, bạn sẽ thấy một màn hình hỏi xem bạn có muốn thêm View vào ứng dụng của bạn không. Đánh dấu hộp checkbox bên cạnh HelloWorld và bấm Add.

Đóng Interface Builder lại. Kéo View2.xib thả vào thư mục Resources, nếu như nó không xuất hiện trong thư mục này.
Thêm một View Controller vào ứng dụng
Bây giờ chúng ta cần tạo một lớp ViewController. Lớp này sẽ được sử dụng để liên kết view mà ta vừa tạo tới code của ta. Trong Xcode bấm File->New File… Chọn UIViewController subclass và bấm Next.

Đặt tên cho nó là View2ViewController và lưu ý đánh dấu vào“Also create View2ViewController.h”. Bấm Finish để tiếp tục. Một ViewController sẽ được thêm vào ứng dụng của bạn.

Để tiện cho việc quản lý code, kéo thả 2 file View2ViewController.h và .m vào thư mục Classes nếu chúng không xuất hiện trong thư mục này.

Thực hiện việc chuyển đổi sang một view mới

Mở file RootViewController.h và gõ vào đoạn code sau:

Đoạn code này bản thân nó đã tự khá rõ ràng, tuy nhiên mình sẽ giải thích lại. Câu lệnh #import”View2ViewController.h” làm nhiệm vụ import header và cho phép ta thực thể hóa một thực thể mới của đối tượng ViewController.
Tiếp theo, ta khai báo một biến với tên gọi view2ViewController có kiểu View2ViewController. Chú ý là kiểu đối tượng bắt đầu với chữ “V” hoa, còn tên biến ta đặt với chữ “v” thường, ta sử dụng biến này để trỏ tới đối tượng ViewController. Cuối cùng, ta khai báo biến như là một property để có thể set cho nó những thông tin liên quan.
Bây giờ, mở file RootViewController.m và thêm vào đoạn code sau ngay bên dưới câu lệnh @implementation RootViewController. Dòng code sau sẽ tự tạo ra cho chúng ta hai phương thức “getter” và “setter” mặc định cho property view2ViewController.

Tiếp theo, tìm phương thức didSelectRowAtIndexPath. Có thể phương thức này đang được comment lại. Nếu đúng thế bạn bỏ dấu comment cho phương thức này. Phương thức này luôn được gọi(tự động) mỗi lần một table cell được người dùng chạm tay lên. Chú ý nó có một tham số là indexPath. Tham số này rất có ý nghĩa trong bài đọc sau khi mà mình sẽ chỉ cho các bạn cách làm thế nào để hiển thị một NSArray trong một UITableView. Còn bây giờ ta tạm thời không để ý đến nó.
Thêm vào đoạn code sau:

Trước hết ta kiểm tra xem self.view2ViewController có bằng null không. Điều này xảy ra trong lần đầu tiên người dùng chạm tay lên table cell. Từ sau đó, đối tượng ViewController sẽ được lưu trong bộ nhớ để tối ưu hóa khả năng thực thi của ứng dụng. Kế tiếp, ta tạo mới một thực thể của đối tượng View2ViewController và cho biến view2ViewController trỏ tới đối tượng này. Chú ý cách đặt tên mà mình đã làm “V” so sánh với “v”. Sau khi ta gán thực thể của ViewController cho viewController của chúng ta, thì thực thể này cần được giải phóng. Bạn hãy nhớ rằng, trong Objective-C không có đối tượng nhặt rác tự động(garbage collector) vì thế ta cần phải giải phóng các đối tượng không còn sử dụng đến nữa khỏi bộ nhớ.
Dòng code cuối cùng là những gì ta thực sự phải làm để chuyển view của chúng ta sang một view khác. Đối tượng navigationController là một stack chứa các ViewControllers. View trên cùng trong stack là view được hiển thị. Tất cả những gì ta làm ở đây là đẩy view2ViewController lên trên cùng trong stack này. Phần cuối của phương thức animated:YES, cho trình biên dịch biết chúng ta sử dụng hiệu ứng hoạt hình(animation) để chuyển sang view khác.

Liên kết View tới Code

Trước khi đoạn mã trên được thực thi, chúng ta phải liên kết đoạn code tới view mà chúng ta vừa tạo ra. Nháy đúp chuột lên View2.xib để mở Interface Builder. Ta cần liên kết đối tượng View2ViewController với view, vì vậy bấm vào File’s Owner rồi bấm Tools->Identity Inspector.

Bấm lên hộp dropdown cạnh class và chọn View2ViewController.

Tiếp theo, bấm lên bất cứ chỗ nào trong view để focus vào nó. Bấm Tools->Connections Inspector. Kéo thả vòng tròn cạnh New Referecing Outlet vào File’s Owner. Trên màn hình xuất hiện chữ view, bạn bấm vào nó.

Đóng Interface Builder. Bây giờ bạn có thể bấm Build and Go. Khi bạn bấm lên chữ “Next View”, bạn sẽ thấy một view mới được hiển thị trên màn hình. Tuy nhiên chúng ta vẫn thiếu một thứ. Không có nút “Back” để quay lại. Apple đã thêm nút bấm này vào thanh NavigationContronller cho chúng ta, nhưng chúng ta phải đặt tiêu đề cho main view của ta thì nút này mới được hiển thị.

Thêm nút Back

Đóng iPhone Simulator và mở RootViewController.m. Trong phương thức viewDidLoad (phương thức này được gọi khi view được load lần đầu tiên) và thêm đoạn code sau.

RootViewController kế thừa lớp UITableViewController, nó có một thuộc tính là title. Bạn có thể đặt title là bất cứ gì bạn muốn. Mình đặt cho nó là “Hello”. Bây giờ bấm Build and Go và bạn đã hoàn tất ứng dụng trong bài đọc này. Dưới đây là một vài màn hình chụp từ ứng dụng.

Khi bạn bấm vào “Next View” màn hình chuyển sang:

Chú ý nút back với dòng chữ “Hello”. Nếu bạn bấm lên nút này, view mới sẽ được lôi ra khỏi stack và màn hình trước đó được hiển thị. Nếu các bạn có thắc mắc hay ý kiến muốn chia sẻ, hãy gửi lại phản hồi trong bài viết. Nếu ứng dụng mà bạn vừa viết không chạy hoặc xảy ra lỗi, bạn có thể lấy Source code để chạy thử. Chúc các bạn lập trình vui vẻ. Hẹn gặp lại trong bài đọc sau.

  1. geeza25
    05/01/2012 lúc 6:23 chiều

    THANKS

  2. 30/09/2010 lúc 8:46 sáng

    Thanks bạn rất nhiều.Bài viết cơ bản và rất dễ hiểu.Mình đang tìm hiểu về iPhone và hi vọng rằng mọi người sẽ có nhiều trao đổi về vấn đề này.

  3. Hoangtu
    24/07/2010 lúc 2:13 sáng

    Àh, mình có góp ý thế này, những hình chụp code bạn có thể giữ nguyên kích thước ko?, hoặc nếu cần thu nhỏ để phù hợp đưa lên web thì bạn có thể thu nhỏ vừa đủ thôi, Tại những bài post của bạn mình in ra để tham khảo, nhưng hình của những dòng code nhò quá, đọc ko dc.
    Một chút góp ý, mong bạn đừng phiền.
    Một lần nữa xin cảm ơn.

  4. Hoangtu
    24/07/2010 lúc 2:01 sáng

    Thanks bạn rất nhiều. Tiếp tục viết tiếp nhau bạn. Mong các bài post của bạn.

    • tuanka
      24/07/2010 lúc 5:15 sáng

      Cám ơn bạn đã phản hồi, từ bài viết sau mình sẽ giữ nguyên kích thước hình ảnh. Có lẽ phần code mình sẽ viết trực tiếp, ko chụp hình nữa :)! Rất mong nhận được các ý kiến phản hồi từ các bạn!

  1. No trackbacks yet.

Gửi phản hồi

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s

%d bloggers like this: