Auto Layout là yếu tố quan trọng nhất khi thiết kế ứng dụng iOS. Phát triển giao diện trở nên linh hoạt và dễ dàng hơn nhờ Auto Layout.
Để căn chỉnh 2 nút bấm (button) theo chiều dọc, chúng ta sẽ sử dụng Auto Layout.
Các bước thực hiện
Bước 1: Tạo dự án mới
Mở Xcode → New Project → Single View App → Đặt tên là "AlignButtons".
Bước 2: Thêm 2 nút bấm vào Storyboard
Mở Main.storyboard, kéo thả 2 Button vào màn hình, đặt tên lần lượt là "Button 1" và "Button 2".
Bước 3: Căn giữa dọc 2 nút bấm
Chọn cả 2 nút bấm (giữ Shift + click) → Nhấn vào nút Add New Alignment Constraints (biểu tượng hình cái cân) → Chọn Vertical Centers → Add 1 Constraint.
Bước 4: Đặt chiều rộng bằng nhau
Vẫn chọn cả 2 nút → Nhấn Add New Constraints (biểu tượng hình cái thước) → Chọn Equal Widths → Add 1 Constraint.
Bước 5: Căn lề cho nút bên trái
Chọn nút bên trái → Add New Constraints → Đặt Leading = 20 và Trailing = 20 (đối với superview) → Add 2 Constraints.
Bước 6: Căn lề cho nút bên phải
Chọn nút bên phải → Add New Constraints → Đặt Leading = 20 và Trailing = 20 → Add 2 Constraints.
Kết quả
Ngay sau khi thêm constraints, 2 nút bấm sẽ được căn chỉnh theo chiều dọc hoàn hảo trên mọi kích thước màn hình.
Mẹo thêm
Bạn cũng có thể sử dụng Control-drag (giữ Control và kéo chuột) giữa 2 nút để nhanh chóng tạo constraint "Vertical Spacing" hoặc "Equal Widths".