Как связаны поинты и пиксели?

Связь между points и pixels в iOS разработке

В iOS существует фундаментальное различие между точками (points) и пикселями (pixels), которое критически важно для создания адаптивных интерфейсов. Эта система была введена с появлением Retina-дисплеев в 2010 году и решает проблему отображения контента на экранах с разной плотностью пикселей.

Основное отличие

Points (pt) - это абстрактные единицы измерения в системе координат UIKit. Pixels (px) - это физические элементы экрана, которые излучают свет.

Ключевое соотношение определяется масштабным коэффициентом (scale factor):

// Масштабный коэффициент экрана
let scale = UIScreen.main.scale

// Пример: iPhone 8 (scale = 2.0)
// 1 point = 2×2 = 4 physical pixels

// Пример: iPhone 12 Pro (scale = 3.0)
// 1 point = 3×3 = 9 physical pixels

Эволюция и типы дисплеев

1. Non-Retina (до 2010): scale = 1.0, 1 point = 1 pixel
2. Retina (2x): scale = 2.0, 1 point = 4 pixels (2×2)
3. Retina HD (3x): scale = 3.0, 1 point = 9 pixels (3×3)
4. Super Retina XDR: специальные OLED-дисплеи с еще более высокой плотностью

Практическая реализация

При работе с графикой важно предоставлять изображения в разных масштабах:

// Asset Catalog автоматически выбирает правильное изображение
// image.png      - для scale 1x (необязательно)
// image@2x.png   - для scale 2x
// image@3x.png   - для scale 3x

// В коде используем только points
let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 100, height: 100))
// На Retina 2x это займет 200×200 физических пикселей
// На Retina 3x это займет 300×300 физических пикселей

Почему эта система важна?

Для разработчиков:

• Пишем код один раз в points, система автоматически адаптирует под разные экраны
• Не нужно беспокоиться о физической плотности пикселей каждого устройства
• Контент выглядит примерно одинакового размера на всех устройствах

Для дизайнеров:

• Экспортируют ресурсы в разных масштабах (@1x, @2x, @3x)
• Работают в points при создании макетов

Работа с графическим контекстом

При рисовании в Core Graphics нужно учитывать scale factor:

// Правильный способ создания bitmap контекста
func createImage(sizeInPoints: CGSize) -> UIImage? {
    let scale = UIScreen.main.scale
    let sizeInPixels = CGSize(
        width: sizeInPoints.width * scale,
        height: sizeInPoints.height * scale
    )
    
    UIGraphicsBeginImageContextWithOptions(sizeInPoints, false, scale)
    // Рисуем здесь...
    let image = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
    
    return image
}

Особые случаи и рекомендации

1. Текст рендерится по-особому: система автоматически использует субпиксельное сглаживание для лучшей читаемости
2. Тонкие линии (1 point): на Retina 2x будут 2 пикселя толщиной, на 3x - 3 пикселя
3. Auto Layout и Constraints: всегда работают в points
4. Проверка на разных устройствах: всегда тестируйте на физических устройствах, так как симулятор может не точно передавать плотность пикселей

// Проверка характеристик экрана
let screen = UIScreen.main
print("Bounds in points: \(screen.bounds)") // Например: 375×812 для iPhone 12 mini
print("Native bounds in pixels: \(screen.nativeBounds)") // Например: 1080×2340
print("Scale factor: \(screen.scale)") // Например: 3.0

Заключение

Разделение points и pixels - это гениальное упрощение, которое позволяет разработчикам создавать интерфейсы, которые одинаково хорошо выглядят на всех устройствах Apple независимо от их физических характеристик. Система автоматически обеспечивает:

• Четкое отображение на Retina-экранах
• Сохранение физических размеров элементов
• Простоту разработки адаптивных интерфейсов
• Поддержку будущих дисплеев с еще большей плотностью пикселей

Понимание этой связи необходимо каждому iOS-разработчику для создания качественных, визуально согласованных приложений, которые оптимально используют возможности современных дисплеев.