Giới Thiệu Về UIStackView Trong IOS 9 và Xcode 7

UIStackView là một tính năng mới được giới thiệu trong Xcode 7. Khi làm việc với View trong Storyboard hoặc Interface Builder các lập trình viên thường xuyên phải thêm constraint vào View để canh lề hoặc định nghĩa tỷ lệ cho chúng. Công việc này thường khá tốn thời gian đặc biệt khi ứng dụng có nhiều View. UIStackView cung cấp tiện ích giúp lập trình viên dễ dàng thêm constraint cho các View với số lượng công việc giảm đáng kể. Khi sử dụng UIStackView bạn có thể bố cục một loạt các View theo hàng ngang hoặc hàng dọc và bạn chỉ cần phải thêm constraint một View đại diện thay vì từng View một.

Bài học này sẽ hướng dẫn bạn cách sử dụng UIStackView thông qua việc xây 1 ứng dụng hiển thị ảnh và tiêu đề ảnh như sau:

Thêm UIStackView

Để thêm một UIStackView trên Xcode bạn chuyển tới khung Object Library và nhập từ khoá UIStackView vào ô tìm kiếm và sau khi bấm Enter bạn sẽ thấy nó xuất hiện trong kết quả tìm kiếm. Dùng chuột và kéo thả UIStackView ở kết quả tìm kiếm đầu tiên ở trên vào phần View nằm trong ViewController trong khung StoryBoard như hình vẽ sau:

Ở trên bạn cũng thấy có hai UIStackView xuất hiên trong kết quả tìm kiếm. Một là Horizontal Stack View dùng để bố trí layout theo chiều ngang và một là Vertical Stack View dùng để bố trí layout theo chiều dọc.

Bố Cục UIStackView

Bây giờ chúng ta sẽ thêm các constraint để tạo bố cục cho UIStackview mà chúng ta mới thêm vào. Để thêm constraint cho UIStackView bạn bấm chọn icon pin nằm ở cuối khung layout hiển thị của Story Board như ở dưới đây:

Bạn điền 3 thông số để canh lề trên, lề trái và lề phải như ở hình trên và sau đó bấm chọn Add 3 Constraints.

Để tạo constraint cho chiều cao của UIStackView trong khung Document Outline của StoryBoard bạn chọn mục View và sau đó kéo thả vào mục UIStackView như hình sau:

Sau khi nhả chuột bạn chọn Equal Height