iOS/Auto Layout – Phần 5: Stack View

by DaoNMSE02016
0 comment 171 views

Lời mở đầu

Bài viết này mình sẽ giới thiệu với các bạn về một trường hợp đặc biệt trong Auto Layout đó là Stack View. Stack view là một công cụ mạnh mẽ để giúp bạn nhanh chóng cũng như dàng thiết kế giao diện người dùng của bạn.



1. Stack view

Stack view cho phéo bạn tận dụng sức mạnh của Auto Layout, tạo giao diện người dung có thể tự động thích ứng với hướng của thiết bị(Device’s orientation), kích thước màn hình, và mọi thay đổi trong không gian có sẵn. Stack view quản lý layout của tất cả các Views trong nó bằng thuộc tính arrangedSubviews. Độ chính xác của layout phụ thuộc vào các thuộc tính của nó như là: Axis, alignment, distribution, spacing và các thuộc tính khác.

Hình ảnh mô tả các thuộc tính đặc trưng của stack view

Các thuộc tính của stack view

Axis: Định nghĩa trục phát triển của stack view. Có 2 kiểu stack view đó là Vertical và horizontal.

Alignment: Định nghĩa việc căn chỉnh của các View được sắp xếp vuông góc với trục của stack view. Nó có các giá trị như sau:

UIStackView.Alignment.fill: Làm cho các View bên trong stack view lấp đầy khoảng trống có sẵn trong stack view.

UIStackView.Alignment.top: Dùng cho horizontal stack view, nó căn chỉnh cạnh trên của các View trong stack view theo cạnh trên của của nó.

UIStackView.Alignment.leading: Dùng cho vertical stack view. Nó căn chỉnh các cạnh trái của các view trong stack view với cạnh trái của nó.

UIStackView.Alignment.firstBaseline: Dùng trong horizontal stack view. Nó căn chỉnh các view trong stack view dựa trên đường baseline đầu tiên của chúng.

UIStackView.Alignment.lastBaseline: Dùng cho horizontal stack view. Nó căn chỉnh các view trong stack view dưa trên đường baseline cuối cùng của chúng.

UIStackView.Alignment.center: Nó căn giữa các view trong stack view theo chiều của nó.

UIStackView.Alignment.trailing: Dùng cho vertical stack view, căn các cạnh phải của view trong stack view với cạnh phải của stack view.

UIStackView.Alignment.bottom: Dùng cho horizontal stack view. Căn chỉnh các view trong stack view với cạnh dưới của nó.

Distribution: là thuộc tính xác định bố cục của các view được sắp xếp theo chiều của stack view.

Các thuộc tính của nó như sau:

UIStackView.Distribution.fill: Nó giúp các view trong stack view lấp đầy không gian có sẵn trong stack view. Khi các view không xếp vừa stack view, nó sẽ thu nhỏ các view dựa trên độ ưu tiên của kháng nén của chúng (Compression resistance priority). Nếu các views được sắp xếp không lấp đầy được stack view, nó sẽ kéo dài các view theo hugging priority của chúng.

UIStackView.Distribution.fillEqually: Thay đổi kích thước các view bên trong stack view sao cho tất cả các view có cùng kích thước theo chiều của nó và lấp đầy không gian có sẵn theo chiều của stack view. Ví dụ: Horizontal stack view thì các view sẽ bằng nhau về chiều rộng, vertical stack view thì bằng nhau về chiều cao.

UIStackView.Distribution.fillProportionally: Thay đổi kích thước của các view trong stack view sao cho chúng lấp đầy các không gian có sẵn theo trục của stack view. Các view được thay đổi kích thước theo tỉ lệ dựa trên kích thước nội dung bên trong của chúng dọc theo chiều của stack view.

UIStackView.Distribution.equalSpacing: Các view trong stack view sẽ được sắp xếp sao cho khoảng cách giữa chúng bằng nhau. Nếu các view được sắp xếp không vừa stack view nó sẽ thu nhỏ các View dưa trên độ ưu tiên kháng nén của chúng(Compression resistance priority).

UIStackView.Distribution.equalCentering: Làm cho các view strong stack view được sắp xếp sao cho chúng có khoảng cách từ trung tâm bằng nhau theo chiều của stack view. Trong khi duy trì thuộc tính spacing(khoảng cách) giữa các view. Nếu các view được sắp xếp không vừa stack view, nó sẽ thu hẹp khoảng cách cho đến khi đạt khoảng cách tối thiểu được xác định bới thuộc tính khoảng cách của nó. Nếu các view vẫn không phù hợp, stack view sẽ thu nhỏ các view bên trong nó dựa trên thuộc tính Compression resistance priority.

Spacing: Là thuộc tính định nghĩa khoảng cách các cạnh liền kề của các view trong stack view.

Để làm việc với stack view hiệu quả các bạn cần hiểu các thuộc tính của nó. Khi bạn thành thạo nó rồi sẽ giúp bạn tiết kiệm khá nhiều thời gian khi auto layout.

2. Ví dụ đơn giản về Stack View

Ở ví dụ này mình sử dụng stack view bố trí layout theo hàng dọc để xắp xếp Label, ImageView và Button.

2.1 Mô tả Views và Constraints

Sử dụng Interface Builder và kéo vào một vertical stack view. Sau đó các bạn kéo các Label, Image View và Button vào trong stack view đó như hình dưới.

Lúc này stack view của chúng ta chưa có constraint nên chúng ta cần gán constraint cho stack view như sau:

  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

Việc này giúp cho stack view của chúng ta xác định được vị trí và kích thước của nó. Trong trường hợp này stack view của bạn sẽ có kích thước full màn hình.

2.2 Cài đặt các thuộc tính cho stack view

Mở tab Attributes Inspector và set các thuộc tính cho stack view như sau:

StackAxisAlignmentDistributionSpacing
Stack viewVerticalFillFill8
  1. Axis: Đại diện cho chiều hướng của stack view, Vertical(xếp theo chiều dọc)
  2. Alignment: Đại diện cho việc căn chỉnh, Fill(Điền đầy stack view theo chiều của nó)
  3. Distribution: Đại diện cho phân chia các view trong stack view. Ta gán giá trị Fill cho nó nhằm mục đích làm các view được lấp đầy các khoảng trống của stack view.
  4. Spacing: Giá trị được gán = 8 nhằm tạo khoảng cách giữa các View trong stack view cách đều nhau 1 khoảng = 8 points

Tiếp đến chúng ta cần set thuộc tính của image view như sau:

ViewAttributeValue
Image ViewImageChọn ảnh mà bạn muốn
Image ViewModeAspect fill

Cuối cùng chúng ta mở Size inspector lên để gán lại các giá trị Priorities cho Image View:

NameVertical huggingVertical registance
Image view249749

Vì chúng ta sử dụng distribution = Fill nên nó sẽ thu nhỏ các View dựa trên độ ưu tiên kháng nén(Compression registance priority) của chúng. Đó là lí do tại sao chúng ta phải giảm độ ưu tiên theo chiều dọc của Image View.

Vậy là ta đã có được kết quả giống như trong hình ở trên.
Để tạo được kết quả như trên mà không dùng stack view chúng ta sẽ phải tạo các constraint cho cả 3 view là label, image view và button. Nhưng với stack view mọi chuyện đã đơn giản hơn nhiều :D.



0 comment
0

Leave a Comment

* By using this form you agree with the storage and handling of your data by this website.