@EnvironmentObject требует от нас создания некоторого класса final class UserData, который находится в файле UserData.swift, запоминает данные chartsData и реализует протокол ObservableObject:

Наличие @Published «обертки» позволит разместить «новости» о том, что данные  свойства charts класса UserData изменились, так что любые Views, «подписанные на эти новости» в SwiftUI, смогут автоматически выбрать новые данные и обновиться. 

Отметим, что в свойстве charts могут меняться значения isHidden для любого «Графика» (они позволяют скрывать или показывать эти «Графики»), а также нижняя lowerBound и верхняя upperBound границы временного интервала для каждого отдельного «набора Графиков».

Свойство charts класса UserData мы хотим использовать повсюду в нашем приложении и нам не придется синхронизировать их с UI вручную благодаря @EnvironmentObject.

Для этого при старте приложения мы должны создать экземпляр класса UserData (), чтобы впоследствие иметь к нему доступ где угодно в нашем приложении. Мы сделаем это в файле SceneDelegate.swift внутри метода scene (_ : , willConnectTo: , options: ). Именно там создается и запускается наш ContentView, и именно здесь мы должны передавать ContentView любые созданные нами @EnvironmentObject так, чтобы SwiftUI мог сделать их доступными для любого другого View :

Теперь, в любом View для доступа к @Published данным класса UserData нам нужно создать переменную var, используя @EnvironmentObject обертку. Например, при настройке временного диапазона в RangeView мы создаем переменную var userData, имеющую ТИП UserData:

Нет необходимости в инициализации экземпляра userData класса UserData или задании значения по умолчанию, потому что он автоматически будет считан из «среды», так как является @EnvironmentObject.

Итак, как только мы внедрили некоторый объект @EnvironmentObject в «среду», мы можем немедленно начать его использовать либо на самом верхнем уровне, либо 10-ю уровнями ниже — это не имеет значения. Но что более важно, всякий раз, когда какое-то View изменит «среду», все Views, имеющие этот @EnvironmentObject, автоматически обновятся, обеспечивая тем самым  синхронизацию с данными.

Данные внедрены в наше приложение, они могут изменяться пользователем,  а пользовательский интерфейс благодаря SwiftUI будет немедленно реагировать на эти изменения. Теперь пора поговорить о самом пользовательском интерфейсе (UI).

Пользовательский Интерфейс (UI) для одного «набора Графиков»

SwiftUI предлагает композиционную технологию создания UI из множества небольших Views, а мы уже видели, что наше приложение очень хорошо ложится на эту технологию, так как расщепляется на маленькие кусочки: «набор Графиков» ChartView, «Графики» GraphsForChart, отметки на оси Y — YTickerView, управляемый пользователем индикатор значений «Графиков» IndicatorView, «бегущую» строку TickerViewс временными отметками на оси X , управляемое пользователем «временное окно» RangeView, отметки о скрытии / показе «Графиков» CheckMarksView. Все эти Views сами состоят из более элементарных Views, которые мы можем не только создавать независимо друг от друга, но тут же и тестировать с помощью Previews (предварительных «живых» просмотров) на тестовых данных.

GraphView — «График»

Первое View, с которого мы начнем, — это собственно сам «График» (или «Линия»). Мы назовем его GraphView :

Создание GraphView, как обычно, начинается с создания нового файла в Xcode 11 с помощью меню File -> New -> File :

Затем мы выбираем нужный ТИП файла — это SwiftUI файл:

… даем название «GraphView» нашему View и указываем его местоположение:

Кликаем на кнопке «Create» и получаем стандартное View с текстом Text ( «Hello  World!») в середине экрана:

Наша задача — заменить текст Text («Hello World!») на «График», но сначала давайте посмотрим, какими исходными данными для создания «Графика» мы располагаем:

• у нас есть значения line.points «Графика» line: Line,
• временной диапазон rangeTime, представляющий собой диапазон индексов Range<Int> временных отметок xTime на ОСИ X,
• диапазон значений rangeY: Range<Int>? «Графика» для ОСИ Y,
• толщина линии обводки «Графика» lineWidth.

Добавляем эти свойства в структуру GraphView:

Если мы хотим использовать для нашего «Графика» Previews (предварительные просмотры), которые возможны только для MacOS  Catalyna, то мы должны инициировать GraphView с диапазон индексов rangeTime временных отметок xTime и данными line самого «Графика»:

У нас уже есть тестовые данные chartsData, которые мы получили из JSON файла chart.json :

… и мы их использовали для Previews.
В нашем случае это будет первый «набор Графиков» chartsData[0] и первый «График» в этом наборе chartsData[0].lines[0], который мы предоставим GraphView в качестве параметра line, в качестве временного интервала rangeTime мы будем использовать полный диапазон индексов 0..<(chartsData[0].xTime.count — 1). Параметры rangeY и lineWidth можно задавать извне, а можно и не задавать, так как у них уже есть начальные значения : у rangeY — это nil, а у lineWidth — 1.

Мы намеренно сделали ТИП свойства rangeY  Optional<Range<Int>>, так как в случае, если rangeY не задается извне и rangeY = nil, то мы вычисляем минимальное minY и максимальное maxY значения «Графика» непосредственно из данных line.points :

Этот код компилируется, но мы по-прежнему имеем на экране  стандартное View с текстом Text («Hello World!») в середине экрана:

Потому что в body мы должны заменить текст Text («Hello World!») на Path, который по точкам line.points с помощью команды addLines(_:) ( почти как в Core Graphics) будет строить нам «График :

Мы обведем stroke (…) наш Path линией, толщина которой равняется lineWidth, при этом цвет линии обводки будет соответствовать цвету «по умолчанию» ( то есть «черному»).

Мы можем заменить черный цвет для линии обводки на цвет, заданный в нашем конкретном «Графике» line.color:

Для того, чтобы наш «График» мог размещаться в прямоугольниках любых размеров, мы используем контейнер GeometryReader. В документации Apple GeometryReader — это «контейнер» View, который определяет свое содержимое как функцию от собственных размера size и координатного пространства. По существу, GeometryReader — это еще одно View! Потому что почти ВСЁ  в  SwiftUI является View! GeometryReader позволит ВАМ в отличие от других Views получить доступ к некоторой дополнительной полезной информации, которой можно воспользоваться при проектировании вашего пользовательского View.

Мы используем контейнер GeometryReader и Path для создания GraphView. И если мы посмотрим внимательно на наш код, то увидим в замыкании для GeometryReader переменную с именем geometry:

Эта переменная имеет ТИП GeometryProxy, который в свою очередь является структурой struct со множеством «сюрпризов»:

public var size: CGSize { get }
public var safeAreaInsets: EdgeInsets { get }
public func frame(in coordinateSpace: CoordinateSpace) -> CGRect
public subscript<T>(anchor: Anchor<T>) -> T where T : Equatable { get }

Из определения GeometryProxy мы видим, что там присутствуют две вычисляемые переменные var size и var safeAreaInsets, одна функция frame( in:) и subscript getter. Нам понадобилась только переменная size для определения ширины geometry.size.width и высоты geometry.size.height области рисования «Графика».

Кроме того, мы даем возможность нашему «Графику» анимировать с помощью модификатора animation (.linear(duration: 0.6)).

 GraphView_Previews позволяет нам очень просто тестировать любые «Графики» из любого «набора». Ниже представлен «График» из «набора Графиков»  с индексом 4 : chartsData[4] и индексом 0 «Графика» в этом наборе: chartsData[4].lines[0] :

Мы задали высоту height «Графика» равной 400 с помощью frame (height: 400), ширина осталась равной ширине экрана. Если бы мы не использовали frame (height: 400), то «График» занял бы весь экран. Мы не задали диапазон значений rangeY и GraphView использовал значение nil, которое задано по умолчанию, в этом случае «График» берет свои минимальное и максимальное значения на временном интервале rangeTime:

Хотя мы применили для нашего Path модификатор animation (.linear(duration: 0.6)), никакой анимации происходить не будет, например, при изменении диапазона rangeY значений «Графика». «График» будет просто «прыгать» от одного значения диапазона rangeY к другому без всякой анимации. 

Причина простая: мы научили SwiftUI тому, как нарисовать «График» для конкретного диапазона rangeY , но мы не научили SwiftUI тому, как воспроизводить «График» многократно с промежуточными  значениями диапазона rangeY между начальным и конечным, а за это вSwiftUI отвечает протокол Animatable. 

К счастью, если ваш View —  «фигура», то есть View, которое реализует протокол Shape, то для него уже реализован протокол Animatable. Это означает, что существует вычисляемое свойство animatableData, с помощью которого мы можем управлять процессом анимации, но по умолчанию оно установлено в  EmptyAnimatableData, то есть никакой анимации не происходит.  

Для того, чтобы решить проблему с анимацией, мы сначала должны превратить наш «График» GraphView в Shape. Это очень просто, нам нужно только реализовать функцию func path (in rect:CGRect) -> Path, которая у нас, по существу, уже есть и указать с помощью вычисляемого свойства animatableData, какие данные мы хотим анимировать:

Отметим, что тема управления анимацией является продвинутой темой в SwiftUI и вы можете более подробно с ней познакомиться в статье «Advanced SwiftUI Animations – Part 1: Paths».

Полученную «фигуру» Graph мы можем использовать в значительно более простом GraphViewNew для «Графика» с анимацией:

Вы видите, что нам не понадобился GeometryReader для нового «Графика» GraphViewNew, так как благодаря протоколу Shape наша «фигура» Graph сможет адаптироваться к любому размеру родительского View. Естественно в Previews мы получили тот же самый результат, что и в случае с GraphView:

В последующих комбинациях мы будем использовать GraphViewNew для отображения значений одного «Графика».

GraphsForChart — совокупность «Графиков»

Задача этого View — отображать ВСЕ «Графики» из «набора Графиков» chart в заданном временном диапазоне rangeTime с общей осью Y и  линиями шириной lineWidth :

Также как и для GraphView и GraphViewNew, мы создадим для GraphsForChart новый файл GraphsForChart.swift и определяем исходные данные для «набора Графиков»:

• сам «набор Графиков» chart: LineSet (значения),
• временной диапазон rangeTime: Range<Int> (ОСЬ X), представляющий собой диапазон индексов временных отметок «Графика»,
• толщина линии обводки «Графика» lineWidth.

Диапазон значений rangeY: Range<Int>? для «набора Графиков» (ОСЬ Y) вычисляется как объединение диапазонов отдельных НЕ cкрытых ( isHidden = false ) «Графиков», входящих в данный «набор»:

Для этого мы используем функцию rangeOfRanges:

Все НЕ скрытые «Графики» ( isHidden = false ) мы показываем в ZStack с помощью конструкции ForEach, наделяя при этом каждый «График» возможностью появления на экране и ухода с экрана «с помощью модификатора «перемещения» transition(.move(edge: .top)):

Благодаря этому модификатору процесс скрытия и возвращения «Графика»  в ChartViewNew будет проходить на экране с анимацией  и даст понять пользователю, почему изменился масштаб по оси Y.

Использование drawingGroup() означает использование Metal для рисования графических фигур. На наших тестовых данных и на симуляторе вы не почувствуете разницы в скорости рисования с Metal и без Metal, но если вы воспроизводите множество достаточно громоздких графиков на любом iPhone, то вы заметите эту разницу. Для более подробного ознакомления, когда следует использовать drawingGroup(), можно посмотреть статью «Advanced SwiftUI Animations – Part 1: Paths» или посмотреть видео сессии 237 WWDC 2019  (Building Custom Views with SwiftUI).

Как и в случае с GraphViewNew при тестировании GraphsForChart с помощью предварительного просмотра Previews мы можем установить любой «набор Графиков», например, с индексом 0:

IndicatorView —  горизонтально перемещаемый индикатор «Графика».

Этот индикатор позволяет получить точные значения «Графиков» и времени для соответствующей точки на временной на оси X:

Индикатор создается для определенного «набора Графиков» chart и состоит из скользящей вдоль оси X вертикальной ЛИНИИ с ОТМЕТКАМИ на ней в виде «кружочков» в месте значений «Графиков». К верхней части этой вертикальной линии прикреплен небольшой «ПЛАКАТ», содержащий численные значения «Графиков» и времени.

Скольжение индикатора производит пользователь с помощью жеста DragGesture :

Мы используем так называемое “инкрементное” выполнение жеста. Вместо непрерывного расстояния от стартовой точки value.translation.width,  мы будем в обработчике onChanged постоянно получать расстояние от того места, где были в прошлый раз, когда выполняли жест: value.translation.width — self.prevTranslation . Это обеспечит нам плавное перемещение индикатора.

Для тестирования индикатора IndicatorView с помощью Previews для заданного «набора Графиков» chart мы можем привлечь уже готовое View построения «Графиков» GraphsForChart :

Мы можем задать любой, но согласованный друг с другом, диапазон времени rangeTime как для индикатора  IndicatorView, так и для «Графиков» GraphsForChart. Это позволит нам убедиться, что «кружочки», обозначающие значения «Графиков», находятся на правильном месте.

TickerView — ось X с отметками.

Пока наши «Графики» обезличены в том смысле, что у них нет осей X и Y с соответствующими масштабами и отметками.  Давайте нарисуем ось X с временными отметками TickerMarkView на ней. Сами отметки TickerMarkView представляют собой очень простой View с вертикальным стеком VStack, в котором размещены Path и Text:

Совокупность отметок на временной оси для определенного «набора Графиков» chart : LineSet формируется в TickerView в соответствие с выбранным пользователем временным диапазоном rangeTime и приблизительным количеством отметок estimatedMarksNumber, которые должны оказаться в поле зрения пользователя :

Для расположения «бегущих» отметок времени используем ScrollView и горизонтальный стек HStack, который будет смещаться по мере изменения временного диапазона rangeTime.

В TickerView мы формируем шаг step, с которым появляются отметки времени TimeMarkView, основываясь на заданном временном диапазоне rangeTime и ширине экрана widthRange…

… а затем выбираем отметки времени c шагом step из массива chart.xTime с помощью индексов indexes.

Собственно ось X — горизонтальную прямую — мы наложим overlay …

.overlay(XAxisView(color: self.colorXAxis))

… на горизонтальный стек HStack, с отметками времени TimeMarkView, который мы продвигаем с помощью offset:

.offset(x: self.indent - scaleTime * CGFloat(self.rangeTime.lowerBound))

Кроме этого, мы можем задавать цвета самой оси X — colorXAxis, и отметок — colorXMark :

YTickerView — ось Y с отметками и сеткой.

Этот View рисует ось Y с цифровыми отметками YMarkView. Сами отметки YMarkView представляют собой очень простой View с вертикальным стеком VStack, в котором размещены Path (горизонтальная линия) и Text с числом:

Совокупность отметок на  оси Y для определенного «набора Графиков» chart формируется в YTickerView . Диапазон значений rangeY вычисляется как объединение диапазонов значений всех «Графиков», входящих в данный «набор Графиков» с помощью функции rangeOfRanges. Приблизительное количество отметок на оси Y задается параметром estimatedMarksNumber :

В YTickerView мы отслеживаем изменение диапазона значений «Графиков» rangeY. Собственно ОСЬ Y — вертикальную прямую — мы накладываем overlay на наши отметки…

.overlay(YAxisView(color: self.colorYAxis))

Кроме этого, мы можем задавать цвета самой оси Y — colorYAxis, и отметок — colorYMark:

RangeView — настройка временного диапазона  с помощью  «mini-map».

Самой подвижной частью нашего пользовательского интерфейса является настройка временного диапазона ( lowerBound, upperBound) для отображения «набора Графиков»:

RangeView — это своеобразный  mini — map для выделения  определенного временного участка  с целью более подробного рассмотрения» набора Графиков» в других Views.

Как и в предыдущих View, исходными данные для RangeView  являются:

• сам «набор Графиков» chart: LineSet (значения Y),
• высота height «мини — мэп» RangeView,
• ширина widthRange «мини мэп» RangeView,
• отступ indent «мини мэп» RangeView.

В отличие от других рассмотренных выше Views, мы должны изменять с помощью жеста DragGesture временной диапазон ( lowerBound, upperBound) и тут же видеть его изменение, поэтому настраиваемый пользователем временной диапазон (lowerBound, upperBound), с которым мы будем работать, хранится в изменяемой переменной @EnvironmentObject var userData: UserData:

Любое изменение переменной var userData приведет к перерисовке всех Views, зависящих от него.

Главным действующим лицом в RangeView является прозрачное «окно», положение и размер которого регулируются пользователем с помощью жеста DragGesture:

1. если мы используем жест внутри прозрачного «окна», то изменяется ПОЛОЖЕНИЕ «окна» вдоль оси X, а размер его не изменяется:

2. если мы используем жест в левой затемненной части, то изменяется только ЛЕВАЯ ГРАНИЦА «окна» lowerBound, позволяя уменьшаться или увеличиваться  ширине прозрачного «окна» :

3. если мы используем жест в правой затемненной части, то изменяется только ПРАВАЯ ГРАНИЦА «окна» upperBound, позволяя уменьшаться или увеличиваться  ширине прозрачного «окна» :

RangeView состоит из 3-х основных очень простых элементов: двух прямоугольников Rectangle () и изображения Image, границы которых определяются свойствами lowerBound и upperBound из @EnvironmentObject var userData: UserData и регулируются с помощью жестов DragGesture:

На эту конструкцию мы «накладываем» (overlay ) уже знакомое нам GraphsForChartView с «Графиками» из заданного «набора Графиков» chart:

Это позволит нам следить за тем, какая часть «Графиков» попадает в «окно».

Всякое изменение прозрачного «окна» ( его перемещение целиком или изменение границ), является следствием изменения свойств lowerBound и upperBound в userData в функциях onChanged обработки жестов DragGesture в двух прямоугольниках Rectangle () и изображении Image… 

Это, как мы уже знаем, автоматически приводит к перерисовке других Views ( в нашем случае «Графиков», оси X с отметками, оси Y c отметками и индикатора в СhartView):

Так как наш View содержит изменяемую переменную  @EnvironmentObject var userData: UserData , то для предварительных просмотров Previews, мы должны задать ее начальное значение с помощью .environmentObject(UserData()):

CheckMarksView — «скрытие» и показ «Графиков».

CheckMarksView представляет собой горизонтальный стек HStack с рядом checkBoxes для переключения свойства isHidden  каждого отдельного «Графика» в «наборе Графиков» chart:

CheckBox в нашем проекте может реализоваться либо с помощью обычной кнопки Button и называется CheckButton, либо с помощью имитирующей кнопки SimulatedButton.

Кнопку Button пришлось имитировать потому, что при размещении нескольких таких кнопок в List, расположенном выше по иерархии, они «отказываются» правильно работать. Это давняя ошибка, которая держится в Xcode 11, начиная с бэта 1 и до нынешней версии. В текущей версии приложения используется имитирующая кнопка SimulatedButton.

И имитирующая кнопка SimulatedButton, и настоящая кнопка CheckButton используют одно и то же View для своего «внешнего облика» — CheckBoxView. Это HStack, содержащий Text и Image :

Заметьте, что параметром инициализации CheckBoxView является  @Binding переменная var line: Line. Свойство isHidden этой переменной определяет «внешний облик» CheckBoхView:

При использовании CheckBoхView в SimulatedButton и в CheckButton необходимо использовать знак $ для line при инициализации:

Свойство isHidden переменной line переключается в SimulatedButton с помощью onTapGesture…

… а в CheckButton — с помощью обычного action для кнопки Button:

Заметьте, что параметром инициализации для SimulatedButton и CheckButton также является  @Binding переменная var line: Line. Поэтому при их использовании нужно применить $ в CheckMarksView при переключении переменной  userData.charts[self.chartIndex].lines[self.lineIndex(line: line)].isHidden, которая хранится в изменяемой глобальной переменной @EnvironmentObject var userData:

Мы сохранили в проекте неиспользуемый в настоящий момент CheckButton на тот случай, если вдруг Apple исправит эту ошибку. Кроме того, вы можете попробовать использовать CheckButton в CheckMarksView вместо  SimulatedButton и убедиться, что она не работает для случая композиции множества «наборов Графиков» ChartView с помощью List в ListChartsView.

Так как наш View содержит изменяемую переменную  @EnvironmentObject var userData: UserData , то для предварительных просмотров Previews, мы должны задать ее начальное значение с помощью .environmentObject(UserData()):

 

Комбинирование различных Views

Рассматривается в следующем посте.

Код находится на Github.