Thiết kế giao diện ứng dụng tuỳ chỉnh với các màn hình khác nhau với Stack Views trong Xcode

Như chúng ta đã biết trung bình mỗi năm apple lại cho ra một iphone thế hệ mới với kích cỡ màn hình khác nhau. Chính vì vậy có một bài toán đặt ra là làm sao để giao diện trên một ứng dụng có thể hiện thị đẹp trên các thiết bị đó. Để giải quyết bài toán đó hôm nay tôi xin giới thiệu một phương pháp thiết kế ứng dụng trên IOS với giao diện tuỳ chỉnh đó chính là Stack Views

Stack Views là gì
Stack Views là một interface gồm nhiều views được sắp xếp một cách hợp lý, và tập hợp các views ấy được đặt trong một row hoặc một column, stack view có thể nhóm nhiều đối tượng UI thành một bằng cách sử dụng stack views, hơn thế nữa, bạn cũng ko cần phải chỉnh auto-layout cho những views đã được nhóm vào.

Stack views là một công cụ rất mạnh để thiết kế giao diện tuỳ chỉnh một cách nhanh gọn và dễ dàng. Nó dễ dàng điều khiển cũng như điều chỉnh các thành phần trên giao diện. Tuy nhiên cứ thêm các thuộc tính vào như vậy nó lại làm tăng tính phức tạp của layout.

Stack View quản lý các views con bên trong nó, đồng thời nó giúp bạn tạo các constrains cho các views ấy một cách tự động. Điều này có nghĩa là, các views con sẽ luôn sắn sàng thích nghi với các kích cỡ màn hình khác nhau. Bạn cũng có thể nhúng một stack view vào bên trong stack view khác để build những UI phức tạp hơn.

Một ví dụ đơn giản

Giả sử trên layout có 3 thành phần là label, Image, button

Label: Flowers

Image: Ảnh lọ hoa

Button: Nút Edit

Views and Constraints

Trên xcode dùng drag and drop để thêm 3 thành phần vào layout sau đó thêm constraints vào như sau

Thuộc tính

Đâu tiên set thuộc tính cho stack view