Written by chuotfx on October 23, 2019

Basic iOS tutorial : Stack View

Contents

Chào bạn, chúng ta lại tiếp tục với seri học iOS cho mọi người. Ở bài trước, thì mình đã giới thiệu sơ lược về Auto Layout trong việc thiết kế giao diện của ứng dụng iOS. Bây giờ, chúng ta sẽ tới phần tạo giao diện khác Auto Layout 1 chút, nhưng đơn giản hơn rất nhiều. Đó là Stack View, nó rất phù hợp với việc tạo giao diện nhanh và không quá phức tạp.

Còn nếu bạn chưa biết hay chưa đọc qua cách tạo giao diện bằng code chay thì có thể tham khảo các bài sau:

Bắt đầu thôi!

Chuẩn bị

MacOS 10.14.4
Xcode 11.0
Swift 5.1

1. Giới thiệu

Khó khăn khi tạo giao diện bằng code chay:
- Tính toán frame cho phù hợp
- Custom view tốn thời gian
- Testing phải build đi build nhiều lần
Khó khăn khi tạo giao diện bằng Auto Layout:
- Khó, khó và khó
- Contraints cũng rất phức tạp
- Debugs không ra
- Đôi lúc không hiểu vì sao kéo thả lại được
- Giao diện càng phức tạp thì Auto Layout lại khá là nặng

Cần tìm 1 giải pháp để giải quyết 2 vấn đề:

Bố cục view : để auto layout cho các phần view nhỏ hơn, lúc đó sẽ đơn giản hơn

Nhanh và tiết kiệm thời gian

Chào mừng bạn đến với Stack View.

Stack View là gì?
- Là một cách dựng giao diện dễ dàng và nhanh chóng hơn
- Cung cấp cách layout của các view theo các chiều horizontal và vertical
- Có các thuộc tính để tuỳ chỉnh cho việc tự động layout
  - alignment
  - distribution
  - spacing
  - …
- Nó cũng giống như 1 view bình thường nên có thể sử dụng Auto Layout cho nó.

2. First Stack View

Mở Xcode > new iOS project
Mở file Main.storyboar
Thêm 3 UIImageView

Tại thanh Auto Layout Bar > Chọn Embed in > Chọn Stack View
- 3 UIImageView sẽ nhóm lại
- Bọc chúng nó bằng 1 Stack View

Kết quả khá là xấu nếu ảnh của bạn có size lơn.

Auto Layout cho Stack View trên
- Size : 310px x 100px
- Center: Horizontal & Vertical
Edit lại thuộc tính của Stack View với:
- Alignment = Fill
- Distribution = Fill Equally
- Spacing = 5
Kết quả:

3. Stack View Constraints

Xem Stack View cũng là một View, thì chúng ta có thể áp dụng các constraints từ Auto Layout cho nó.

Cần phải có `constraints` cho các Stack View vì chúng rất dễ bị ảnh hưởng từ các subview trong nó. Dẫn tới layout của bạn rất là xấu
Ví dụ:
- Thêm 1 UIView chứa 2 subview (2 UILabel)
- View này sẽ ở chính giữa màn hình và Stack View trên sẽ ở dưới 30px so với View
Add constraint cho Stack View
- Bước 1: kích thước