Lập trình iOS là một lĩnh vực đầy tiềm năng và cơ hội lớn dành cho những ai theo đuổi trong thời đại mới, nơi bạn có thể tạo ra những ứng dụng di động mạnh mẽ, trực quan và tối ưu cho hệ sinh thái Apple. Trong quá trình xây dựng giao diện người dùng (UI), việc nắm vững các công cụ như StackView và AutoLayout là yếu tố then chốt giúp bạn phát triển ứng dụng hiệu quả và chuyên nghiệp hơn.
Trong bài viết này, Thầy Duy – Thạc sĩ chuyên ngành Công nghệ Thông tin, Đại học Bách Khoa, Hà Nội sẽ hướng dẫn chúng ta cách thực hành tạo một giao diện đơn giản nhưng đầy đủ chức năng, gồm Label, TextField và Button, tất cả được đặt trong một StackView và sử dụng AutoLayout để hiển thị linh hoạt. Nội dung đi theo các bước cụ thể trong một video thực hành, giúp bạn học nhanh, hiểu sâu và ứng dụng được ngay vào dự án thực tế. Cùng theo dõi và đón đọc nhé!
1. StackView là gì? – Giới thiệu StackView
StackView là một thành phần quan trọng trong UIKit, cho phép bạn tổ chức và sắp xếp các thành phần UI như Label, TextField, Button theo chiều ngang hoặc dọc một cách khoa học, gọn gàng mà không cần quá nhiều ràng buộc (constraint) thủ công. Khi kết hợp với AutoLayout – hệ thống bố cục linh hoạt của iOS – bạn có thể dễ dàng xây dựng giao diện tương thích với mọi kích thước màn hình chỉ bằng Swift code.
Lợi ích của StackView
- Tiết kiệm thời gian viết constraint bằng tay.
- Tự động co giãn, căn chỉnh theo nhu cầu.
- Phản ứng tốt với các thay đổi giao diện động như ẩn/hiện view, xoay màn hình, v.v.
- Tổ chức layout phức tạp dễ dàng hơn thông qua việc lồng StackView.
Các thuộc tính quan trọng của StackView
| Thuộc tính | Vai trò |
|---|---|
axis | Xác định chiều sắp xếp (.horizontal hoặc .vertical) |
alignment | Căn chỉnh theo trục phụ |
distribution | Phân phối không gian giữa các view con |
spacing | Khoảng cách giữa các view con |
arrangedSubviews | Danh sách các view con được quản lý layout |
isLayoutMarginsRelativeArrangement | Dùng để thêm khoảng cách từ layout margins |
2. AutoLayout với StackView bằng Code Swift
Thay vì sử dụng storyboard, chúng ta sẽ thực hành hoàn toàn bằng Swift để hiểu rõ cơ chế hoạt động của StackView và AutoLayout.
Khởi tạo StackView
let stackView = UIStackView()
stackView.axis = .vertical
stackView.alignment = .fill
stackView.distribution = .equalSpacing
stackView.spacing = 16
stackView.translatesAutoresizingMaskIntoConstraints = false
Thêm StackView vào view cha và áp dụng AutoLayout
view.addSubview(stackView)
NSLayoutConstraint.activate([
stackView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 20),
stackView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 16),
stackView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -16)
])
3. Tạo Label dựa vào nút btfirst
Tạo UILabel đơn giản và thêm vào StackView
let titleLabel = UILabel()
titleLabel.text = "Xin chào, hãy nhập thông tin bên dưới"
titleLabel.font = UIFont.boldSystemFont(ofSize: 18)
titleLabel.textAlignment = .center
titleLabel.numberOfLines = 0
stackView.addArrangedSubview(titleLabel)
Trong đó
-
UILabelthường được dùng làm tiêu đề trong form. - Khi thêm vào StackView, label sẽ tự co giãn theo chiều rộng của StackView nếu không set width riêng.
-
Nếu muốn căn giữa nội dung, cần kết hợp
textAlignment = .center.
4. Tạo TextField dưới Label
Tạo UITextField và cấu hình giao diện
let nameField = UITextField()
nameField.placeholder = "Nhập họ tên"
nameField.borderStyle = .roundedRect
nameField.heightAnchor.constraint(equalToConstant: 44).isActive = true
stackView.addArrangedSubview(nameField)
Lý do cần constraint chiều cao
UITextField không tự set chiều cao nếu không có intrinsic content size hoặc constraint. Do đó, heightAnchor là cần thiết để UI hiển thị đúng chuẩn.
5. Tạo Button dưới TextField
Tạo UIButton và thêm vào StackView
let submitButton = UIButton(type: .system)
submitButton.setTitle("Gửi thông tin", for: .normal)
submitButton.titleLabel?.font = UIFont.systemFont(ofSize: 16, weight: .semibold)
submitButton.backgroundColor = .systemBlue
submitButton.tintColor = .white
submitButton.layer.cornerRadius = 8
submitButton.heightAnchor.constraint(equalToConstant: 44).isActive = true
stackView.addArrangedSubview(submitButton)
Trong đó:
-
UIButtonnên được định hình rõ chiều cao. - Có thể dùng màu nền để làm nổi bật hành động.
-
cornerRadiusgiúp nút bấm đẹp hơn theo chuẩn giao diện iOS.
6. Tạo layout có nhiều thành phần – StackView lồng nhau
Ví dụ tạo StackView ngang trong StackView dọc
let emailField = UITextField()
emailField.placeholder = "Email"
emailField.borderStyle = .roundedRect
let phoneField = UITextField()
phoneField.placeholder = "SĐT"
phoneField.borderStyle = .roundedRect
let horizontalStack = UIStackView(arrangedSubviews: [emailField, phoneField])
horizontalStack.axis = .horizontal
horizontalStack.distribution = .fillEqually
horizontalStack.spacing = 12
stackView.addArrangedSubview(horizontalStack)
Tại sao nên dùng StackView lồng nhau?
- Giúp mô hình hóa giao diện giống như bảng biểu hoặc nhóm thông tin.
- Có thể dễ dàng thay đổi chỉ bằng cách thao tác với các StackView con.
- Làm UI linh hoạt và gọn gàng khi cần thay đổi.
7. So sánh StackView và AutoLayout thủ công
| Tiêu chí | StackView | AutoLayout thủ công |
|---|---|---|
| Dễ học | ✔️ Dễ hơn | ❌ Phức tạp hơn |
| Tính linh hoạt | ✔️ Vừa đủ | ✔️ Rất cao |
| Quản lý layout động | ✔️ Rất tốt | ❌ Khó và dễ lỗi |
| Debug lỗi giao diện | ✔️ Ít lỗi hơn | ❌ Dễ bị conflict constraint |
StackView không thể thay thế hoàn toàn AutoLayout, nhưng với những layout lặp lại, dọc-ngang rõ ràng thì đây là lựa chọn tối ưu.
8. Lỗi thường gặp khi dùng StackView
- Không hiện view
+ Nguyên nhân: Quên set translatesAutoresizingMaskIntoConstraints = false
+ Cách khắc phục:
stackView.translatesAutoresizingMaskIntoConstraints = false
- View bị đè lên nhau hoặc không co giãn đúng
+ Nguyên nhân: Thiếu constraint nội bộ hoặc distribution, spacing sai.
+ Khắc phục:
- Đảm bảo mỗi view con có chiều cao cố định (đối với TextField, Button).
-
Sử dụng
.fillEqually,.equalSpacingtùy nhu cầu.
Như vậy, qua bài viết này, thầy Duy đã giúp bạn hiểu rõ:
- Cách khởi tạo và cấu hình StackView bằng Swift.
- Kết hợp StackView với AutoLayout để bố trí giao diện động.
- Tạo form đơn giản gồm Label, TextField, Button.
- Dùng StackView lồng nhau để tạo layout phức tạp hơn.
StackView chính là là công cụ quan trọng trong lập trình UI hiện đại, giúp bạn thiết kế giao diện nhanh – sạch – dễ bảo trì.
Nếu muốn theo dõi tiếp những kiến thức hay và bổ ích từ thầy Duy về Lập trình IOS, các bạn có thể theo dõi thầy qua các kênh sau:
- Kênh YouTube: https://www.youtube.com/@LeHongDuyCNTT
- GitHub cá nhân: https://github.com/DuyLeHong
Đặc biệt, để nhận full lộ trình học IOS, đừng quên theo dõi CodeFresher và đăng ký tại link: https://laptrinh-online.vn/course/lap-trinh-ios-swift
Cảm ơn và hẹn gặp lại các bạn!
Địa chỉ: Trung tâm CodeFresher – Số 104 Hoàng Ngân, Cầu Giấy, Hà Nội.
SĐT: 0813188668 , 0332026803 (Zalo / Call)
Trả lời