Basic iOS tutorial : Stack View

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:

• Basic iOS tutorial : Custom View
• Basic iOS tutorial : Drawing

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 đề:

1. Bố cục view : để auto layout cho các phần view nhỏ hơn, lúc đó sẽ đơn giản hơn
2. 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

• • Bước 2: canh chính giữa Horizontal

• • Bước 3: canh top so với View trên

• Kết quả

4. Stack View Properties

Tuỳ chỉnh một số thuộc tính của Stack View, xem nó thay đổi như thế nào nha.

4.1. Axis

• Horizontal

• Vertical

4.2 Alignment

• Fill

• Leading

• Center

• Trailing

Tạm thời OK thì chúng ta sẽ xét là Fill cho đẹp và chuyển sang các thuộc tính khác của Stack View.

4.3 Distribution

• Fill

• Fill Equally

• Fill Proportionally

• Equal Spacing

• Equal Centering

4.4 Spacing

• Fix value

• Standard

5. Stack View in Stack View

• Có thể tạo Stack View cho các Stack View để bố cục giao diện hợp lý hơn
• Các thuộc tính và constraint thì vẫn áp dụng được như trên.
• Tiếp tục ví dụ, clear hết tất cả các contraints layout

• Embed in 2 view thành 1 Stack View

• Xét constraints cho Stack View lớn
  • Kích thước

• • Canh giữa màn hình

• Edit lại các thuộc tính của Stack View

• Làm tiếp cho các Stack View con
• Kết quả

Tạm kết

• Tìm hiểu Stack View & cách tạo
• Tuỳ chỉnh được các thuộc tính của Stack View
• Bố cục được giao diện với Stack View

Written by chuotfx

Hãy ngồi xuống, uống miếng bánh và ăn miếng trà. Chúng ta cùng nhau đàm đạo về đời, về code nhóe!