MakeXYZ Fun

Điều hướng ứng dụng iOS mượt mà với Segues và Navigation Controllers trong UIKit

Tony Phạm -

Bạn đã bao giờ tự hỏi làm thế nào các ứng dụng iOS có thể chuyển đổi giữa các màn hình một cách mượt mà và trực quan như vậy? Bí mật nằm ở hai công cụ mạnh mẽ: Segues và Navigation Controllers.

1. Giới thiệu

Hầu hết các ứng dụng iOS đều được xây dựng từ nhiều màn hình, mỗi màn hình hiển thị thông tin hoặc chức năng khác nhau. Ví dụ, ứng dụng Mail có màn hình hiển thị danh sách email, màn hình soạn email mới, màn hình xem chi tiết email, v.v. Mỗi màn hình này được quản lý bởi một view controller.

Để người dùng có thể di chuyển giữa các màn hình này một cách dễ dàng và trực quan, chúng ta cần một cơ chế kết nối và điều hướng. Đó chính là lúc segue và navigation controller phát huy tác dụng.

2. Segues

Segue là cầu nối cho phép chuyển đổi từ view controller này sang view controller khác. Bạn có thể tạo segue trong Interface Builder bằng cách kéo thả từ một thành phần UI, ví dụ như button, sang một view controller khác.

Có hai loại segue chính:

  • Modal segue: Hiển thị view controller mới che phủ toàn bộ view controller hiện tại, thường dùng để chuyển đổi ngữ cảnh. Ví dụ, khi bạn nhấn nút soạn email mới trong ứng dụng Mail, một modal segue sẽ được kích hoạt, hiển thị màn hình soạn email mới che phủ màn hình danh sách email. Tương tự, khi bạn tạo liên hệ mới trong Danh bạ, modal segue sẽ hiển thị màn hình tạo liên hệ mới.

Lý do sử dụng modal segue trong trường hợp này là vì hành động soạn email mới hoặc tạo liên hệ mới là một ngữ cảnh hoàn toàn khác so với ngữ cảnh hiện tại. Người dùng cần tập trung vào hành động mới và không cần nhìn thấy màn hình trước đó.

  • Show segue: Linh hoạt hơn modal segue, Show segue có thể hiển thị theo kiểu modal hoặc push tùy thuộc vào ngữ cảnh. Nếu được sử dụng độc lập, nó sẽ hoạt động như modal segue. Tuy nhiên, nếu được sử dụng trong navigation controller, nó sẽ thực hiện push transition, tạo hiệu ứng trượt từ phải sang trái.

Ngoài ra, còn có unwind segue cho phép người dùng quay lại view controller trước đó. Ví dụ, trong màn hình soạn email mới, bạn có thể thêm một nút "Cancel" để hủy bỏ việc soạn email và quay lại màn hình danh sách email. Nút "Cancel" này sẽ được kết nối với unwind segue dẫn về view controller danh sách email. Dưới đây là ví dụ về code unwind segue:

@IBAction func unwindToRed(unwindSegue: UIStoryboardSegue) {
    // Code xử lý khi unwind segue được kích hoạt
}

3. Navigation Controllers

Navigation Controller là một view controller đặc biệt, quản lý một stack các view controller và cung cấp hiệu ứng chuyển đổi mượt mà giữa chúng.

  • Push: Thêm view controller mới vào đầu stack, tạo hiệu ứng trượt từ phải sang trái.
  • Pop: Loại bỏ view controller trên cùng khỏi stack, tạo hiệu ứng trượt từ trái sang phải.

Ví dụ, ứng dụng Settings sử dụng navigation controller để quản lý các màn hình cài đặt. Khi bạn chọn một mục trong Settings, một view controller mới sẽ được push vào stack, hiển thị màn hình cài đặt chi tiết cho mục đó. Nhấn nút "Back" sẽ pop view controller hiện tại và quay lại màn hình cài đặt trước đó.

View controller đầu tiên trong stack được gọi là root view controller. Navigation controller luôn có một root view controller, là màn hình đầu tiên được hiển thị khi người dùng mở ứng dụng.

4. Navigation Bar & Navigation Item

Navigation Bar là thành phần quen thuộc nằm ở phía trên màn hình, thường hiển thị tiêu đề và các nút điều hướng. Bạn có thể tùy chỉnh navigation bar bằng Attributes inspector trong Interface Builder, thay đổi màu sắc, font chữ, v.v.

Mỗi UIViewController đều có thuộc tính navigationItem cho phép bạn tùy chỉnh navigation bar của nó. Bạn có thể đặt tiêu đề cho navigation item, thay đổi văn bản nút "Back" (mặc định là "Back", bạn có thể thay đổi thành "Trở về", "Quay lại", v.v.), hoặc thêm bar button item - một loại nút đặc biệt có thể xuất hiện trên navigation bar hoặc toolbar. Dưới đây là ví dụ về code thêm bar button item:

// Tạo một bar button item với system item là "Add"
let addButton = UIBarButtonItem(barButtonSystemItem: .add, target: self, action: #selector(addButtonTapped))

// Thêm bar button item vào navigation item
navigationItem.rightBarButtonItem = addButton

5. Large Titles

iOS hỗ trợ hiển thị tiêu đề lớn cho navigation bar trong một số trường hợp, thường là trên màn hình chính của ứng dụng. Ví dụ, màn hình chính của ứng dụng Settings có tiêu đề lớn là "Settings", trong khi các màn hình cài đặt chi tiết có tiêu đề nhỏ hơn. Bạn có thể bật/tắt Large Titles và tùy chỉnh kiểu hiển thị của nó bằng Attributes inspector trong Interface Builder.

6. Truyền thông tin giữa các View Controller

Để truyền dữ liệu giữa các view controller trước khi segue diễn ra, bạn sử dụng phương thức prepare(for:sender:). Phương thức này nhận hai tham số: segue và sender.

  • segue: UIStoryboardSegue chứa thông tin về segue sắp được thực hiện, bao gồm identifier (tên của segue) và destination (view controller đích).
  • sender: Đối tượng đã kích hoạt segue, ví dụ như button hoặc table view cell.

Ví dụ, trong ứng dụng Danh bạ, khi bạn nhấn vào một liên hệ, một segue sẽ được kích hoạt để hiển thị màn hình chi tiết liên hệ. Trong phương thức prepare(for:sender:) của view controller danh sách liên hệ, bạn có thể truy cập view controller chi tiết liên hệ thông qua thuộc tính segue.destination và truyền dữ liệu liên hệ cho nó. Dưới đây là ví dụ về code truyền dữ liệu:

override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
    if segue.identifier == "ShowContactDetail" {
        // Ép kiểu destination thành ContactDetailViewController
        let contactDetailVC = segue.destination as! ContactDetailViewController

        // Truyền dữ liệu liên hệ cho ContactDetailViewController
        if let selectedContact = sender as? Contact {
            contactDetailVC.contact = selectedContact
        }
    }
}

7. Tạo Segues bằng Code

Đôi khi bạn cần logic phức tạp hơn để quyết định có nên thực hiện segue hay không. Ví dụ, trong ứng dụng đăng nhập, bạn chỉ muốn thực hiện segue đến màn hình chính nếu người dùng nhập đúng tên người dùng và mật khẩu.

Trong trường hợp này, bạn có thể tạo segue bằng code. Phương thức performSegue(withIdentifier:sender:) cho phép bạn kích hoạt segue bằng code, dựa vào identifier của segue. Bạn cũng có thể sử dụng phương thức shouldPerformSegue(withIdentifier:sender:) để kiểm soát việc thực hiện segue dựa trên các điều kiện nhất định. Dưới đây là ví dụ về code tạo segue bằng code:

// Kiểm tra điều kiện trước khi thực hiện segue
if shouldPerformSegue(withIdentifier: "ShowMainScreen", sender: nil) {
    // Thực hiện segue đến màn hình chính
    performSegue(withIdentifier: "ShowMainScreen", sender: nil)
}

8. Kết luận

Segues và Navigation Controllers là hai công cụ quan trọng giúp bạn tạo ra trải nghiệm điều hướng mượt mà và trực quan trong ứng dụng iOS. Hãy tìm hiểu thêm về chúng trong tài liệu của Apple để nâng cao kỹ năng phát triển iOS của bạn!