Bài 9 – Quản lý màn hình với Storyboard và Segue

Trong bài học trước, bạn đã được học về View Controller để quản lý màn hình giao diện. Tuy nhiên nội dung bài trước thiên về quy trình hoạt động thì nhiều hơn. Còn phương pháp để tạo các màn hình giao diện thì chưa được đề cập tới. Và bài viết này sẽ bổ sung tiếp phần còn thiếu đó. Nội dung bài viết này sẽ hướng dẫn bạn cách thức thiết kế giao diện với Storyboard và Segue. Qua đó bạn sẽ được học cách thức tạo và quản lý các màn hình trong ứng dụng của mình như thế nào.

Storyboard là gì?

Tổng quan Storyboard

Storyboard là thành phần thể hiện và quản lý giao diện người dùng của ứng dụng iOS bên trong XCode. Storyboard có khả năng quản lý nhiều màn hình (scene), đồng thời đảm nhiệm việc kết nối các màn hình với nhau.

• Mỗi màn hình được quản lý bởi một View Controller và chứa các View để thể hiện giao diện.
• Các màn hình được kết nối với nhau bởi các đối tượng segue. Segue giúp bạn tạo hiệu ứng chuyển cảnh và truyền dữ liệu qua lại giữa các màn hình.

Storyboard sẽ thể hiện cho bạn một bức tranh toàn cảnh về các màn hình và mối quan hệ giữa các chúng. Do đó bạn có thể sử dụng Storyboard để thiết kế và quản lý giao diện các màn hình cho ứng dụng của bạn.

Storyboard quản lý các màn hình trong ứng dụng

Thêm Storyboard vào project

Mặc định khi tạo project, bạn sẽ được cung cấp sẵn tập tin có tên Main.storyboard. Đây chính là tập tin Storyboard, bạn có thể sử dụng tập tin này để thiết kế giao diện cho các màn hình. Tuy nhiên, nếu ứng dụng của bạn có quá nhiều màn hình thì có thể bạn sẽ cần tạo thêm các tập tin Storyboard khác để dễ quản lý. Các bước để thêm Storyboard như sau:

1. Right click (click phải chuột) vào project ➜ New File…
2. Một màn hình nhỏ sẽ xuất hiện, bạn chọn Storyboard sau đó click Next để đặt tên cho Storyboard.
   

Chỉ với 02 bước này là bạn đã tạo được một tập tin Storyboard để sử dụng rồi. Rất đơn giản phải không?

Thêm Scene vào Storyboard

Sau khi đã tạo Storyboard, việc tiếp theo của bạn là tạo các scene (màn hình) cho ứng dụng. Nhưng trước tiên, bạn cần nhớ lại bài trước một xíu nhé.

Mỗi scene (màn hình) sẽ do View Controller quản lý việc hiển thị trên giao diện người dùng. Do đó để thêm scene vào storyboard chính là việc bạn tạo đối tượng View Controller.

Các bước thực hiện như sau:

• Bước 1: Kéo đối tượng View Controller vào Storyboard.
• Bước 2: Tạo class dẫn xuất từ UIViewController.
  
• Bước 3: Chỉ định Custom Class cho View Controller.

Demo

Bạn có thể xem lại toàn bộ các quá trình tạo Storyboard và scene bằng demo dưới đây.

Segue

Segue là gì?

Ứng dụng iOS chỉ có thể hiển thị 01 màn hình tại một thời điểm. Do đó nếu ứng dụng của bạn có nhiều màn hình, thì lúc này bạn sẽ cần một phương pháp nào đó để chuyển đổi qua lại giữa các màn hình. Và Segue sẽ đảm nhiệm việc này, bạn sẽ dùng segue để chuyển tiếp giữa hai màn hình với nhau. Có 04 loại segue:

• Show (e.g. Push): hiển thị view controller mới, nhưng đồng thời đưa view controller cũ trước đó vào stack để có thể “điều hướng” quay trở lại.
• Present Modally: hiển thị view controller mới nằm “đè” lên view controller cũ, khi view controller mới đóng thì view controller cũ vẫn còn được hiển thị.
• Present As Popover: hiển thị view controller vào trong popover.
• Custom: cho phép bạn tự tạo thao tác chuyển tiếp.

Tạo Segue kết nối scene

Để làm ví dụ này, bạn hãy tạo sẵn 02 màn hình nhé (xem lại hướng dẫn ở trên). Sau đó bạn hãy thực hiện như demo dưới đây.

Với tuỳ chọn kết nối 02 màn hình là Present Modally thì bạn còn có thể cấu hình các hiệu ứng chuyển cảnh. Present Modally Segue cung cấp cho bạn 04 hiệu ứng transition để chuyển cảnh. Cách thức cấu hình hiệu ứng chuyển cảnh như sau:

1. Click chọn vào mũi tên segue liên kết giữa 02 màn hình.
2. Chọn hiệu ứng chuyển cảnh thông qua thuộc tính transition như bên dưới:

 Bạn có thể tham khảo 04 hiệu ứng chuyển cảnh trong demo dưới đây.

Chuyển Scene bằng code

Với cách thức trên, bạn đã có thể chuyển từ scene 1 sang scene 2. Tuy nhiên một số trường hợp đặc biệt nếu bạn muốn thực hiện chuyển scene bằng code thì cách thực hiện như sau:

1. 1. Thiết lập giá trị Identifier để nhận diện Segue.
      
   2. Gọi phương thức sau trong bất kỳ đoạn code nào muốn thực hiện chuyển scene.
      

➤ Lưu ý: cách thức này chỉ giúp bạn gọi chuyển scene trong quá trình viết code chứ không thay thế cách trước được, vì vẫn phải thực hiện kéo thả tạo segue của bước trước để tạo segue liên kết giữa các scene. Tất nhiên vẫn có cách làm mọi việc bằng code, nhưng vấn đề đó mình sẽ không đề cập tại thời điểm này.

Truyền dữ liệu giữa các scene

Trong thực tế, đôi khi bạn sẽ cần truyền dữ liệu từ màn hình này tới màn hình khác. Và điều này đã được View Controller hỗ trợ sẵn phương thức prepareForSegue:sender: để truyền dữ liệu giữa các scene. Cú pháp như sau:
➤ Lưu ý: Đối tượng segue trong cú pháp trên chứa thông tin của các view controller tham gia vào storyboard segue.

➤ Ví dụ: Để hiểu rõ hơn, chúng ta hãy cùng nhau xây dựng chương trình cho phép truyền dữ liệu từ scene 1 sang scene 2 như minh hoạ bên dưới nhé.

Trong minh hoạ trên, mình thực hiện truyền một chuỗi dữ liệu được nhập từ TextField trong scene 01 sang scene 02. Để thực hiện truyền dữ liệu, bạn hãy lần lượt thực hiện theo 02 bước sau nhé:

1. Đầu tiên, bạn hãy thực hiện trong class ViewController của Scene 2.
   • Thiết lập các đối tượng nhận dữ liệu của Scene 02.
     
   • Hiển thị dữ liệu nhận được khi khởi tạo Scene 02.
     
2. Bạn thực hiện trong class ViewController của Scene 1.
   • Thiết lập các đối tượng truyền dữ liệu của Scene 01.
     
   • Thực hiện truyền dữ liệu.
     

Đến đây là xong rồi đấy bạn ạ. Bạn hãy chạy thử xem kết quả thế nào nhé.

Quay lại scene trước

Khi sử dụng segue để chuyển qua lại giữa hai scene, nhưng segue chỉ thiết lập một chiều từ scene gốc tới scene đích đến. Do đó muốn quay lại scene gốc, chúng ta có 2 cách:

• Cách 1: Tương tự như đã làm với scene 1, giữ control sau đó kéo từ button “Back to Scene 1” của scene 2 sang scene 1 để tạo một segue mới giúp chuyển đổi scene.
  ➤ Lưu ý: Không nên thực hiện cách này, vì cách này sẽ tạo ra một thể hiện mới của scene 1 dẫn tới sự lãng phí bộ nhớ rất nhiều nếu chuyển đổi scene qua lại nhiều lần.
• Cách 2: Sử dụng tính năng “unwind” có từ XCode 4.5. Cho phép cài đặt một phương thức trong ViewController của scene để thực hiện hành động quay lại khi sử dụng segue kết nối các scene với nhau.

Bây giờ, mình sẽ hướng dẫn bạn thực hiện theo cách 2 nhé.

Đầu tiên, bạn hãy khai báo phương thức có tên bất kỳ (ví dụ “returned”). Phương thức returned có tham số đầu vào là đối tượng UIStoryboardSegue. Đồng thời phương thức này phải được cài đặt ở View Controller của scene gốc (trường hợp này là scene 01).
 ➤ Lưu ý: Nếu không cần thực hiện chức năng gì khi quay trở lại thì có thể để trống nội dung nhưng vẫn phải khai báo phương thức trên.

Cuối cùng, bạn hãy gắn kết phương thức “returned” vừa tạo cho Button “Back to Scene 1” của Scene 2. Bạn hãy xem minh hoạ bên dưới để thực hiện nhé.
Xong rồi đấy bạn ạ, nếu bạn thực hiện đúng theo các bước mà mình hướng dẫn thì bạn sẽ được kết quả như thế này:

Tổng kết

Bài viết hôm nay mình sẽ tạm dừng ở đây nhé. Bài học này mình đã cố gắng tổng hợp những kiến thức cơ bản về Storyboard và segue. Trong khuôn khổ bài viết ở thời điểm này thì mình chỉ có thể hướng dẫn bạn những vấn đề như vậy.

Có thể bạn sẽ nghe nhiều người nói rằng thực tế thì sẽ ít khi sử dụng Storyboard để làm việc mà code giao diện hoàn toàn. Tuy nhiên bạn cũng không cần phải nôn nóng làm gì, chúng ta đang học từ cơ bản thì hãy cố gắng xây dựng tốt nền móng. Sau này những phần nâng cao hơn mình sẽ đề cập đến việc code nhiều hơn. Còn bây giờ bạn hãy xem lại một lần nữa và cố gắng thực hiện từng bước. Nếu gặp khó khăn trong bất kỳ chỗ nào, thì bạn hãy comment bên dưới để chúng ta cùng thảo luận nhé.