Tạo Constraint cho Stack View

Trong bài học này chúng ta bắt đầu sử dụng Auto Layout bằng cách tạo constraint vào các view có trong scene hiện có.

Tạo Stack View

Các view có trong scene hiện tại thích hợp để nhóm thành một nhóm stack view và sau đó áp dụng constraint. Ở phần này chúng ta sẽ gom các view trong scene hiện tại vào một nhóm sử dụng stack view:

Bước 1: Quay trở về màn hình standard editor và đóng màn hình assistant editor bằng cách nhấp vào nút Standard đồng thời mở khung project navigator và khung utility area bằng cách nhấp vào nút Navigator và nút Utilities như hình dưới:

standard editor

Bước 2: Chọn 3 view nhãn label, trường nhập dữ liệu và nút button bằng việc giữ phím shift và nhấp chọn từng view.

chọn view

Bước 3: Nhấp chọn biểu tượng Stack View nằm gần phía cuối bên phải màn hình Xcode như hình dưới:

stack view

Sau bước này Xcode sẽ gom cả 3 view trên vào một đối tượng stack view (tạo ra từ lớp UIStackView). Xcode sẽ tự động phân tích các thành phần view trên và quyết định xem chúng được gom theo chiều ngang (các phần tử nằm cùng 1 hàng) hay chiều dọc (các phần tử nằm ở từng hàng). Ở đây Xcode gom các view theo chiều dọc.

Tạo Constraint

Như vậy ở trên chúng ta đã kết thúc việc nhóm các view vào một nhóm stack view. Tiếp theo chúng ta sẽ tạo constraint cho stack view này:

Bước 1: Mở khung outline view và nhấp vào đối tượng Stack View như hình dưới:

Chọn đối tượng Stack View

Bước 2: Trong khung Attributes inspector nhập 12 vào trường Spacing và nhấn Enter.

Thay đổi thuộc tính cho stack view

Bước 3: Nhấp biểu tượng Pin ở phía cuối màn hình để tạo ghim constraint cho stack view.

Tạo ghim constrant

Bước 4: Nhấp vào 3 đoạn đường màu đỏ nằm ở trên, bên phải và bên trái ô vuông trống để kích hoạt các luật constraint này. Bạn cũng cần chắc chắn rằng ô checkbox nằm bên cạnh dòng Constrain to margins được tích vào.

Tạo ghim constraint

Ở trên chúng ta đã tạo ra các constraint để ghim stack view bằng cách đặt khoảng cách lề trên, lề trái và lề phải của stack view với phần tử UI liền kề gần nhất. Ở đây phần tử liền kề gần nhất (hay nearest neighbor) trong spacing to the nearest neighbor có nghĩa là so sánh với phần tử view mẹ hoặc phần tử cạnh view này (nếu có) hoặc so với lề. Trường hợp này do chúng ta đã tích vào ô Constrain to margins nên các luật constraint canh lề ở trên sẽ được áp dụng cho phần tử mẹ hay View trong scene (in hoa chữ cái đầu).

Bước 8: Nhập 060 vào các ô phía trên, phía trái và phải để đặt giá trị khoảng cách lề.

Bước 9: Chọn Items of New Constraints trong menu Update Frames.

Update Frames

Bước 10: Cuối cùng nhấp Add 3 Constraints để thêm 3 luật constrant trên.

Thêm constraint

Scene của chúng ta sẽ có kết quả giống như sau:

Scene sau khi thêm constraint

iOS Swift Xcode

Phát Triển Ứng Dụng iOS với Swift

Câu Hỏi
Chưa có câu hỏi nào cho bài hướng dẫn này
Đặt Câu Hỏi
Mời Bạn Bè
Gửi email mời bạn bè
Viết Cùng Tác Giả
Bạn biết về chủ đề này và muốn tham gia viết cùng tác giả?