pt — ano ito, Points at pag-scale sa iOS

Ano ang pt sa iOS?

pt (point) — lohikal na yunit ng sukat sa iOS na nagpapahintulot sa developer na ilarawan ang interface sa abstract na mga coordinate, independyente sa pisikal na resolution ng display. Ipinakilala ng Apple ang konsepto ng point sa paglabas ng iPhone 4 at Retina display noong 2010. Bago ang Retina, direktang gumamit ang mga developer ng pixel — isang UI pixel ay katumbas ng isang pisikal na pixel.

Ang coordinate system ng iOS ay binuo sa mga punto: ang punto (0,0) ay nasa kaliwang sulok sa itaas ng screen, ang X axis ay nakaturo sa kanan, ang Y axis — pababa. Ang laki ng screen sa mga punto ay nananatiling pare-pareho para sa bawat klase ng device: iPhone SE — 375×667 pt, iPhone 15 Pro — 393×852 pt, iPad — 768×1024 pt (portrait), 1024×768 pt (landscape). Ang pisikal na resolution ay maaaring 1179×2556 px (iPhone 15 Pro) — ngunit ang developer ay gumagamit ng mga punto.

Ayon sa Apple Human Interface Guidelines, ang mga punto ay pangunahing abstraksyon ng UIKit. Lahat ng framework — UIKit, SwiftUI, Core Graphics, SpriteKit — ay gumagamit ng mga punto. Ang conversion sa pixel ay awtomatikong nangyayari sa yugto ng rendering sa pamamagitan ng UIScreen.nativeScale.

Mga scale factor: @1x, @2x, @3x

Ang scale factor ay tumutukoy kung ilang pisikal na pixel ang katumbas ng isang lohikal na punto. Gumagamit ang Apple ng tatlong antas: @1x — 1 pt = 1 px (iPad mini na walang Retina, lumang modelo), @2x — 1 pt = 2 px (karamihan ng iPhone hanggang 2020, iPad Retina), @3x — 1 pt = 3 px (iPhone X at mas bago, kasama ang iPhone 15 Pro).

Ang halaga ng scale factor ay makukuha sa pamamagitan ng UIScreen.main.scale (para sa UIKit) at @Environment(\.displayScale) (para sa SwiftUI). Ginagamit ito sa pag-load ng mga asset: awtomatikong pinipili ng system ang imahe na may @2x o @3x suffix mula sa Assets.xcassets. Ang developer ay hindi naglo-load ng @1x na imahe sa Retina device — binabawasan nito ang pagganap at kalidad.

CGPoint at mga coordinate sa punto

Ang istruktura CGPoint — pangunahing uri para sa representasyon ng mga coordinate sa iOS at macOS. Naglalaman ng dalawang field: x (CGFloat) at y (CGFloat), ang mga halaga ay ibinibigay sa mga punto. Ginagamit ang CGPoint sa lahat ng framework ng Apple: UIKit (frame.origin), Core Graphics (CGContext), SpriteKit (SKNode.position), Core Animation (CALayer.position).

// CGPoint — paggawa gamit ang mga coordinate sa punto
import UIKit

// Paglikha ng punto
let point = CGPoint(x: 100.0, y: 200.0)
print("Mga coordinate: \(point.x), \(point.y)")

// Mga operasyong matematikal
let offset = CGPoint(x: 16.0, y: 8.0)
let translated = CGPoint(
    x: point.x + offset.x,
    y: point.y + offset.y
)

// Distansya sa pagitan ng mga punto
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)
}

// Conversion ng punto sa pixel
extension CGPoint {
    func toPixels(scale: CGFloat) -> CGPoint {
        CGPoint(x: x * scale, y: y * scale)
    }
}

Ang pamamaraang toPixels sa halimbawa ay nagpapakita ng conversion ng mga punto sa pisikal na pixel sa pamamagitan ng UIScreen.main.scale. Sa UIKit ang conversion na ito ay awtomatikong nangyayari sa rendering, ngunit sa Core Graphics at sa paggamit ng Metal, maaaring kailanganin ng developer ang malinaw na conversion sa pixel. Lahat ng kalkulasyon ng animation, collision detection at layout ay isinasagawa sa mga punto.

UIFont.pointSize at tipograpiya

Ang property na UIFont.pointSize ay nagbabalik ng laki ng font sa mga punto — ito ang karaniwang yunit ng tipograpiya sa iOS, na minana mula sa palimbagan (1 pt = 1/72 pulgada). Ginagamit ng Apple ang pt para sa mga font mula sa unang bersyon ng Mac OS. Sa iOS, ang laki ng font ay itinatakda sa mga punto sa pamamagitan ng UIFont.systemFont(ofSize:) o sa pamamagitan ng SwiftUI Font.system(size:).

// Paggawa gamit ang UIFont.pointSize sa Swift
import UIKit

// Paglikha ng font na may laki sa pt
let titleFont = UIFont.systemFont(ofSize: 28.0, weight: .bold)
let bodyFont = UIFont.systemFont(ofSize: 17.0)
let captionFont = UIFont.systemFont(ofSize: 12.0)

// Pagbasa ng pointSize
print("Laki ng heading: \(titleFont.pointSize) pt")

// Dynamic na tipo — awtomatikong pag-scale
let scaledFont = UIFontMetrics.default.scaledFont(for: bodyFont)
print("Na-scale: \(scaledFont.pointSize) pt")

// Paghahambing ng laki ng font
func font(from size: CGFloat, weight: UIFont.Weight) -> UIFont {
    UIFont.systemFont(ofSize: size, weight: weight)
}

UIFontMetrics — mekanismo ng dynamic na pag-scale ng font, idinagdag sa iOS 11. Awtomatikong inaayos ang pointSize batay sa mga setting ng accessibility ng user (Settings > Display & Brightness > Text Size). Kung walang UIFontMetrics, ang mga font ay hindi na-scale, na lumalabag sa mga kinakailangan ng WCAG para sa accessibility.

pt vs px: mga pagkakaiba

Ang pagkakaiba sa pagitan ng pt at px ay kritikal para sa pag-unawa sa iOS development. pt — lohikal na yunit, px — pisikal na yunit. Ang isang punto ay maaaring katumbas ng 1, 2, o 3 pixel depende sa scale factor. Ang developer ay gumagamit ng mga punto, ang sistema ay nagko-convert sa mga ito sa pixel sa yugto ng rasterization.

Ang pangunahing resulta: ang laki ng interface sa mga punto ay pareho sa lahat ng device ng parehong klase. Ang screen na 375 pt ang lapad — ito ay parehong iPhone SE at iPhone 14 (base model). Ang pagkakaiba ay nasa kung ilang pisikal na pixel ang kasya sa 375 pt na ito. Tinitiyak nito ang pare-parehong UI nang walang manu-manong adaptasyon para sa bawat device.

pt sa SwiftUI

Sa SwiftUI ang developer ay hindi tahasang gumagamit ng mga punto — lahat ng sukat ay ibinibigay sa pamamagitan ng Dp (device-independent points, katumbas ng pt). Awtomatikong inilalapat ng SwiftUI ang scale factor sa rendering, ngunit nagbibigay ng access dito sa pamamagitan ng environment value displayScale.

// SwiftUI — paggawa gamit ang mga punto at scale factor
import SwiftUI

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

    var body: some View {
        VStack(spacing: 16) {
            Text("Heading")
                .font(.system(size: 28, weight: .bold))

            Text("Pangunahing teksto ng halimbawa")
                .font(.body)

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

Awtomatikong ginagamit ng SwiftUI ang Dynamic Type — ang laki ng font ay umaayon sa mga setting ng user. Hindi pinapayagan ng SwiftUI na itakda ang laki ng font sa pixel — sa pamamagitan lamang ng Font at sistema ng tipograpiya. Ginagarantiyahan nito ang accessibility ng interface nang walang karagdagang pagsisikap mula sa developer.