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.

blog-The-Sample-App-1024x731=2Mộ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

Simple_Stack_View_Screenshot_2x

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

simple_stack_2x

1. `Stack View.Leading = Superview.LeadingMargin` 2. `Stack View.Trailing = Superview.TrailingMargin` 3. `Stack View.Top = Top Layout Guide.Bottom + Standard` 4. `Bottom Layout Guide.Top = Stack View.Bottom + Standard`
 

Thuộc tính

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

Stack Axis Alignment Distribution Spacing
Stack View Vertical Fill Fill 8
Kế tiếp là set thuộc tính cho image view
View Attribute Value
Image View Image (an image of flowers)
Image View Mode Aspect Fit
Cuối cùng trong size của inspector, set  content-hugging và compression-resistance(CHCR) của Image View
Name Horizontal hugging Vertical hugging Horizontal resistance Vertical resistance
Image View 250 249 750 749
[]()
**Kết luận**: Giống như html5 trong thiết kết web site khi thiết kế ứng dụng trên ios sử dụng stack views cũng rất tiện lợi, mặc dù mới tiếp xúc với việc lập trình ios không lâu nhưng tôi thấy lựa chọn này cũng không tệ.
**Tham khảo**
[https://developer.apple.com/library/ios/navigation/](https://developer.apple.com/library/ios/navigation/)
[http://www.hoclaptrinh.org/bai-viet/Gioi-Thieu-Ve-UIStackView-Trong-IOS-9-va-Xcode-7](http://www.hoclaptrinh.org/bai-viet/Gioi-Thieu-Ve-UIStackView-Trong-IOS-9-va-Xcode-7)
[https://www.youtube.com/watch?v=wZc-n3Cqosc](https://www.youtube.com/watch?v=wZc-n3Cqosc)