В этой статье мы проверим, как мы можем создавать свои собственные стили в SwiftUI, затем мы сделаем следующий шаг и применим его к нашему собственному переключателю, чтобы мы могли использовать его точно так же, как мы делаем это со встроенным. :
Создание пользовательского стиля переключения
Все различные стили, включая ToggleStyle, являются протоколами с методом создания представления. Все они похожи и довольно просты в настройке, давайте посмотрим, как обстоят дела с Toggle!
Создайте новый проект SwiftUI и создайте новый файл с именем RectangularToggleStyle.swift для нового стиля.
Если вы хотите увидеть дизайн, вы можете просмотреть его с помощью Toggle или, чтобы упростить задачу, вы можете просмотреть этот файл:
Как видите, основными функциями являются метка (configuration.label), которая представляет собой строку, которую мы предоставляем при создании переключателя, и привязку (configuration.isOn) для управления включенным/выключенным состоянием переключателя. Если вы проверите пользовательский стиль, вы можете заметить это в коде, остальное — это просто ZStack с простыми RoundedRectangles и некоторыми цветами — не стесняйтесь создавать свои красивые переключатели, как вы хотите!
Создание пользовательского переключателя
На следующем шаге мы создадим собственный переключатель, который может иметь собственный шрифт, цвет шрифта или любой другой элемент дизайна, чтобы сделать его еще более отличным от встроенного. Для этого нам нужно создать новый файл; назовем его CustomToggle.swift.
Как видите, это почти не отличается от создания простого переключателя с нашим новым пользовательским стилем. Самое главное здесь — это текст с настройкой пользовательского шрифта. Если ваше приложение использует пользовательские шрифты, имеет важные цветовые переключатели или что-то еще, что вам нужно использовать, например, настраиваемые фоны, разделители и т. д., вы можете настроить это здесь. По сути, с помощью стиля вы можете определить внешний вид переключателя, а здесь вы можете спроектировать остальную часть переключателя (в большинстве случаев это означает метку). Это означает, что configuration.label для стиля все время должна быть пустой строкой, вместо этого мы используем наш текст в переключателе.
Используя наш новый пользовательский переключатель
Последний шаг — вернуться к нашему ContentView и обновить его с помощью нашего нового переключателя:
Вот и все! С этого момента каждый раз, когда вам нужен переключатель, вы можете просто использовать свой собственный, не добавляя ничего особенного к реальному представлению. Если изменится дизайн или вам нужно что-то обновить, вы можете сделать это в двух соответствующих файлах, и ваши переключатели будут обновляться везде в приложении.
Несколько важных моментов в конце:
- Хорошо иметь группу для ваших пользовательских стилей и еще одну для пользовательских представлений, которые вы создали, не помещайте весь код в один огромный файл, держите его чистым и простым!
- В этом примере переключатель имеет жестко запрограммированную ширину 60 пикселей в toggleStyle, вы можете легко изменить код, чтобы вы могли настроить ширину (или высоту, или любой другой параметр) при инициализации фактического CustomToggle.
Вы можете найти весь проект здесь с дополнительными комментариями и документацией: https://github.com/zulzu/CustomSwiftUIToggle
