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

Красивые гистограммы всего в нескольких строках кода

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.

 

См. также:  Как запустить и развернуть Vue с серверной частью NodeJS в службах приложений Azure

CodeWithTwins
Добро пожаловать на канал CodeWithTwins YouTube, ежедневные видеоролики о Swift и разработке для iOS. Узнайте, как создать приложение с… www.youtube.com

 

Начиная

Откройте 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(), а вторая показывает неделю.

См. также:  Эта ветка комментариев выглядит наполненной любовью к Laravel.

Затем мы построили 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.

 

См. также:  Развертывание — Модели ML и DL в Google App Engine с использованием Flask API

CodeWithTwins
Добро пожаловать на канал CodeWithTwins на YouTube, ежедневные видеоролики о Swift и разработке для iOS. Узнайте, как создать приложение с… www.youtube.com

 

Понравилась статья? Поделиться с друзьями:
IT Шеф
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: