pt — คืออะไร, Points และการปรับขนาดใน iOS

pt ใน iOS คืออะไร?

pt (point) — หน่วยวัดเชิงตรรกะใน iOS ที่ช่วยให้นักพัฒนาสามารถอธิบายอินเทอร์เฟซในพิกัดนามธรรม ซึ่งไม่ขึ้นกับความละเอียดจริงของหน้าจอ Apple นำเสนอแนวคิดของ points พร้อมกับการเปิดตัว iPhone 4 และจอ Retina ในปี 2010 ก่อน Retina นักพัฒนาใช้พิกเซลโดยตรง — หนึ่งพิกเซล UI เท่ากับหนึ่งพิกเซลจริง

ระบบพิกัดของ iOS สร้างขึ้นบนจุด: จุด (0,0) อยู่ที่มุมซ้ายบนของหน้าจอ, แกน X ไปทางขวา, แกน Y ลงล่าง ขนาดหน้าจอเป็นจุดคงที่สำหรับอุปกรณ์แต่ละคลาส: iPhone SE — 375×667 pt, iPhone 15 Pro — 393×852 pt, iPad — 768×1024 pt (แนวตั้ง), 1024×768 pt (แนวนอน) ความละเอียดจริง อาจเป็น 1179×2556 px (iPhone 15 Pro) — แต่นักพัฒนาทำงานกับจุด

ตาม Apple Human Interface Guidelines, จุดเป็นการทำให้เป็นนามธรรมพื้นฐานของ UIKit เฟรมเวิร์กทั้งหมด — UIKit, SwiftUI, Core Graphics, SpriteKit — ทำงานเป็นจุด การแปลงเป็นพิกเซลเกิดขึ้นโดยอัตโนมัติในขั้นตอนการเรนเดอร์ผ่าน UIScreen.nativeScale

ตัวคูณขนาด: @1x, @2x, @3x

ตัวคูณขนาด (scale factor) กำหนดว่ามีกี่พิกเซลจริงที่สอดคล้องกับหนึ่งจุดเชิงตรรกะ Apple ใช้สามระดับ: @1x — 1 pt = 1 px (iPad mini ไม่มี Retina, รุ่นเก่า), @2x — 1 pt = 2 px (iPhone ส่วนใหญ่ก่อนปี 2020, iPad Retina), @3x — 1 pt = 3 px (iPhone X และใหม่กว่า รวมถึง iPhone 15 Pro)

ค่า scale factor สามารถเข้าถึงได้ผ่าน UIScreen.main.scale (สำหรับ UIKit) และ @Environment(\.displayScale) (สำหรับ SwiftUI) ใช้เมื่อโหลดแอสเซท: ระบบจะเลือกรูปภาพที่มีคำต่อท้าย @2x หรือ @3x จาก Assets.xcassets โดยอัตโนมัติ นักพัฒนาไม่ควรโหลดรูปภาพ @1x บนอุปกรณ์ Retina — ซึ่งจะลดประสิทธิภาพและคุณภาพ

CGPoint และพิกัดเป็นจุด

โครงสร้าง CGPoint เป็นประเภทพื้นฐานสำหรับแสดงพิกัดใน iOS และ macOS ประกอบด้วยสองฟิลด์: x (CGFloat) และ y (CGFloat) ค่าจะถูกระบุเป็นจุด CGPoint ใช้ในเฟรมเวิร์กของ Apple ทั้งหมด: UIKit (frame.origin), Core Graphics (CGContext), SpriteKit (SKNode.position), Core Animation (CALayer.position)

// CGPoint — การทำงานกับพิกัดเป็นจุด
import UIKit

// การสร้างจุด
let point = CGPoint(x: 100.0, y: 200.0)
print("พิกัด: \(point.x), \(point.y)")

// การดำเนินการทางคณิตศาสตร์
let offset = CGPoint(x: 16.0, y: 8.0)
let translated = CGPoint(
    x: point.x + offset.x,
    y: point.y + offset.y
)

// ระยะห่างระหว่างจุด
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)
}

// การแปลงจุดเป็นพิกเซล
extension CGPoint {
    func toPixels(scale: CGFloat) -> CGPoint {
        CGPoint(x: x * scale, y: y * scale)
    }
}

เมธอด toPixels ในตัวอย่างสาธิตการแปลงจุดเป็นพิกเซลจริงผ่าน UIScreen.main.scale ใน UIKit การแปลงนี้เกิดขึ้นโดยอัตโนมัติระหว่างการเรนเดอร์ แต่ใน Core Graphics และเมื่อทำงานกับ Metal นักพัฒนาอาจต้องการการแปลงเป็นพิกเซลอย่างชัดเจน การคำนวณแอนิเมชันทั้งหมด, การตรวจจับการชน และเค้าโครงจะดำเนินการเป็นจุด

UIFont.pointSize และการพิมพ์

คุณสมบัติ UIFont.pointSize ส่งคืนขนาดฟอนต์เป็นจุด — นี่คือหน่วยการพิมพ์มาตรฐานใน iOS ซึ่งสืบทอดมาจากการพิมพ์ (1 pt = 1/72 นิ้ว) Apple ใช้ pt สำหรับฟอนต์ตั้งแต่เวอร์ชันแรกๆ ของ Mac OS ใน iOS ขนาดฟอนต์ถูกระบุเป็นจุดผ่าน UIFont.systemFont(ofSize:) หรือผ่าน SwiftUI Font.system(size:)

// การทำงานกับ UIFont.pointSize ใน Swift
import UIKit

// การสร้างฟอนต์ด้วยขนาดเป็น pt
let titleFont = UIFont.systemFont(ofSize: 28.0, weight: .bold)
let bodyFont = UIFont.systemFont(ofSize: 17.0)
let captionFont = UIFont.systemFont(ofSize: 12.0)

// การอ่าน pointSize
print("ขนาดหัวเรื่อง: \(titleFont.pointSize) pt")

// Dynamic Type — การปรับขนาดอัตโนมัติ
let scaledFont = UIFontMetrics.default.scaledFont(for: bodyFont)
print("ปรับขนาดแล้ว: \(scaledFont.pointSize) pt")

// การเปรียบเทียบขนาดฟอนต์
func font(from size: CGFloat, weight: UIFont.Weight) -> UIFont {
    UIFont.systemFont(ofSize: size, weight: weight)
}

UIFontMetrics เป็นกลไกการปรับขนาดฟอนต์แบบไดนามิกที่เพิ่มใน iOS 11 โดยจะปรับ pointSize โดยอัตโนมัติตามการตั้งค่าการช่วยเหลือผู้ใช้ (Settings > Display & Brightness > Text Size) หากไม่ใช้ UIFontMetrics ฟอนต์จะไม่ถูกปรับขนาด ซึ่งละเมิดข้อกำหนดการช่วยเหลือ WCAG

pt vs px: ความแตกต่าง

ความแตกต่างระหว่าง pt และ px มีความสำคัญต่อการเข้าใจการพัฒนา iOS pt เป็นหน่วยเชิงตรรกะ, px เป็นหน่วยจริง หนึ่งจุดสามารถเทียบเท่ากับ 1, 2 หรือ 3 พิกเซลขึ้นอยู่กับ scale factor นักพัฒนาทำงานกับจุด, ระบบแปลงเป็นพิกเซลในขั้นตอน rasterization

ข้อสรุปสำคัญ: ขนาดอินเทอร์เฟซเป็นจุดเหมือนกันบนอุปกรณ์ทุกรุ่นในคลาสเดียวกัน หน้าจอกว้าง 375 pt — ใช้ได้กับทั้ง iPhone SE และ iPhone 14 (รุ่นพื้นฐาน) ความแตกต่างเพียงอย่างเดียวคือมีพิกเซลจริงกี่พิกเซลที่บรรจุใน 375 pt นั้น ซึ่งรับประกัน UI ที่เป็นหนึ่งเดียวโดยไม่ต้องปรับแต่งด้วยตนเองสำหรับแต่ละอุปกรณ์

pt ใน SwiftUI

ใน SwiftUI นักพัฒนาไม่ได้ทำงานกับจุดอย่างชัดเจน — ขนาดทั้งหมดถูกระบุผ่าน Dp (จุดที่ไม่ขึ้นกับอุปกรณ์, เทียบเท่า pt) SwiftUI ใช้ scale factor โดยอัตโนมัติระหว่างการเรนเดอร์ แต่ให้การเข้าถึงผ่านค่า environment displayScale

// SwiftUI — การทำงานกับจุดและ scale factor
import SwiftUI

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

    var body: some View {
        VStack(spacing: 16) {
            Text("หัวเรื่อง")
                .font(.system(size: 28, weight: .bold))

            Text("ข้อความเนื้อหาตัวอย่าง")
                .font(.body)

            HStack {
                Text("Scale factor:")
                    .font(.caption)
                Text("\(displayScale, specifier: "%.1f")")
                    .font(.caption.weight(.bold))
            }
        }
        .padding(20)
        .frame(width: 300)
    }
}

SwiftUI ทำให้ pt เป็นนามธรรมในระดับเฟรมเวิร์ก .font(.body) ใช้ Dynamic Type โดยอัตโนมัติ — ขนาดฟอนต์ปรับตามการตั้งค่าผู้ใช้ SwiftUI ไม่อนุญาตให้ระบุขนาดฟอนต์เป็นพิกเซล — ผ่าน Font และระบบการพิมพ์เท่านั้น ซึ่งรับประกันการช่วยเหลือของอินเทอร์เฟซโดยไม่ต้องใช้ความพยายามเพิ่มเติมจากนักพัฒนา