Разработка
Создание настраиваемого сегментированного контрола в SwiftUI
Помните, что ключ к созданию отличного пользовательского элемента управления — это баланс между функциональностью и дизайном.
Сегментированные элементы управления — распространенный элемент пользовательского интерфейса в приложениях для iOS, позволяющий пользователям переключаться между различными видами или опциями. Хотя SwiftUI предоставляет встроенный Picker в сегментированном стиле, создание собственного сегментированного контрола может обеспечить большую гибкость в дизайне и функциональности. В этой статье мы рассмотрим, как создать собственный сегментированный контрол в SwiftUI, черпая вдохновение из моей реализации его в приложении Catzumi.
Реализация кода
Давайте погрузимся в код для нашего пользовательского SegmentedControl:
import SwiftUI
struct SegmentedControl: View {
// MARK: - Properties
@Binding var selection: Int
var options: [String]
// MARK: - Properties (Private)
@StateObject private var themeManager = ThemeManager()
// MARK: - Properties (Views)
var body: some View {
HStack(spacing: 0) {
ForEach(options.indices, id: \.self) { index in
Text(options[index])
.frame(maxWidth: .infinity)
.padding(8)
.apply { view in
if index == selection {
view
.foregroundStyle(themeManager.backgroundButton)
.background {
Rectangle()
.foregroundStyle(themeManager.foregroundButton)
}
} else {
view
.foregroundStyle(themeManager.foregroundButton)
.background {
Rectangle()
.foregroundStyle(themeManager.backgroundButton)
}
}
}
.onTapGesture {
UIImpactFeedbackGenerator(style: .light).impactOccurred()
withAnimation(.linear(duration: 0.1)) { selection = index }
}
}
}
.padding(8)
.border(themeManager.foregroundButton, width: 4)
}
}
В этой реализации есть несколько ключевых моментов:
- Динамические параметры: контрол принимает массив строк, что позволяет гибко настраивать сегменты.
- Интеграция тем: используется ThemeManager для обеспечения согласованного стиля во всем приложении.
- Интерактивная обратная связь: при изменении выбора реализуется тактильная обратная связь.
Использование
Вот как вы можете реализовать пользовательский SegmentedControl в вашем представлении:
import SwiftUI
struct ShopView: View {
// MARK: - Properties (Private)
@State private var section = 0
// MARK: - Properties (View)
var body: some View {
ZStack {
VStack(spacing: 0) {
SegmentedControl(selection: $section, options: ["Cat", "Interface", "My Items"])
.padding()
if section == 0 {
// ...
} else if section == 1 {
// ...
} else if section == 2 {
// ...
}
}
}
}
}
В этом примере от Catzumi мы создали ShopView, который использует наш пользовательский SegmentedControl для переключения между различными разделами магазина.
Усовершенствования
Чтобы еще больше улучшить сегментированный элемент управления, рассмотрим следующие дополнения:
- Доступность: добавьте голосовые надписи и подсказки для каждого сегмента.
- Анимация: реализуйте плавные переходы между сегментами.
- Отзывчивость: убедитесь, что элемент управления хорошо адаптируется к различным размерам экрана.
Заключение
Создание пользовательского сегментированного контрола в SwiftUI обеспечивает большую гибкость и соответствие дизайну вашего приложения. Вдохновившись моим приложением, мы можем создать интуитивно понятные и визуально привлекательные элементы пользовательского интерфейса, которые повысят вовлеченность пользователей.
Помните, что ключ к созданию отличного пользовательского элемента управления — это баланс между функциональностью и дизайном. Применяя его в своих проектах, не бойтесь экспериментировать и адаптировать элемент управления под уникальный стиль и потребности вашего приложения.
