Функции SwiftUI 4 для iOS 16

Некоторые плюсы SwiftUI, которые я изучил до сих пор

Мероприятие WWDC 2022 только что началось на этой неделе, и, как и каждый раз, нужно было следить за объявлениями SwiftUI. От нового NavigationStack до библиотеки диаграмм только для SwiftUI и улучшений в макете сетки — у нас есть много вкусностей, которыми мы можем насладиться.

В следующих нескольких разделах я расскажу вам о 4 новых функциях, которые мне удалось изучить в четвертой итерации SwiftUI для iOS 16. Они будут в основном использоваться для улучшения внешнего пользовательского интерфейса и UX ваших приложений для iOS. .

Графики SwiftUI

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

В настоящее время платформа Chart поддерживает линейчатые, площадные, линейные, точечные и прямоугольные диаграммы. Для пончиков и пирогов нет. Тем не менее, я думаю, что мы можем создать собственный, используя фреймворк.

Вот краткий пример того, как создать гистограмму с использованием инфраструктуры SwiftUI Charts:

Chart{
BarMark(x: .value("Name", ""))
}

Гистограммы составляются с использованием представления BarMark. Здесь параметр x принимает два аргумента: название бара в описании и отображаемое имя. Точно так же аргумент y требует имени стержня и аргумента длины. Вместо того, чтобы передавать данные непосредственно в представлениях, SwiftUI требует, чтобы мы обернули их в объект Plottable (.value).

Хотя приведенный выше пример был довольно простым, в реальных приложениях мы должны использовать структуры данных для построения диаграмм.

Вот пример структуры, которую мы только что создали.

Примечание. Важно установить значения одной из осей как Идентифицируемые, чтобы однозначно идентифицировать каждый бар:

Вот результат приложения в действии:

Чтобы создать горизонтальные диаграммы, просто переверните значения x и y.

Мы можем дополнительно настроить диаграммы, скрыв линии сетки осей — с помощью модификаторов .chartYAxis(.hidden) и .chartXAxis(.hidden) или придав им больше контекста с помощью легенд.

Вы также можете добавить несколько диаграмм в одно и то же представление — друг над другом, используя:

LineMark, AreaMark, PointMark, RectangleMark — все есть. И чтобы увидеть, как платформа SwiftUI Charts позволяет так легко и быстро создавать диаграммы, ознакомьтесь с этой статьей, в которой была создана пользовательская гистограмма.

Градиенты и тени

Добавлять линейные градиенты проще, чем когда-либо прежде. Просто добавьте модификатор .gradient после Color, чтобы получить этот эффект.

Хотите увидеть его в действии? Посмотрите последнее демонстрационное изображение Charts. Он содержит: .foregroundStyle(chart.color.gradient), чтобы дать вашим графикам преимущество.

SwiftUI 4 также предлагает готовую поддержку внутренних теней и теней с использованием ShadowStyle. Вот как это использовать:

Circle().fill(.red.gradient.shadow(.inner(radius: 10)))
Circle().fill(.red.gradient.shadow(.drop(color: .black, radius: 10)))

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

Вот результат различных перестановок и комбинаций теней и градиентов:

Последний значок представляет собой комбинацию капли и внутренней тени с градиентом:

Настраиваемые нижние листы

В iOS 15 Apple представила UISheetPresentationController.Detent для UIKit. А в iOS 16 вы также можете настраивать нижние листы в SwiftUI — с помощью presentationDetents

Вот как это использовать:

.presentationDetents([.medium, .large,])
.presentationDetents([.fraction(0.2), .height(100)])

Поделиться ссылками

Оставьте в стороне настраиваемые нижние листы. SwiftUI для iOS 16 также поддерживает встроенные общие листы.

Используя ShareLinks, вы можете открыть интерфейс общего доступа по умолчанию следующим образом:

struct ContentView: View {
   
  private let shareItem = URL(string: "https://www.apple.com")!  var body: some View {
    ShareLink(item: shareItem)
  }
}

По умолчанию ShareLink отображается с кнопкой «Поделиться» и значком. Однако вы можете настроить его, включив в него другие значки и метки.

Примечание: перенос ShareLink на Button не работает — возможно, потому, что ShareLink сама по себе является кнопкой.

Кроме того, по умолчанию ShareLink отображает нижний лист на весь лист. Однако вы можете настроить его точно так же, как и нижние листы — с помощью presentationDetents.

Примечание. На момент написания статьи настройка presentationDetents для одного ShareLink также отражалась на других представлениях в иерархии.

Датчики

Если вы работали со SwiftUI ProgressView, датчики не покажутся вам чем-то новым. По сути, датчики — это просмотр прогресса на стероидах.

В отличие от представлений прогресса, которые позволяют задавать значения в виде процентов, датчики позволяют нам представлять значения в пределах указанного диапазона.

Кроме того, дополнительная настраиваемость делает их сильным соперником для создания виджетов приложений.

Вот как использовать датчики:

Gauge(value: 50, in: 0...100) {
Text("Gauge Name")
}
.gaugeStyle(.accessoryCircular)

Мы можем дополнительно настроить и добавить maximumValueLabel, minimumValueLabel и currentValueLabel для датчика.

Вот некоторые стили Gauge:

Новые сетки

SwiftUI теперь предоставляет встроенное представление Grid для создания более сложных макетов.

При использовании GridRows и модификатора gridCellColumn настройка сетки становится намного проще и быстрее.

Выбор нескольких дат

Вы когда-нибудь хотели выбрать несколько дат из встроенного средства выбора SwiftUI? Это может быть бронирование планов поездок или рабочих встреч. Не беспокойтесь!

В iOS 16 у нас есть MultiDatePicker, который работает следующим образом:

ViewThatFits

ViewThatFits — это новый тип представления, представленный в iOS 16. И, как следует из названия, он позволяет SwiftUI автоматически выбирать одно из двух представлений, которое лучше всего соответствует доступному пространству.

Довольно удобный инструмент для настройки разных представлений для разных размеров и ориентаций экрана, как показано ниже:

AnyLayout

. SwiftUI для iOS 16 представляет AnyLayout — структуру для переключения между макетами со стертым типом без потери состояния подвидов. Он прекрасно работает с VStack и HStack, но не работает с ZStack.

В то время как ViewThatFits позволяет SwiftUI выбирать представление для нас, AnyLayout возвращает вам некоторый контроль над настройкой.

Создание эффектов перехода без использования переходов и эффектов геометрии никогда не было проще, чем это:

Переменные символы SF 4

Помимо большего количества новых значков, SF Symbols 4 также представляет переменные символы.

Это означает, что теперь вы можете динамически устанавливать цвет символов в виде процентного значения — для анимации или демонстрации прогресса.

Image(systemName: "wifi", variableValue: value)

Преобразование представлений SwiftUI в изображения — с помощью API ImageRenderer в iOS 16

Новый API ImageRenderer позволяет экспортировать представления как UIImage, NSImage или CGImage. Создание моментальных снимков или захват сцен RealityKit стало намного проще благодаря следующему вызову функции:

ImageRenderer(content: <ViewToBeConverted>).uiImage

Давайте создадим приложение SwiftUI для мини-плаката, используя описанную выше концепцию. Вот код представления, которое мы хотим преобразовать в изображение:

Он состоит из Text и Image, заключенных в Shape.

Теперь давайте создадим наш ContentView:

Мы добавили ColorPicker и TextField, чтобы настроить фон и текст нашего плаката.

Нажав на Button, мы получим копию постера в виде Image:

Чтобы создать полностью работающее приложение-плакат, начните с того, что поместите вышеприведенное представление в файл ScrollView.

Примечание. ImageRenderer API работает не со всеми представлениями. Некоторые из них, например VideoPlayer, Map, запрещены.

Это оборачивает эту часть на данный момент. Но есть еще много вкусностей, которые могут вас заинтересовать.

Например, встроенный Photo Picker, улучшения в SwiftUI Lists (да, он больше не использует UITableView), больше элементов управления Search View, новый протокол Layout для создания пользовательских макетов, встроенный API для обзоров в App Store и т. д. Кроме того, с Xcode 14 представления SwiftUI имеют автоматический отступ.

Текстовые поля SwiftUI также получили несколько приятных обновлений. Например, готовая поддержка многострочного режима, модификатор фокуса по умолчанию и возможность интегрировать его в файл Alert. Вот руководство по новым функциям SwiftUI TextField для iOS 16.