Ускорьте просмотр прогресса с помощью представления Gauge
Датчик — это новый вид SwiftUI, представленный Apple, чтобы помочь разработчикам отображать значение в диапазоне. Если вы думаете о полукруглом виджете Apple, вы правы! Полукруглый вид ваших виджетов или расширений WatchOS теперь можно воспроизвести с помощью Gauge View. Посмотрим, как работает.
A Gauge Посмотреть реальный случай
Представьте, что вы разработали приложение master-detail; у вас есть список объектов с серией статистики, и в подробном представлении вы хотите показать статистику с представлением прогресса, может быть круговым или линейным (да, это пока приложение Pokémon). У нас есть не процентное число, а значение в диапазоне, которое имеет минимальное (также может быть отрицательное значение или другое нулевое значение) и максимальное значение. В этом основное различие между просмотром прогресса и просмотром датчика; поэтому, если мы хотим управлять процентным значением, мы можем использовать просмотр прогресса, а если у нас есть значение в пределах диапазона или если мы хотим показать значение определенным образом, мы можем использовать Просмотр датчика. Представление датчика можно настроить с помощью предустановленного стиля, пользовательского стиля и различных меток и цветов.
Экран датчика в действии
Давайте посмотрим на экран Gauge View в действии:
Gauge(value: progress, in: mininumGaugeValue...maximumGaugeValue, label: { Text("Title") }, currentValueLabel: { Text("Current value: \(progress.formatted())") }, minimumValueLabel: { Text(mininumGaugeValue.formatted()) }, maximumValueLabel: { Text(maximumGaugeValue.formatted()) })
Представление датчика принимает в качестве параметра значение, то есть значение, отображаемое в представлении. Вместо этого границы представляют собой диапазон с минимальным и максимальным возможными значениями (по умолчанию от 0 до 1). Кроме того, вы можете реализовать эти необязательные представления:
- ярлык: представление, используемое для описания назначения индикатора. Рисуется в верхней части шкалы.
- currentValueLabel: представление, используемое для отображения текущего значения. Рисуется в нижней части шкалы.
- minimumValueLabel: представление, используемое для отображения минимального значения. Рисуется слева от датчика.
- maximumValueLabel: представление, используемое для отображения максимального значения. Рисуется справа от датчика.
Стиль
Одно из различий между представлением прогресса и представлением датчика — это стиль. В Gauge View есть модификатор gaugeStyle(_ style: S), который изменяет стиль представления, передавая перечисление следующим образом:
Gauge(value: progress, in: minimumGaugeValue...maximumGaugeValue) {} .gaugeStyle(.linearCapacity)
Возможные значения стилей:
- linearCapacity: это стиль по умолчанию. Это простая полоса, которая заполняется слева направо точно так же, как Просмотр прогресса. Текущее значение находится внизу, минимум слева, максимум справа и заголовок вверху.
. accessoryLinearCapacity: это компактная версия linearCapacity. Заголовок и текущее значение располагаются по направлению к переднему краю.
- accessoryLinear: суперкомпактная версия. В этом стиле метка заголовка и текущее значение не отображаются. Текущее значение указано маркером.
- accessoryCircular: это компактная круглая версия. Это представление, которое пользователи iOS знают правильно, потому что оно используется для виджета погоды на экране блокировки iOS или в расширениях WatchOS. Есть два варианта этого представления; если существуют минимальный и максимальный виды, они будут показаны слева и справа от открывающегося кольца. В противном случае будет отображаться вид заголовка
- accessoryCircularCapacity: это кольцевая версия Gauge View.В этой версии отображается только текущее значение.
Это предустановленные стили для нового представления датчика. Отмечает, что все эти стили можно анимировать; кроме того, вы можете раскрасить вид с помощью модификатора tint. В этих примерах я использовал представление LinearGradient для раскрашивания представлений.
Пользовательский GaugeViewStyle
В этом особенность нового представления Gauge: вы можете создать собственный GaugeStyle и применить его к своему представлению. В приведенном ниже примере мы видим пример реализации, в котором наш GaugeStyle инициализируется содержимым @ViewBuilder. Давайте посмотрим код:
/// The `GaugeStyle` of the `OverallView`. struct OverallGaugeStyle<Content: View>: GaugeStyle { // MARK: - Properties /// The `View` contained by the gauge. var content: Content /// The `LinearGradient` used to style the gauge. private var gradient = LinearGradient( colors: [ Color(uiColor: AppAsset.background.color.withAlphaComponent(0.5)), Color(uiColor: AppAsset.primary.color) ], startPoint: .trailing, endPoint: .leading ) // MARK: - Init /// The `init` of the `OverallGaugeStyle`. /// - Parameter content: The `View` contained by the gauge. init(@ViewBuilder content: () -> Content) { self.content = content() } func makeBody(configuration: Configuration) -> some View { VStack { ZStack { content Circle() .trim(from: 0, to: configuration.value * 0.75) .stroke(gradient, style: StrokeStyle(lineWidth: 20, lineCap: .round)) .rotationEffect(.degrees(135)) .frame(width: 250, height: 250) } configuration.currentValueLabel .fontWeight(.bold) .font(.title2) .foregroundColor(Color(uiColor: AppAsset.background.color)) } } }
Пользовательский стиль соответствует GaugeStyle. Таким образом, метод makeBody должен быть реализован, возвращая View; Метод makeBody принимает объект Configuration, который является псевдонимом типа GaugeStyleConfiguration, структуры со всеми свойствами представления датчика. Так, например, если мы настроим представление датчика с представлением currentValueLabel, мы можем использовать его, вызвав
configuration.currentValueLabel
В примере инициализация с содержимым @ViewBuilder была добавлена и использована внутри представления GaugeStyle. Представление Круг обрезается, чтобы получить дизайн, аналогичный дизайну полукруга в стиле accessoryCircular.
Единственное, что нужно сделать сейчас, это установить пользовательский стиль с правильным модификатором, таким образом:
Gauge(value: progress, in: minimumGaugeValue...maximumGaugeValue) {} currentValueLabel: { VStack { Text("\(model.title): \((model.value).formatted(.number))") } } .gaugeStyle(OverallGaugeStyle { ... })
Вот и все!
Следующие шаги
Теперь у вас есть новый вид для разработки ваших приложений, когда им нужно показать значение в пределах диапазона. Создавайте дизайн и получайте удовольствие от Gauge View на iOS.