2.5 Case Study: Thiết kế ứng dụng Quản lý món ăn
Quản lý món ăn là một ứng dụng tương đối phức tạp đối với người mới học về lập trình iOS, tuy nhiên, giáo trình sẽ trình bày các kiến thức, kỹ năng cần thiết khi phát triển một ứng dụng iOS cơ bản thơng qua việc phân tích thiết kế và hồn thiện từng bước từ
thiết kế giao diện màn hình, thêm vào các control phức tạp hơn (tự viết), thêm vào nhiều màn hình khác nhau, cách di chuyển giữa các màn hình, cách xử lý các sự kiện, cách uỷ quyền và bổ sung các chức năng cho các đối tượng uỷ quyền, phân tích thiết kế cho cơ sở dữ liệu và cuối cùng là vận dụng bản đồ trực tuyến trong ứng dụng. Do vậy sinh viên sẽ dễ dàng thực hiện và hiểu hơn các kiến thức, kỹ năng được truyền đạt.
2.5.1 Luyện tập thiết kế giao diện cơ bản và autolayout trong iOS
Trước tiên, hãy tạo một Project mới có tên FoodManagement2020 (include Test), với một màn hình đơn! Trong đó hãy luyện tập thiết kế giao diện màn hình mới với các ràng buộc như sau: Đối tượng Text Field (placeholder text: Nhập vào “Enter meal name!”, căn giữa, Return key = Done, tuỳ chọn “Auto-enable Return key” được chọn để đảm bảo phím Done trên bàn phím chỉ sáng lên khi Text field có dữ liệu, ràng buộc trái 47,
72
ràng buộc phải 47), Image View (Rộng = Dài = 320, ràng buộc Aspect Ratio để đảm bảo tỷ lệ ảnh không bị thay đổi, Intrinsic Size chọn Placeholder với chiều dài 320, chiều rộng 320 để đảm bảo ảnh co dãn theo kích thước thực khi chạy), Button (Title = Go to Map, ràng buộc lề trái 100, lề phải 100) để có kết quả như hình 2.5.1.1.
Lưu ý: Khi đưa các đối tượng vào Stack View trong
chế độ Autolayout để Spacing của Stack View là 8, Allignment là Center, Distribution là Fill.
Sau khi đưa các đối tượng vào Stack view xong mới thiết lập các ràng buộc cho các đối tượng đó như lề trái, lề phải, Aspect Ratio, lựa chọn Placeholder cho Instrinsic Size của Image.
Khi chạy thử chương trình, Image view sẽ khơng xuất hiện do chưa có ảnh. Để thử đưa ảnh Default.