pt — khái niệm, Points và tỷ lệ trong iOS

pt là gì trong iOS?

pt (point) — đơn vị đo lường logic trong iOS cho phép nhà phát triển mô tả giao diện bằng các tọa độ trừu tượng, độc lập với độ phân giải vật lý của màn hình. Apple giới thiệu khái niệm points cùng với việc ra mắt iPhone 4 và màn hình Retina vào năm 2010. Trước Retina, các nhà phát triển sử dụng trực tiếp pixel — một pixel giao diện tương ứng với một pixel vật lý.

Hệ tọa độ iOS được xây dựng trên các điểm: điểm (0,0) nằm ở góc trên bên trái màn hình, trục X hướng sang phải, trục Y hướng xuống dưới. Kích thước màn hình tính theo điểm không đổi cho mỗi loại thiết bị: iPhone SE — 375×667 pt, iPhone 15 Pro — 393×852 pt, iPad — 768×1024 pt (dọc), 1024×768 pt (ngang). Độ phân giải vật lý có thể là 1179×2556 px (iPhone 15 Pro) — nhưng nhà phát triển làm việc với các điểm.

Theo Apple Human Interface Guidelines, các điểm là sự trừu tượng hóa cơ bản của UIKit. Tất cả các framework — UIKit, SwiftUI, Core Graphics, SpriteKit — hoạt động theo điểm. Việc chuyển đổi sang pixel diễn ra tự động trong giai đoạn kết xuất thông qua UIScreen.nativeScale.

Hệ số tỷ lệ: @1x, @2x, @3x

Hệ số tỷ lệ xác định bao nhiêu pixel vật lý tương ứng với một điểm logic. Apple sử dụng ba cấp độ: @1x — 1 pt = 1 px (iPad mini không Retina, các mẫu cũ), @2x — 1 pt = 2 px (hầu hết iPhone trước 2020, iPad Retina), @3x — 1 pt = 3 px (iPhone X trở lên, bao gồm iPhone 15 Pro).

Hệ số tỷ lệ có thể truy cập thông qua UIScreen.main.scale (cho UIKit) và @Environment(\.displayScale) (cho SwiftUI). Nó được sử dụng khi tải tài nguyên: hệ thống tự động chọn hình ảnh có hậu tố @2x hoặc @3x từ Assets.xcassets. Nhà phát triển không nên tải ảnh @1x trên thiết bị Retina — điều này làm giảm hiệu suất và chất lượng.

CGPoint và tọa độ theo điểm

Cấu trúc CGPoint là kiểu cơ bản để biểu diễn tọa độ trong iOS và macOS. Nó chứa hai trường: x (CGFloat) và y (CGFloat), các giá trị được chỉ định theo điểm. CGPoint được sử dụng trong tất cả các framework của Apple: UIKit (frame.origin), Core Graphics (CGContext), SpriteKit (SKNode.position), Core Animation (CALayer.position).

// CGPoint — làm việc với tọa độ theo điểm
import UIKit

// Tạo một điểm
let point = CGPoint(x: 100.0, y: 200.0)
print("Tọa độ: \(point.x), \(point.y)")

// Các phép toán
let offset = CGPoint(x: 16.0, y: 8.0)
let translated = CGPoint(
    x: point.x + offset.x,
    y: point.y + offset.y
)

// Khoảng cách giữa các điểm
func distance(from a: CGPoint, to b: CGPoint) -> CGFloat {
    let dx = b.x - a.x
    let dy = b.y - a.y
    return sqrt(dx * dx + dy * dy)
}

// Chuyển đổi điểm thành pixel
extension CGPoint {
    func toPixels(scale: CGFloat) -> CGPoint {
        CGPoint(x: x * scale, y: y * scale)
    }
}

Phương thức toPixels trong ví dụ minh họa việc chuyển đổi điểm thành pixel vật lý thông qua UIScreen.main.scale. Trong UIKit, quá trình chuyển đổi này diễn ra tự động trong quá trình kết xuất, nhưng trong Core Graphics và khi làm việc với Metal, nhà phát triển có thể cần chuyển đổi tường minh sang pixel. Tất cả tính toán hoạt ảnh, phát hiện va chạm và bố cục đều được thực hiện theo điểm.

UIFont.pointSize và kiểu chữ

Thuộc tính UIFont.pointSize trả về kích thước phông chữ theo điểm — đây là đơn vị kiểu chữ tiêu chuẩn trong iOS, kế thừa từ ngành in ấn (1 pt = 1/72 inch). Apple đã sử dụng pt cho phông chữ từ những phiên bản đầu tiên của Mac OS. Trong iOS, kích thước phông chữ được chỉ định theo điểm thông qua UIFont.systemFont(ofSize:) hoặc thông qua SwiftUI Font.system(size:).

// Làm việc với UIFont.pointSize trong Swift
import UIKit

// Tạo phông chữ với kích thước bằng pt
let titleFont = UIFont.systemFont(ofSize: 28.0, weight: .bold)
let bodyFont = UIFont.systemFont(ofSize: 17.0)
let captionFont = UIFont.systemFont(ofSize: 12.0)

// Đọc pointSize
print("Kích thước tiêu đề: \(titleFont.pointSize) pt")

// Dynamic Type — điều chỉnh tỷ lệ tự động
let scaledFont = UIFontMetrics.default.scaledFont(for: bodyFont)
print("Đã điều chỉnh tỷ lệ: \(scaledFont.pointSize) pt")

// So sánh kích thước phông chữ
func font(from size: CGFloat, weight: UIFont.Weight) -> UIFont {
    UIFont.systemFont(ofSize: size, weight: weight)
}

UIFontMetrics là cơ chế điều chỉnh tỷ lệ phông chữ động được thêm vào iOS 11. Nó tự động điều chỉnh pointSize dựa trên cài đặt trợ năng của người dùng (Settings > Display & Brightness > Text Size). Nếu không sử dụng UIFontMetrics, phông chữ sẽ không được điều chỉnh tỷ lệ, vi phạm các yêu cầu trợ năng WCAG.

pt so với px: khác biệt

Sự khác biệt giữa pt và px rất quan trọng để hiểu về phát triển iOS. pt là đơn vị logic, px là đơn vị vật lý. Một điểm có thể tương ứng với 1, 2 hoặc 3 pixel tùy thuộc vào hệ số tỷ lệ. Nhà phát triển làm việc với các điểm, hệ thống chuyển đổi chúng thành pixel ở giai đoạn rasterization.

Kết luận chính: kích thước giao diện tính theo điểm giống nhau trên tất cả các thiết bị cùng loại. Màn hình rộng 375 pt — áp dụng cho cả iPhone SE và iPhone 14 (mẫu cơ bản). Sự khác biệt duy nhất là có bao nhiêu pixel vật lý nằm gọn trong 375 pt đó. Điều này đảm bảo giao diện người dùng thống nhất mà không cần điều chỉnh thủ công cho từng thiết bị.

pt trong SwiftUI

Trong SwiftUI, nhà phát triển không làm việc trực tiếp với các điểm — tất cả kích thước được chỉ định thông qua Dp (điểm không phụ thuộc thiết bị, tương đương với pt). SwiftUI tự động áp dụng hệ số tỷ lệ trong quá trình kết xuất nhưng cung cấp quyền truy cập thông qua giá trị môi trường displayScale.

// SwiftUI — làm việc với điểm và hệ số tỷ lệ
import SwiftUI

struct ContentView: View {
    @Environment(\.displayScale) private var displayScale

    var body: some View {
        VStack(spacing: 16) {
            Text("Tiêu đề")
                .font(.system(size: 28, weight: .bold))

            Text("Văn bản nội dung mẫu")
                .font(.body)

            HStack {
                Text("Hệ số tỷ lệ:")
                    .font(.caption)
                Text("\(displayScale, specifier: "%.1f")")
                    .font(.caption.weight(.bold))
            }
        }
        .padding(20)
        .frame(width: 300)
    }
}

SwiftUI trừu tượng hóa pt ở cấp độ framework. .font(.body) tự động sử dụng Dynamic Type — kích thước phông chữ điều chỉnh theo cài đặt của người dùng. SwiftUI không cho phép chỉ định kích thước phông chữ bằng pixel — chỉ thông qua Font và hệ thống kiểu chữ. Điều này đảm bảo khả năng truy cập giao diện mà không cần nỗ lực thêm từ nhà phát triển.