Всем привет! Вы на канале школы мобильной разработки SwiftBook. Здесь мы рассказываем и показываем всё, что знаем о языке Swift и Kotlin: увлечённо, понятно и без воды.
С вами Анна Васичко и в этом уроке мы поговорим про новый инструмент, который будет доступен на SwiftUI 4 - Gauge.
Поехали! Видеоурок можно посмотреть здесь.
Gauge использовался и ранее вместе с WatchOS, чтобы отображать изменения значения в некотором диапазоне. Например, чтобы показывать сердцебиение или температуру в пределах шкалы.
Начиная со SwiftUI 4 вью типа Gauge будет доступна также и на iOS.
Давайте познакомимся с этим инструментом, у меня уже открыт проект в Xcode на SwiftUI.
Обозначим сначала заголовок, например “Temperature”
Далее вызовем инструмент Gauge с параметром value и label.
Параметр value принимает значения от 0 до 100 процентов.
В label передадим картинку термометра, задав ей определенный размер:
Text("Temperature")
.font(.largeTitle)
Gauge(value: 0.3) {
Image(systemName: "thermometer")
.resizable()
.frame(width: 20,height: 35)
}
По дефолту у Gauge идёт линейная шкала прогресса, но её можно изменить при помощи модификатора gaugeStyle:
.gaugeStyle(.accessoryCircular)
Давайте посмотрим другой стиль - .accessoryCircularCapacity
При таком способе отображения для незаполненной шкалы мы видим только её тень, а заполненная часть в нашем случае окрашена в белый, поэтому в светлом режиме мы не видим эту шкалу вовсе.
Давайте переключим режим на тёмный и посмотрим результат.
Чтобы шкалу было одинаково хорошо видно в обоих режимах, добавим ещё один модификатор tint
.tint(.orange)
И сделаю наш градусник немного поменьше, чтобы он лучше смотрелся:
.frame(width: 15,height: 25)
Аналогично типу шкалы accessoryCircularCapacity есть линейная шкала .linearCapacity.
И ещё один вид линейной шкалы - .accessoryLinear, в которой текущее значение отображается при помощи точки-маркера.
И ещё один вид .accessoryLinearCapacity - в этом случае шкала заполняется по мере прогресса
Верну вид шкалы обратно на круговую шкалу - accessoryCircular - с маркером на текущей температуре.
Помимо этого у шкалы может быть не один цвет, а градиент из нескольких, что в случае с температурой поможет более наглядно отобразить переход от более низкой к более высокой температуре:
.tint(Gradient(colors: [.blue, .green, .yellow, .orange, .red]))
И ещё я бы хотела сделать круг побольше, это можно сделать при помощи модификатора scaleEffect:
.scaleEffect(1.5)
Теперь давайте добавим к нашей шкале поясняющие подписи со значениями температуры
Введём дополнительные State свойства с минимальной, текущей и максимальной температурой.
Gauge принимает именно дробные числа, поэтому мы задаём эти значения с точкой
@State private var current = 15.0
@State private var minimum = 0.0
@State private var maximum = 40.0
И далее мы меняем инициализатора у Gauge, указываем value, затем диапазон, в котором value изменяется и лейблы для текущего значения, минимального и максимального
Gauge(value: current, in: minimum...maximum) {
Image(systemName: "thermometer")
} currentValueLabel: {
Text("\(Int(current))")
} minimumValueLabel: {
Text("\(Int(minimum))")
} maximumValueLabel: {
Text("\(Int(maximum))")
}
Также можем поменять цвет у подписи к минимальному и максимальному значению через модификатор foregroundColor.
А первый лейбл можно в целом оставить пустым, так как при данном варианте отображения Gauge его всё равно не видно.
Значение, которое мы передаём в Gauge динамично и зависит от каких-либо изменяющиеся параметров, давайте продемонстрирует это при помощи слайдера, который мы разместим ниже.
Slider(value: $current, in: minimum...maximum)
.padding()
И таким образом мы привязали шкалу к слайдеру.
На этом у меня всё, мы рассмотрели новый инструмент Gauge, который будет доступен на SwiftUI4.
Подписывайся на наши соцсети: Telegram / VKontakte
Вступай в открытый чат для iOS-разработчиков: t.me/swiftbook_chat