Hiểu Biết về Size Classes và Trait Variations trong Phát Triển Ứng Dụng iOS

Giới Thiệu

Trong quá trình phát triển ứng dụng iOS, việc thiết kế giao diện linh hoạt để tương thích với nhiều kích thước màn hình khác nhau là vô cùng quan trọng. Đây không chỉ giúp tăng trải nghiệm người dùng mà còn tối ưu hóa hiệu suất của ứng dụng trên các thiết bị.

Mục Tiêu Bài Viết

Bạn đã từng gặp các thuật ngữ như wC, wR, hC,... và cảm thấy bối rối? Đừng lo lắng, sau khi đọc bài viết này, bạn sẽ hiểu rõ về khái niệm size class, cách áp dụng chúng trong thiết kế giao diện, và những mẹo hữu ích để tạo ra giao diện người dùng thích ứng trên đa dạng thiết bị.

Khái Niệm

1. Size Classes

Size classes là một hệ thống trong iOS được thiết kế để giúp bạn xây dựng giao diện người dùng phù hợp với nhiều kích thước màn hình khác nhau. Size classes phân loại kích thước màn hình thành 2 trục chính:

Width (Rộng)
Height (Cao)

Mỗi trục có 2 dạng chính:

Compact: Kích thước nhỏ (chẳng hạn như iPhone ở chế độ dọc).
Regular: Kích thước lớn (như iPad ở chế độ ngang).

Ví dụ: iPad ở chế độ ngang có size class là Regular cho cả chiều rộng và chiều cao, trong khi iPhone ở chế độ dọc có size class là Compact width và Regular height. Nếu bạn vẫn chưa hiểu rõ về khi nào là compact và khi nào là regular, hãy cùng tìm hiểu khái niệm tiếp theo.

2. Trait Variations

Trait Variations cho phép bạn điều chỉnh giao diện người dùng dựa trên các size classes khác nhau. Bạn có thể tạo ra các biến thể về constraints, kích thước, khoảng cách và các thuộc tính khác cho view tùy thuộc vào từng size class cụ thể. Điều này giúp tối ưu hóa giao diện người dùng cho các loại thiết bị và định hướng màn hình khác nhau.

Ghi chú: Khoảng chuyển đổi giữa 2 loại này thường là 600px.

3. Cách Sử Dụng Size Classes trong Mã Nguồn

Chúng ta sẽ thực hành một bài toán đơn giản để hiểu rõ hơn về cách sử dụng Size Classes. Mục tiêu của chúng ta là thay đổi văn bản của một UILabel khi thiết bị iPhone xoay từ ngang sang dọc và ngược lại. Dưới đây là mã nguồn mẫu:

swift Copy

class ViewController: UIViewController {

    @IBOutlet weak var textLabel: UILabel! // Kết nối UILabel từ Interface Builder

    override func viewDidLoad() {
        super.viewDidLoad()
        updateLabelForOrientation() // Cập nhật văn bản khi tải lần đầu
    }

    override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
        super.traitCollectionDidChange(previousTraitCollection)
        updateLabelForOrientation() // Cập nhật khi kích thước thay đổi
    }

    func updateLabelForOrientation() {
        if traitCollection.verticalSizeClass == .compact && traitCollection.horizontalSizeClass == .regular {
            textLabel.text = "Chế độ Ngang"
        } else if traitCollection.verticalSizeClass == .regular && traitCollection.horizontalSizeClass == .compact {
            textLabel.text = "Chế độ Dọc"
        }
    }
}

Trong đoạn mã này:

Trong hàm updateLabelForOrientation(), chúng ta kiểm tra kích thước lớp để xác định chế độ của thiết bị và thay đổi văn bản của UILabel tương ứng.
Khi thiết bị được xoay từ chế độ ngang sang dọc hoặc ngược lại, văn bản trên UILabel sẽ được cập nhật tự động theo trạng thái mới.

4. Sử Dụng Size Classes với Interface Builder

Để sử dụng size class trong Interface Builder, hãy nhớ rằng các ký tự như wC, wR, hC, ... là viết tắt cho các size classes:

wC: Width-Compact
wR: Width-Regular
hC: Height-Compact
hR: Height-Regular

Để xây dựng ứng dụng của bạn với size classes trong Interface Builder, hãy làm theo các bước sau:

Tạo một dự án mới trong Xcode và mở Interface Builder, kéo thả một UILabel vào View.
Chuyển đổi text của label sang dạng Attributed.
Tạo các constraint size classes: Chọn nút (+) và chọn các giá trị, sau đó nhấp vào nút Add Variation:
- Trạng thái dọc:
  - height: regular
  - width: compact
- Trạng thái ngang:
  - height: compact
  - width: regular

Sau khi thiết lập các constraint, hãy build ứng dụng và kiểm tra kết quả nhé.

5. Kết Luận

Size class là công cụ mạnh mẽ giúp bạn tạo ra giao diện linh hoạt và thích ứng trên nhiều thiết bị iOS. Việc hiểu và áp dụng tốt size class sẽ mang lại lợi ích lớn cho trải nghiệm người dùng trong ứng dụng của bạn.
Hãy thử áp dụng size class vào các dự án hiện tại của bạn và tìm hiểu thêm về Auto Layout và Trait Variations.

Nếu bạn gặp khó khăn trong việc sử dụng size class, hãy để lại câu hỏi trong phần bình luận và tôi sẽ giúp bạn giải đáp!

Tài Liệu Tham Khảo

Apple Developer Documentation: Size Classes and Auto Layout
Hacking with Swift: Cách sử dụng size classes trong iOS.
source: viblo