Разработка

Создание настраиваемого сегментированного контрола в SwiftUI

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

Опубликовано

6 месяцев назад

22.10.2024

Автор:

AppTractor

Сегментированные элементы управления — распространенный элемент пользовательского интерфейса в приложениях для 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)
    }
    
}

​x
 
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 {
                    // ...
                }
            }
        }
    }

}

xxxxxxxxxx
 
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 обеспечивает большую гибкость и соответствие дизайну вашего приложения. Вдохновившись моим приложением, мы можем создать интуитивно понятные и визуально привлекательные элементы пользовательского интерфейса, которые повысят вовлеченность пользователей.

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

Источник

Если вы нашли опечатку - выделите ее и нажмите Ctrl + Enter! Для связи с нами вы можете использовать info@apptractor.ru.