4 способа создать одинаковый интерфейс в SwiftUI

Макетные решения в SwiftUI

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

Но есть компромисс с меньшей сложностью, то есть меньшей гибкостью. Чем больше предполагает компилятор, тем меньше у кодера возможностей сделать интерфейс уникальным.

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

Бриф

Итак, мой бриф прост. У меня есть два прямоугольника, представляющих мой интерфейс — интерфейс, который должен работать в портретном и ландшафтном режимах. Присоединяйтесь ко мне, чтобы изучить четыре решения для создания еще более сложной версии одного и того же кода — еще более гибкой, которую вы можете настроить под себя. Интерфейс должен выглядеть так: синий квадрат и желтый, независимо от ориентации устройства.

Использование готового SwiftUI

Итак, если вы воспользуетесь самым простым решением для этого, вы потерпите неудачу. Ошибка, потому что по умолчанию код SwiftUI сделает это.

Код, который выглядит так.

struct Basic1: View {
  var body: some View {
  // Default is a VStack
    Rectangle()
      .fill(Color.yellow).opacity(0.5)
    Rectangle()
      .fill(Color.blue).opacity(0.5)
  }
}

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

Блок if/else в SwiftUI

Бон. Конечно, самое простое решение, если у вас есть два способа сделать это, — это блок if/else. Полностью поддерживаемая структура в SwiftUI, единственная сложность здесь заключается в проверке переменных среды для коллекций признаков.

Ça Marche, как говорится, работает очень хорошо, выкладывая вещи именно так, как мы хотели, но, как я сказал в начале, может быть, мне нужно больше — больше контроля над тем, как это происходит.

Использование основных направляющих для выравнивания в SwiftUI

Если вы хотите больше контроля в SwiftUI, вам нужен третий контейнер макета; вам нужен ZStack. Хотя если использовать его из коробки, то опять не получится, так как он по умолчанию просто ставит все в центр. Вам также нужно дать ему несколько руководств по макету. Вам нужен такой код.

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

Использование расширенных руководств по выравниванию в SwiftUI

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

Решение, в котором я сделал все возможное и удвоил числовые строки, чтобы снова выполнить эту работу. Хотя, честно говоря, уведомление мне там было не нужно; Я просто добавил это для хорошей меры. С помощью этого кода вы можете не только переходить между двумя макетами, как и все остальные, но вы также можете почти смешивать и сочетать их, переходя наполовину, если хотите; может быть, один макет остается вертикальным, а второй — горизонтальным.

Использование GeometryReader

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

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

Лучший, на мой взгляд, это ответ с использованием основных руководств по выравниванию; код я чувствую себя легче понять большинство других. Все это подводит меня к концу этого произведения. Надеюсь, вам понравилось читать ее так же, как мне ее писать, и вы узнали что-то новое в придачу.