Лучшая практика для программной разработки пользовательского интерфейса для iPhone и iPad

Question

В поисках чистого решения для программной раскладки пользовательского интерфейса, чтобы он выглядел правильно на любом устройстве. Я попытался расширить CGFloat для масштабирования чисел в зависимости от устройства

extension CGFloat {
    func scale() {
        // Modifies self by multiplies by the ratio between the initial screen size and the desired screen size
    }
}

// usage
view.widthAnchor.constraint(equalToConstant: 20.scale())

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

Как я могу расположить свой пользовательский интерфейс так, чтобы он работал на всех устройствах без хакерских обходных путей. Существуют ли определенные типы ограничений, которых мне следует избегать? (например, вместо установки констант ширины / высоты задайте для них кратность ширины / высоты экрана (или другого вида)?)

РЕДАКТИРОВАТЬ: я не хочу переоценивать свои собственные ситуация, поэтому позвольте мне повторно задать вопрос. Каковы некоторые рекомендации по установке ограничений в приложении, предназначенном как для iPhone, так и для iPad. Является ли плохой практикой просто проверять, является ли устройство iPad, и, если это так, иметь ограничения только для iPad, а если нет, иметь ограничения только для iPhone.

Answer 1

На ваш вопрос, как есть, невозможно ответить ...

Что делает ваше приложение? Если это слайд-шоу с фотографиями, ограничьте imageView до полного вида и установите его режим содержимого в соответствии с масштабированием. Вуаля! Он «хорошо выглядит» на всех устройствах!

Если ваше приложение более сложное, вам, вероятно, потребуется использовать all типы ограничений: элементы относительно друг друга; равны друг другу; относительный / равный с постоянными корректировками; относительный / равный с настройками множителя; и др c. И вам могут потребоваться разные макеты (а не просто разные размеры) в зависимости от устройства + ориентации, и в этом случае вы также захотите воспользоваться вариациями размера класса.

Кроме того, вы можете получить приложение для «взгляд на каждое устройство» включает в себя много, много , НАМНОГО больше, чем применение ограничений.

• Должно ли приложение использовать панель вкладок?
• Панель навигации?
• Их комбинация?
• Нет?
• Следует ли использовать текстовые кнопки или кнопки изображений?
• Должен ли он настраиваться на доступность и динамичность c шрифтов?
• Может ли он иметь другую функциональность при работе на маленьком экране по сравнению с большим экраном?

В целом, вашим первым шагом должно быть рисование от руки каждого экрана и элемента пользовательского интерфейса, который вы ожидаете, включая «поток» действия, с изменениями размеров и ориентаций, поэтому вы разрабатываете лучший пользовательский интерфейс с самого начала. В этот момент вы начинаете фактическое построение пользовательского интерфейса.

Имейте в виду, что есть люди, которые не могут создать приложение "Hellow World", но делают очень хорошо жить как "Дизайнеры приложений".

Сказав все это, хотя ... один подход, который вам почти конечно не следует принимать, это:

view.widthAnchor.constraint(equalToConstant: 20.scale())

---

РЕДАКТИРОВАТЬ

Вот краткий пример - на основе этой статьи: https://www.raywenderlich.com/1343912-adaptive-layout-tutorial-in-ios-12-getting-started

Простое приложение погоды - ограничения устанавливаются так, чтобы он выглядел аналогично для всех моделей iPhone и iPad:

Но что происходит когда вы поворачиваете телефон?

Маленькое крошечное облако выглядит не очень хорошо. Добавьте trait-Вариации / size-классы, и мы можем получить:

---

И, чтобы попытаться ответить на ваш отредактированный вопрос: «Неправильно ли проверять, является ли устройство iPad ...» ?

Да. Рекомендуется проектировать для trait-Вариации / Размеры-Классы, чтобы ваше приложение выглядело так, как вы хотите во всех конфигурациях (надеюсь, что оно пригодится и для следующего устройства, которое выйдет).

Answer 2

Это плохая практика - просто проверять, является ли устройство iPad, и, если это так, иметь ограничения только для iPad, и, если нет, иметь ограничения только для iPhone.

Если вы планируете поддержку Split-View, это определенно не- go. Код для достижения и обработки этого всегда будет немного многословным. Здесь нет однострочников для достижения того, что вы хотите.

В вашем методе -[UIViewController viewDidLoad] вы бы хотели настроить свои представления с помощью коллекции базовых признаков, доступной для представления контроллера. Это ваша отправная точка.

Как и когда ОС изменяет размер windows вашего приложения (представьте, что полноэкранное приложение в горизонтальном режиме переходит в разделенное приложение, занимающее одну треть экрана): метод -[UIViewController traitCollectionDidChange:] вызывается на вашем View Controller. Здесь вы обновляете ограничения макета.

Вы можете и должны инкапсулировать свою логику макета c в один метод и вызывать ее как из -[UIViewController viewDidLoad], так и из -[UIViewController traitCollectionDidChange:].

При таком способе я не рекомендую проверять, является ли хост-устройство iPad. Вы специально хотите посмотреть на свойства horizontalSizeClass & verticalSizeClass активной коллекции признаков, чтобы определить значения для ограничений макета.

Для получения дополнительной информации я предлагаю вам go в следующей документации:
1. https://developer.apple.com/documentation/uikit/uitraitcollection?language=objc
2. https://developer.apple.com/documentation/uikit/uitraitenvironment/1623516-traitcollectiondidchange?language=objc

2-я ссылка содержит простой пример того, как проверить, нужно ли вам обновить ограничения.

Answer 3

Я обычно сначала получаю размер экрана, а затем использую проценты ширины / высоты для кадров

height = view.bounds.height
width = view.bounds.width
mybutton.frame = CGRect(x: width * 0.05, y: height * 0.02, width: width * 0.3, height: height * 0.1)