UIStackView Distribution Types

Bài đăng này đã không được cập nhật trong 5 năm

UIStackView là một view rất hữu ích, bạn có thể dễ dàng bố trí một list các view trong StackView theo chiều dọc hoặc chiều ngang. Bằng việc thay đổi các thuộc tính như alignment, distribution và spacing, các view chứa bên trong StackView sẽ tự động adjust space tương ứng. Bài viết này mình sẽ giải thích về thuộc tính distribution.

Thuộc tính distribution để chỉ định các subview được layout như thế nào trong stack. Bạn có thể tìm chỗ setting ở Interface Builder như sau (hoặc setting trong code):

Fill

Đây là type distribution mặc định khi bạn tạo một UIStackView mới. Trong ví dụ, mình có 2 UIStackView, dùng subview là các UITextField bên trong horizontal UIStackView. 1 subview có CHP (Content Hugging Priority) thấp hơn sẽ tự fill rộng ra bằng với khoảng trống còn thừa của các subview còn lại.

Mình set CHP thấp hơn như sau:

Kết quả:

Nếu tất cả các subview có cùng CHP thì XCode sẽ complain rằng layout là ambiguous:

Fill Equally

Với Fill equally, các subview trong UIStackView được giãn ra có kích thước bằng nhau, CHP không còn quan trọng vì mỗi subview có kích thước như nhau: Ví dụ:

Fill Proportionally

Đây là kiểu khá thú vị. Sẽ khó nhận thấy hiệu ứng nếu không thử các IPhone kích thước khác nhau và các hướng khác nhau. Fill Proportionally đảm bảo các subview sẽ được giãn ra với tỉ lệ bằng nhau khi layout của bạn giãn ra hay co lại.

Ví dụ:

Mình quay ngang màn hình:

Equal Spacing

Equal Spacing sẽ duy trì khoảng cách bằng nhau giữa mỗi subview và sẽ không thay đổi kích thước các subview. Mình sẽ minh họa điều này bằng cách vẽ các đường màu đỏ để chỉ ra kích thước bằng nhau của khoảng cách giữa các label.

Equal Centering

Cuối cùng, loại distribution cuối cùng hơi khó nhìn nếu không có hình minh họa. Nó sẽ equally space các center của các subview. Để minh họa điều này, mình đã vẽ các đường thẳng đứng màu đỏ xuống trung tâm của mỗi subview. Khoảng cách giữa các đường màu đỏ được đặt cách đều nhau.