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

В качестве примера предположим, что у нас есть следующая кнопка:

Со стилем кнопки по умолчанию и без каких-либо настроек, вот как кнопка реагирует на нажатие:

Помимо стиля по умолчанию, существует также простой стиль кнопки ( PlainButtonStyle). Этот вообще не украшает кнопку, а при нажатии на нее добавляется более светлая подсветка. Чтобы использовать его, предоставьте его экземпляр модификатору представления .buttonStyle:

Вот как эта же кнопка выглядит сейчас:

Однако помимо стилей кнопок, предоставляемых системой, также можно создавать пользовательские стили. Это может оказаться очень удобным, когда нам нужны одинаково настроенные и настроенные кнопки во всем приложении. Это может избавить нас от проблем с применением одних и тех же модификаторов представления к нескольким кнопкам, что является не только пустой тратой времени, но и плохой техникой; При этом принцип СУХОЙ (не повторяйся) не будет применяться.

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

Теперь давайте создадим собственный стиль кнопки. Для этого мы должны реализовать новую структуру, которая будет соответствовать протоколу ButtonStyle. Имя структуры может быть любым, но есть обязательный метод, который мы должны обязательно определить, называемый makeBody(configuration:):

Тип возвращаемого значения этого метода — some View; непрозрачный тип, который позволяет возвращать любое представление SwiftUI. Практически это означает две вещи:

  • Мы можем вернуть метку кнопки, сконфигурированную по мере необходимости, применив соответствующие модификаторы представления.
  • Мы можем вернуть представление SwiftUI или стек представлений, также правильно настроенный с любыми модификаторами представления, которые мы хотим.

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

Давайте поближе посмотрим на оба.

Настройка метки кнопки

Чтобы получить доступ и, следовательно, настроить внешний вид метки кнопки, то есть отображаемого содержимого кнопки, необходимо использовать значение параметра configuration метода makeBody(configuration:).

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

Чтобы применить описанное выше в фактической реализации кнопки, все, что нам нужно сделать, это использовать пользовательский стиль SampleStyle:

Изменение внешнего вида в прессе

Еще один факт, который делает создание пользовательского стиля кнопки интересным, заключается в том, что очень легко изменить внешний вид кнопки при нажатии и отпускании (касание и касание). Значение параметра configuration, использованное выше, имеет еще одно доступное для использования свойство, называемое isPressed. При значении true кнопка нажимается, а при значении false кнопка отпускается.

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

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

Результат этих модификаций показан ниже:

Настройка и возврат представления

Помимо метки кнопки, которую можно вернуть из метода makeBody(configuration:), также можно вернуть любое другое представление SwiftUI.

Чтобы увидеть пример этого, давайте переместим отображаемое содержимое кнопки-образца из его реализации в метод makeBody(configuration:). Сначала метка кнопки станет пустой:

В реализации пользовательского стиля кнопки у нас будет следующее, одновременно применяя все модификаторы, которые мы встречали ранее:

Кнопка снова будет правильно отображаться. Несмотря на то, что у него нет метки, представление, которое мы возвращаем здесь (HStack), является частью его стиля, и это то, что будет отображаться.

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

Вызов SampleStyle должен быть соответствующим образом изменен, содержа фактические значения:

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

Результат вышеизложенного таков:

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

Также обратите внимание, что все вышеперечисленное применимо и к представлениям ссылок.

Вывод

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

Спасибо за чтение!

Первоначально опубликовано на https://serialcoder.dev 10 февраля 2021 г.