Как динамически адаптировать константы и представления
Эта статья основана на моей предыдущей, поэтому, прежде чем двигаться дальше, я рекомендую вам сначала прочитать ее:
Примечание
Я буду использовать SnapKit в своем коде, но этот подход можно применить к другим библиотекам макетов, а также к NSLayoutConstraint и SwiftUI от Apple.
Как адаптировать константы
Чтобы решить эту проблему, мы будем использовать адаптированную функцию (реализация описана в статье выше) и расширение Int.
Вкратце, функция адаптированная позволяет нам динамически адаптировать константу в зависимости от размеров экрана устройства.
Это расширение Int содержит 2 вычисляемых свойства:
- VAdapted (с вертикальной адаптацией) - это вычисляемое свойство адаптируется к постоянной относительно вертикальной плоскости.
- HAdapted (Horizontally Adapted) - это вычисляемое свойство адаптирует константу относительно горизонтальной плоскости.
Вот пример использования:
В приведенном выше фрагменте кода мы ограничиваем представление сверху и слева. А поскольку мы предоставили адаптированные константы с использованием вычисленных свойств VAdapted и HAdapted, константы будут различаться на разных экранах. размеры.
Хочу подчеркнуть, что константы будут адаптированы на основе изначально предоставленных относительно базового размера экрана.
Это означает, что если вы выберете iPhone 8 в качестве базового устройства и вызовете 100.VAdapted, будут предприняты следующие шаги:
- Соотношение будет вычислено:
100/667 ≈ 0,15, где
100 - константа
667 - базовая высота экрана. - Это соотношение будет использоваться для изменения константы для других размеров экрана. Например, представим, что мы открыли приложение на iPhone 12 Pro Max. Произойдет следующий расчет:
926 × 0,15 ≈ 140, где
926 - высота экрана целевого устройства
0,15 - соотношение полученный на первом этапе - Результат будет возвращен
Вышеупомянутые шаги показывают нам, что начальное соотношение рассчитывается на основе базового устройства и будет сохраняться независимо от размера других устройств.
Как изменить размер окна пропорционально
Чтобы изменить размер представления пропорционально, мы будем использовать функцию resized (вы можете найти реализацию в моей статье выше) и расширение Array.
Короче говоря, функция resized позволяет нам пропорционально изменять размер представления, сохраняя исходное соотношение сторон.
Чтобы максимально упростить использование, я решил создать расширение Array и ограничить доступ к дополнительным функциям только для массивов типа Int.
Расширение содержит 2 вычисляемых свойства:
- VResized (вертикальное изменение размера) - это вычисляемое свойство изменяет размеры констант относительно вертикальной плоскости.
- HResized (Horizontally Resized) - это вычисляемое свойство изменяет размеры констант относительно горизонтальной плоскости.
Эти свойства изменяют размеры констант на основе массива Int, где первое значение представляет ширину, а второе значение представляет высоту.
Чтобы предотвратить неправильное использование свойств, существует оператор защиты, который выдает fatalError, если в массиве больше или меньше 2 элементов.
Использование очень просто:
Под капотом будут предприняты следующие шаги:
- Соотношение сторон будет вычислено:
60/250 = 0,24, где
60 - высота обзора для базового устройства
250 - ширина обзора для базового устройства. - Новая ширина будет рассчитана первой, так как было выбрано свойство HResized:
428 × (250/375) ≈ 285, где
428 - ширина экрана целевого устройства
250 - ширина просмотра
375 - ширина основного экрана - Новая высота будет рассчитана на основе новой ширины и соотношения сторон, полученных на первом этапе:
285 × 0,24 ≈ 68, где
285 - новая ширина просмотра
0,24 - соотношение сторон - Будет возвращен результат:
CGSize (ширина: 285, высота: 68)
Хочу отметить, что существует правило, согласно которому вы должны выбрать либо VResized, либо HResized:
Если ширина больше, чем высота, следует выбрать Размер HR, соответственно, если высота больше ширины, следует выбрать Размер VR. Если ширина и высота равны, вы должны выбрать HResized.
Результат
Здесь вы можете увидеть образец макета, который был создан с использованием подхода, описанного в статье:
Вывод
Преимущество этого подхода заключается в том, что он позволяет нам размещать наши экраны, используя размеры, указанные в дизайне, и быть уверенным, что они будут автоматически адаптированы для всех размеров экрана.
Исходный код
Исходный код и реальный пример использования можно найти в моем репозитории GitHub:
