Красивые гистограммы всего в нескольких строках кода
SwiftUI — это инновационный, исключительно простой способ создания пользовательских интерфейсов для всех платформ Apple с помощью Swift. Создавайте пользовательские интерфейсы для любого устройства Apple, используя всего один набор инструментов и API.
Благодаря декларативному синтаксису Swift, который легко читать и естественно писать, SwiftUI без проблем работает с новыми инструментами проектирования Xcode, обеспечивая идеальную синхронизацию вашего кода и дизайна.
SwiftUI использует декларативный синтаксис, поэтому вы можете просто указать, что должен делать ваш пользовательский интерфейс. Ваша первая строка кода SwiftUI — это уже самый мощный код пользовательского интерфейса, который вы когда-либо писали.
Цель этой статьи — построить гистограммы с помощью SwiftUI. Мы будем использовать сегментированное окно выбора, чтобы связать различные формы гистограмм.
Если вы хотите изучить ARKit 3 от новичка до уровня эксперта, нажмите здесь, чтобы пройти курс, и вы также получите скидку 97%.
Если вы увлечены изучением мобильной разработки для iOS и хотите вывести свои навыки разработки для iOS на новый уровень, Core Data with CloudKit framework должен быть в верхней части вашего списка. Нажмите здесь, чтобы пройти курс, а также вы получите скидку 97%.
Изучите SwiftUI с нуля, нажмите здесь, чтобы получить курс, потому что в этом курсе мы собираемся создать множество приложений с использованием SwiftUI, таких как клон Facebook, приложение News, приложение Notes и многое другое.
Подпишитесь на мой канал Youtube, чтобы узнать больше о Swift, SwiftUI и разработке для iOS. Я ежедневно выкладываю видео о Swift и разработке под iOS.
Начиная
Откройте Xcode и создайте новый проект Xcode. В разделе шаблонов iOS выберите Приложение для одного просмотра и нажмите Далее.
Введите название продукта и выберите SwiftUI в качестве пользовательского интерфейса. Нажмите «Далее» и создайте его на своем рабочем столе.
Вот что вы увидите, когда закончите настройку.
По умолчанию файлы представлений SwiftUI объявляют две структуры. Первая структура соответствует протоколу View и описывает содержимое и макет представления. Вторая структура объявляет предварительный просмотр для этого представления.
Прежде чем реализовать линейчатую диаграмму в SwiftUI, давайте сначала посмотрим, что такое оболочка свойств.
Что такое обертка госимущества?
SwiftUI использует оболочку свойств @State, чтобы мы могли изменять значения внутри структуры, что обычно недопустимо, поскольку структуры являются типами значений. Когда мы помещаем @State перед свойством, мы фактически перемещаем его хранилище из нашей структуры в общее хранилище, управляемое SwiftUI.
Это означает, что SwiftUI может уничтожать и воссоздавать нашу структуру всякий раз, когда это необходимо (а это может происходить часто), без потери состояния, которое она хранила.
Реализация
Сначала нажмите Command + N, чтобы создать новый файл SwiftUI View. Вызовите файл BarView и вставьте следующий код в BarView.
struct BarView: View {
var value: CGFloat = 0
var week: String = ""
var body: some View {
VStack {
ZStack(alignment: .bottom) {
Capsule().frame(width: 30, height: value)
.foregroundColor(Color( colorLiteral(red: 0.6666070223, green: 0.6667048931, blue: 0.6665855646, alpha: 1)))
Capsule().frame(width: 30, height: value)
.foregroundColor(Color(.white))
}
Text(week)
}
}
}
В приведенном выше коде у нас есть две переменные: value и week. Первая переменная отслеживает высоту Capsule(), а вторая показывает неделю.
Затем мы построили VStack, чтобы добавить вид по вертикальной линии. Затем у нас есть одно ZStack — представление, которое накладывает свои дочерние элементы, выравнивая их по обеим осям. Внутри ZStack у нас есть две капсулы (Capsule() — это struct форма, выровненная внутри рамки представления, содержащего ее) для отображения гистограммы.
Вернитесь к своему contentview .swift файлу и вставьте следующий код.
struct ContentView: View {
@State private var pickerSelectedItem = 0
@State private var dataPoints: [[CGFloat]] = [
[50, 100, 150],
[150, 100, 50],
[100, 50, 150]
]
var body: some View {
ZStack {
Color.blue.edgesIgnoringSafeArea(.all)
VStack {
Text("BAR CHART")
.font(.system(size: 28))
.fontWeight(.medium)
Picker(selection: $pickerSelectedItem, label: Text("")) {
Text("Weekly").tag(0)
Text("Monthly").tag(1)
Text("Yearly").tag(2)
}.pickerStyle(SegmentedPickerStyle())
.padding(.horizontal, 24)
HStack(spacing: 8) {
BarView(value: dataPoints[pickerSelectedItem][0], week: "D")
BarView(value: dataPoints[pickerSelectedItem][1], week: "D")
BarView(value: dataPoints[pickerSelectedItem][2], week: "D")
}.padding(.top, 24)
.animation(.default)
}
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
В приведенном выше коде у нас есть две @State переменных: pickerSelectedItem и dataPoints. Используя эти переменные, мы настраиваем гистограмму.
Затем мы строим ZStack внутри ZStack, где у нас есть VStack. В VStack мы настроили Text, Picker, BarView и некоторую анимацию по умолчанию для BarView.
Сборка и запуск
Заключение
Вот и все. Надеюсь, вам понравился этот материал, и вы научились создавать анимированные гистограммы в SwiftUI.
Дополнительные ресурсы
Если вы хотите изучить ARKit 3 от новичка до уровня эксперта, нажмите здесь, чтобы пройти курс, и вы также получите скидку 97%.
Если вы увлечены изучением мобильной разработки для iOS и хотите вывести свои навыки разработки для iOS на новый уровень, Core Data with CloudKit framework должен быть в верхней части вашего списка. Нажмите здесь, чтобы пройти курс, а также вы получите скидку 97%.
Изучите SwiftUI с нуля, нажмите здесь, чтобы получить курс, потому что в этом курсе мы собираемся создать множество приложений с использованием SwiftUI, таких как клон Facebook, приложение News, приложение Notes и многое другое.
Подпишитесь на мой канал Youtube, чтобы узнать больше о Swift, SwiftUI и разработке для iOS. Я ежедневно выкладываю видео о Swift и разработке под iOS.
