CHƯƠNG 2 THIẾT KẾ GIAO DIỆN VÀ XỬ LÝ SỰ KIỆN TRÊN IOS
2.4 Autolayout trong iOS
2.4.1 Vấn đề giao diện trong ứng dụng Calculate
Hãy xoay màn hình máy ảo, dễ nhận thấy giao diện ứng dụng khơng cịn như mong muốn (Hình 2.4.1.1), hoặc đơi khi giao diện bị vỡ khơng thể nhìn (nếu ứng dụng sử dụng các loại hình ảnh với kích thước khác nhau…).
Hình 2.4.1.1 Vấn đề thay đổi hướng nhìn của các giao diện iOS
2.4.2 Cải tiến giao diện cho ứng dụng Calculate
Để giải quyết vấn đề xảy ra cho các ứng dụng iOS như đề cập trong mục 2.4.1, chúng ta cần thiết kế lại chúng theo hướng tiếp cận Autolayout (Các giao diện sẽ tự thay đổi hình dáng cho phù hợp với các kiểu màn hình khác nhau).
Bước 1: Đưa các đối tượng Button vào trong các StackView, theo từng hàng
Lựa chọn các buttons trên từng hàng => Editor => Embed In => Stack View
Hình 2.4.2.1 Nhúng các đối tượng trong Stack View
Trong Attributes Inspector thay đổi thuộc tính: Spacing = 10, Distribution = Fill Equally. Thực hiện cho tất cả các hàng. Tiếp theo, lại lựa chọn tất cả các hàng và nhúng chúng vào trong một Stack View khác. Trong Attributes Inspector thay đổi thuộc tính: Spacing = 10, Distribution = Fill Equally và Allignment = Fill. Tiếp theo, lại nhúng tồn bộ các Button với màn hình của máy tính trong một Stack View khác. Trong Attributes Inspector thay đổi thuộc tính: Spacing = 10, Distribution = Fill và Allignment = Fill. Kết quả thu được như hình 2.4.2.2.
Bước 2: Thêm các ràng buộc để đảm bảo các đối tượng
sẽ tự điều chỉnh kích thước cho phù hợp mỗi khi thay đổi độ phân giải màn hình hoặc hướng của màn hình. Để ý rằng, giờ đây các đối tượng được coi như là 1 StackView.
70
Nên nhiệm vụ của chúng ta là thêm các ràng buộc của StackView này với 4 cạnh của màn hình điện thoại. Lựa chọn Stack View cuối cùng rồi nhấp chọn biểu tượng bên dưới màn hình, màn hình thêm ràng buộc cho layout xuất hiện (Hình 2.4.2.3).
Hình 2.4.2.3 Thêm dàng buộc cho Autolayout
Sửa các giá trị cho lề trái, phải, trên dưới đều là 20 rồi nhấn “Add 4 Contraints” để hồn thành cho Autolayout.
Khi đó giao diện sẽ tự động co dãn sao cho lề trái, lề phải, lề trên và lề dưới của nó đều có giá trị là 20.
Lưu ý: Để xem nhanh cấu trúc cây của các View trong màn hình, nhấn giữ Shift + Phải
chuột trên đối tượng view muốn xem.
Chạy chương trình và xoay màn hình ta có các kết quả như hình 2.4.2.4.
Bài tập: Hãy điều chỉnh giao diện sao cho chiều cao của các button và chiều cao của
Hình 2.4.2.4 Autolayout với các chiều khác nhau của màn hình iPhone