ОСОБЕННОСТИ РАЗМЕТКИ ПОЗИЦИИ ЭЛЕМЕНТОВ ИНТЕРФЕЙСА НА ПЛАТФОРМЕ iOS И macOS

АННОТАЦИЯ

В статье анализируются механизмы разметки элементов интерфейса под платформы iOS и macOS. Рассматриваются детали реализации ручного и автоматического методов расчета, их преимущества и недостатки.

ABSTRACT

In this article: analyzing the mechanisms of layout user interface elements for the iOS and macOS platforms. The details of the implementation of manual and automatic layout methods, their advantages and disadvantages are considered.

Ключевые слова: Swift, iOS, macOS, пользовательский интерфейс, разметка.

Keywords: Swift, iOS, macOS, user interface, layout.

В этой статье будут рассмотрены способы и особенности разметки элементов интерфейса, существующие под платформу iOS и macOS. Начнем мы с общего представления разметки (по-английски – layout). Далее перейдем к способам, которые существуют на данный момент в экосистеме – ручной расчет положения элементов (по-английски – manual layout) и автоматический (по-английски – auto layout) и какие проблемы существуют у каждого способа, и как их можно решить.

Разметка

Под этим понятием подразумевается расчет необходимых координат и размеров элементов интерфейса, которые представлены или будут представлены. Для того чтобы разместить элемент на экране нам необходимо знать его координату x, y, горизонтальную и вертикальную соответственно, а также размеры – ширину и высоту. Затем необходимо применить рассчитанные параметры, для этого у каждого элемента существуют свойства frame и bounds. Они отличаются от друг друга тем, что frame использует систему координат, привязанную к родительскому элементу, а bounds наоборот, используют систему координат выбранного элемента (см. Рис. 1).

Рисунок 1. Отличие frame от bounds

Однако, есть разница в представлении систем координат для платформ macOS и iOS. Для элементов интерфейса под платформу iOS координаты x и y представляют верхний левый угол элемента. Для платформы macOS координаты x и y, представляют координаты нижнего левого угла элемента (см. Рис. 2). Таким образом одни и те же координаты по-разному разместят элемент на экране устройства под разными платформами.

Рисунок  2. Система координат элементов на платформах iOS и macOS

Ручной расчет положения элементов

Теперь, когда мы определились с тем, что такое layout, давайте посмотрим каким образом происходит расчет координат и размеров в ручном режиме.

Как было сказано ранее, чтобы правильно задать расположение элемента на экране необходимо задать свойство frame. Это можно делать в любой момент выполнения программы, но с одним ограничением, это должно происходить в главном потоке выполнения программы (по-английски – main thread), в противоположном случае расположение элемента неопределенно. Как правило, все расчеты происходят в одном методе - func layoutSubviews(). Он вызывается в момент, когда элементу необходимо посчитать свой размер и размер всех вложенных элементов и за это отвечает система, но можно сказать элементу что нужно пересчитать координаты, когда это необходимо нам. Расчёт выполняется сверху вниз, то есть сначала вызывается метод у родителя, затем у каждого дочернего элемента, и таким образом к концу выполнения метода родителя, все дочерние элементы будут корректно расположены.

Рассмотрим пример расчета координат:

    override func layoutSubviews() {

        super.layoutSubviews()

        redView.frame = CGRect(x: 20, y: 20, width: 50, height: 50)

        let blueViewSize = blueView.sizeThatFits(CGSize(width: 40, height: CGFloat.infinity))

        blueView.frame = CGRect(origin: .init(x: 80, y: 80), size: blueViewSize)

    }

1. Сначала мы вызываем метод суперкласса, это необходимо для того, чтобы выполнились дополнительные действия, которые заложены в расчет системой.
2. Затем мы задаем расположение redView, путем установки начальных координат и размера, через структуру CGRect, в которой содержатся координаты x, y и ширина с высотой.
3. Для некоторых элементов, которые зависят от того, что в них располагается, сначала необходимо посчитать будущий размер, для этого необходимо вызвать метод sizeThatFits, и передать в него максимальный размер, который может занять этот элемент. Этот метод возвращает ширину и высоту, которая необходима этому элементу для корректного отображения.
4. Далее, так же, как и в шаге 2, мы задаем координаты и размеры нашего элемента, передав координаты левого верхнего угла, и размер, который был рассчитан в предыдущем шаге.

Как видно из примера, ничего сложного в этом нет. Посчитали координаты, размеры установили их правильным элементам и готово, но не все так просто.

Проблемы ручного расчета положения элементов

Так как у нас существует множество различных размеров экранов устройств, возникла необходимость располагать элементы в разных местах экрана и с размерами, которые зависят от ширины или высоты экрана. Для того чтобы это сделать, необходимо рассчитывать координаты и размеры в процентном соотношение, в зависимости от размеров экрана. Если для представлений с несколькими элементами это не так сложно, то представим что у нас есть 10 или 20 элементов и позиции некоторых из них зависят друг от друга. Такой способ становиться очень неудобным и трудоемким.

Автоматический расчет положения элементов

Существует альтернативный способ расчета необходимых координат и размеров. Он представляет собой описание правил (по-английски – constraints), где должны располагаться элементы.

Эти правила представляют собой обычное линейное уравнение вида y = a × x + b, где y – необходимая координата или размер; a – произвольный множитель; x – параметр, от которого зависит итоговый результат; b – константа. Для того чтобы мы смогли корректно посчитать координаты и размер элемента, нам необходимо минимум 3 правила, которые сложатся в систему равнений, результатом решения которой будут координаты и размер элемента.

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

Рисунок 3. Пример расстановки правил

Как видно, на примере мы задаем 4 правила, которые сложатся в систему из 4 уравнений:

1. Отступ сверху: y = x + 20, где x – координата верхнего края родительского элемента; y – координата Y нашего элемента.
2. Отступ от левого края: y = x + 20, где x – координата левого края родительского элемента; y – координата X нашего элемента.
3. Отступ от правого края: y = x - 20, где x – координата правого края родительского элемента; y – ширина нашего элемента.
4. Высота: y = 70; y – высота нашего элемента.

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

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

        NSLayoutConstraint.activate([

            grayView.topAnchor.constraint(equalTo: topAnchor, constant: 20),

            grayView.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 20),

            grayView.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -20),

            grayView.heightAnchor.constraint(equalToConstant: 70)

        ])

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

Размер содержимого

Для некоторых элементов, размер которых может изменятся динамически в зависимости от размера, существует свойство, которое описывает размер содержимого (по-английски – intrinsic content size).

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

Приоритеты

Иногда, правила могут противоречить друг другу, и в таком случае если они будут с одинаковым приоритетом, то решатель системы линейных уравнений может отменить какое-то из двух правил, что приведет к нежелательному результату. Для того чтобы этого не происходило, есть приоритеты. Это число в диапазоне от 0 до 1000, значением по умолчанию является 750.

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

Проблемы при автоматическом расчете разметки

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

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

Заключение

В статье мы разобрались что такое разметка и как она устроена. Так же мы познакомились в двумя методами расчета необходимых параметров для корректного отображения интерфейса. Рассмотрели, как они устроены изнутри и как ими пользоваться в реальных проектах. Определились с проблемами, которые вызывает тот или иной метод, а также в каких случаях следует их использовать.

Список литературы:

1. Auto Layout Guide. 2018 / [Электронный ресурс] Режим доступа: URL: https://developer.apple.com/library/archive/documentation/UserExperience/Conceptual/AutolayoutPG/ (дата обращения: 09.02.2022)
2. Greg J. Badros, Alan Borning, Peter J. Stuckey. The Cassowary Linear Arithmetic Constraint Solving Algorithm. 2002 / [Электронный ресурс] Режим доступа: URL: https://constraints.cs.washington.edu/solvers/cassowary-tochi.pdf (дата обращения: 10.02.2022)
3. Vadim Bulavin. UIView Auto Layout life cycle. 27.03.2018 / [Электронный ресурс]. Режим доступа: URL: https://www.vadimbulavin.com/view-auto-layout-life-cycle/ (дата обращения: 09.02.2022)
4. Axel Kee. Making Sense of Auto Layout. / [Электронный ресурс] – Режим доступа: URL: https://autolayout.fluffy.es (дата обращения: 09.02.2022)