Люди, как правило, хотят иметь возможность использовать свои любимые приложения на всех своих устройствах и в любом контексте. Чтобы соответствовать этим ожиданиям, разработайте адаптивный интерфейс, настроив элементы интерфейса и макеты для автоматического изменения формы и размера на разных устройствах, во время многозадачности на iPad, в режиме разделенного вида, при вращении экрана и многое другое.

Размеры и ориентация экрана устройства

Устройства iOS имеют разные размеры экрана, и люди могут использовать их как в портретной, так и в альбомной ориентации. В устройствах типа iPhone X и iPad Pro, дисплей имеет закругленные углы, которые точно соответствуют габаритным размерам устройства. Другие устройства, такие как iPhone SE и iPad Air, имеют прямоугольный дисплей.

Если ваше приложение работает на определенном типе устройства, убедитесь, что оно работает на всех экранах этого устройства. Другими словами, приложение только для iPhone должно работать на каждом iPhone, а приложение только для iPad должно работать на каждом iPad.

Untitled

Устройство Размеры (портретная ориентация)
12,9" iPad Pro 1024x1366 pt (2048x2732 пикселей @2x)
11" iPad Pro 834x1194 pt (1668x2388 пикселей @2x)
10,5" iPad Pro 834x1194 pt (1668x2388 пикселей @2x)
9,7" iPad Pro 768x1024 pt (1536x2048 пикселей @2x)
7,9" iPad mini 768x1024 pt (1536x2048 пикселей @2x)
10,5" iPad Air 834x1112 pt (1668x2224 пикселей @2x)
9,7" iPad Air 768x1024 pt (1536x2048 пикселей @2x)
10,2" iPad 810x1080 pt (1620x2160 пикселей @2x)
9,7" iPad 768x1024 pt (1536x2048 пикселей @2x)
iPhone 13 Pro Max 428x926 pt (1284x2778 пикселей @3x)
iPhone 13 Pro 390x844 pt (1170x2532 пикселей @3x)
iPhone 13 390x844 pt (1170x2532 пикселей @3x)
iPhone 13 mini 375x812 pt (1125x2436 px @3x)
iPhone 12 Pro Max 428x926 pt (1284x2778 пикселей @3x)
iPhone 12 Pro 390x844 pt (1170x2532 пикселей @3x)
iPhone 12 390x844 pt (1170x2532 пикселей @3x)
iPhone 12 mini 375x812 pt (1125x2436 пикселей @3x)
iPhone 11 Pro Max 414x896 pt (1242x2688 пикселей @3x)
iPhone 11 Pro 375x812 pt (1125x2436 пикселей @3x)
iPhone 11 414x896 pt (828x1792 пикселей @2x)
iPhone XS Max 414x896 pt (1242x2688 пикселей @3x)
iPhone XS 375x812 pt (1125x2436 пикселей @3x)
iPhone XR 414x896 pt (828x1792 пикселей @2x)
iPhone X 375x812 pt (1125x2436 пикселей @3x)
iPhone 8 Plus 414x736 pt (1080x1920 пикселей @3x)
iPhone 8 375x667 pt (750x1334 пикселей @2x)
iPhone 7 Plus 414x736 pt (1080x1920 пикселей @3x)
iPhone 7 375x667 pt (750x1334 пикселей @2x)
iPhone 6s Plus 414x736 pt (1080x1920 пикселей @3x)
iPhone 6s 375x667 pt (750x1334 пикселей @2x)
iPhone 6 Plus 414x736 pt (1080x1920 пикселей @3x)
iPhone 6 375x667 pt (750x1334 пикселей @2x)
4,7" iPhone SE 375x667 pt (750x1334 пикселей @2x)
4" iPhone SE 320x568 pt (640x1136 пикселей @2x)
iPod touch 5-го поколения и более поздних версий 320x568 pt (640x1136 пикселей @2x)

Auto layout (Автолейаут)

Автолейаут - это инструмент разработки для создания адаптивных интерфейсов. Используя его, вы можете задать правила (известные как ограничения - constraints), которые управляют контентом в вашем приложении. Например, вы можете задать ограничение кнопке таким образом, чтобы она всегда располагалась по центру относительно горизонтали, а также располагалась на 8 точек ниже картинки, независимо от доступного пространства на экране.

Untitled

Автолейаут автоматически корректирует макеты в соответствии с ограничениями, указанными вами для конкретных изменений окружающей среды, известных как признаки или особенности (traints). Вы можете настроить свое приложение, чтобы оно динамически адаптировалось к широкому спектру атрибутов, включая:

Руководства макетов и безопасных зон

Руководство по макету задается как прямоугольная область, которая помогает размещать и выравнивать контент на экране. Система iOS включает в себя предустановленные правила по макетам, которые позволяют легко использовать стандартные поля (margins) вокруг контента и ограничивать ширину текста для оптимальной читаемости. Вы также можете задать кастомные правила для макетов.

Безопасная область - область в вьюшке, которая не перекрыта/не закрыта панелью навигации, панелью вкладок, панелью инструментов или другими вьюшками, которые могут быть вами использованы для создания интерфейсов.