Hình 2.5.7.1 Sau khi nhúng Table View Controller vào Navigation Controller
Segue là đối tượng rất quan trọng được dùng trong quá trình chuyển đổi qua lại giữa các
màn hình. Cịn thanh Navigation Bar dùng để chứa các điều khiển cho việc di chuyển qua lại giữa các màn hình (backward và forward). Mọi đối tượng View Controller ở
94
trong Navigation Stack đều có một thanh Navigation Bar của riêng nó. Trong ứng dụng này, chúng ta cần thêm vào Navigation Bar của Table View Controller một điều khiển dùng để di chuyển từ màn hình Table View Controller sang màn hình chi tiết món ăn mỗi khi chúng ta cần thêm một món ăn mới vào danh sách.
Bước 2: Thiết kế và cấu hình cho thanh Navigation Bar
Thơng thường trên một thanh Navigation Bar có 3 đối tượng thường gặp: Tiêu đề (nằm ở giữa thanh Navigation Bar), nút điều khiển trái (Left Bar Item Button) và nút điều khiển phải (Right Bar Item Button). Với màn hình Table View Controller chúng ta muốn nó có tiêu đề là “Meal List”, nút điều khiển trái có tên Edit (edit cho danh sách món ăn – xoá phần tử trong danh sách) và nút điều khiển phải có tên “+” để thêm món ăn mới. Với nút điều khiển trái, do Table View Controller có sẵn các phương thức cho việc uỷ quyền, bao gồm cả việc điều chỉnh và cập nhật trong Table View. Cho nên chúng ta sử dụng đối tượng điều khiển có sẵn của Table View Controller. Trong hàm viewDidLoad() hãy thêm dòng lệnh sau:
// Add Left Bar Itrem Button on the Bar
navigationItem.leftBarButtonItem = editButtonItem
Trong iOS, mỗi View Controller sẽ có một biến navigationItem dùng để cấu hình cho Navigation Bar nếu cần thiết. Khi chạy chương trình sẽ thấy trên thanh Navigation Bar bên trái có một button Edit (editButtonItem là đối tượng item bar button đã được cấp
sẵn cho mỗi Table View). Để có thể xố được các phần tử (Row) trong Table View, hãy di chuyển đến hàm uỷ quyền có tên tableView(_:commit:forRowAt:) và xố bỏ khối comment bên ngoài hàm. Trong khối lệnh sau điều kiện của if (editingStyle == .delete), ngay sau dòng comment “// Delete the row from the data source” hãy thêm lệnh: meals.remove(at: indexPath.row) để xoá phần tử tương ứng trong datasource của Table View.
Tiếp theo, chúng ta cần điều chỉnh cho Title của Navigation Bar bằng cách nhấp đúp lên vùng trống chính giữa của Navigation Bar, hoặc chọn Navigation Bar sau đó chọn bảng Attributes Inspector, đến mục Title và nhập vào “Meal List”. Kéo thả một đối tượng Bar Button Item từ thư viện đối tượng vào góc phải của thanh Navigation
Bar. Chọn button đó, mở bảng Attributes Inspector, đến mục System Item chọn Add, khi đó nút button đó sẽ có biểu tượng dấu “+”.
Bước 3: Điều hướng sang màn hình chi tiết món ăn
Trước tiên, chúng ta nên đổi tên màn hình ViewController trước đó (tên mặc định khi tạo mới ứng dụng) thành màn hình có tên MealDetailController (thực hiện hai thao tác đổi tên và kết nối màn hình trên giao diện với code).
Ctrl + Drag từ nút “+” trên thanh Navigation Bar sang màn hình MealDetailController => Một bảng lựa chọn xuất hiện => Chọn Show. Khi đó giữa mà hình Table View Controller và màn hình MealDetailController xuất hiện một Segue mới (hình dáng khác với Segue giữa Navigation Controller với Table View Controller). Đồng thời, màn hình MealDetailController cũng xuất hiện một thanh Navigation Bar và có một nút điều khiển trái mang tên “< Meal List” (Dùng để quay lại màn hình có Title trên thanh Navigation Bar là “Meal List”). Chạy thử chương trình và cho nhận xét!