Отображение данных сервиса балльно-рейтинговой системы в мобильном приложении
Актуальность решения данной проблемы в контексте курса Научно-исследовательского семинара в магистратуре ФИИТ обуславливается необходимостью нахождения технической реализации решения данной проблемы для внедрения в выпускную-квалификационную работу магистра, которая является развитием идей выпускную-квалификационной работы бакалавра. В частности, в последней стал вопрос не только вывода на экран ряда двумерных массивов данных СБРС, но и предоставление возможности их редактирования, без которого полезность ВКРб значительно снижается. Поскольку в рамках ВКРб данный вопрос полноценно решить не удалось, он перетёк в ВКРм. Кроме вышеописанного, имеет место ограничение по используемым элементами интерфейса, накладываемые фреймворком Xamarin Forms.
Макеты
Углубляя материал одной из прошлых статей о концепции страниц в Xamarin, рассмотрим возможные макеты страниц, которые предоставляет фреймворк.
StackLayout
Объект StackLayout упорядочивает элементы в одномерном стеке: по горизонтали или по вертикали. Свойство Orientation задает направление элементов, а ориентация по умолчанию — Vertical. StackLayout обычно используется для упорядочения подраздела пользовательского интерфейса на странице.
AbsoluteLayout
Объект AbsoluteLayout используется для размещения и изменения размеров элементов с помощью явных значений или значений относительно размера макета. Значение положения указывается в левом верхнем углу дочернего угла относительно левого верхнего угла AbsoluteLayout.
AbsoluteLayout следует рассматривать как макет специального назначения, который будет использоваться только в том случае, если можно наложить размер дочерних элементов или если размер элемента не влияет на расположение других дочерних элементов. Стандартным применением этого макета является создание наложения, которая охватывает страницу с другими элементами управления, что может защитить пользователя от взаимодействия с обычными элементами управления на странице.
RelativeLayout
Объект RelativeLayout используется для размещения и изменения размеров элементов относительно свойств макета или элементов того же уровня. По умолчанию элемент размещается в левом верхнем углу макета. RelativeLayout можно использовать для создания пользовательских интерфейсов, которые масштабируются пропорционально по размеру устройств.
Grid
Объект Grid используется для отображения элементов в строках и столбцах, которые могут иметь пропорциональные или абсолютные размеры. Строки и столбцы сетки указываются с RowDefinitions помощью свойств и ColumnDefinitions.
FlexLayout
FlexLayout аналогично StackLayout тому, что отображает дочерние элементы в стеке по горизонтали или по вертикали. FlexLayout, однако может также заключить свои дочерние элементы, если слишком много подходит для одной строки или столбца, а также обеспечивает более детализированный контроль над размером, ориентацией и выравниванием дочерних элементов.
ScrollView
ScrollView — это макет, который способен прокручивать его содержимое. Класс ScrollView является производным от класса Layout, и по умолчанию прокручивает его содержимое по вертикали. ScrollView может иметь только один дочерний элемент, хотя это может быть и другие макеты.
Списки
В дальнейшем, будет показано использование трёх из этих макетов, однако, кроме базовых макетов, для представления данных балльно-рейтинговой системы, реализуемой СБРС, необходимы списки, поскольку ими и аналогами представлены многие данные в сервисе.
CarouselView
CarouselView представляет собой представление для представления данных в прокручиваемом макете, где пользователи могут перемещаться для перемещения по коллекции элементов. По умолчанию CarouselView элементы отображаются на горизонтальной ориентации. На экране будет отображаться один элемент с жестами прокрутки, приводящими к пересылке и обратной навигации по коллекции элементов. Кроме того, можно отображать индикаторы, представляющие каждый элемент в CarouselView.
CollectionView
Представление CollectionView служит для вывода списков данных с различными спецификациями макета. Она нацелена на предоставление более гибкой и производительной альтернативы ListView . Например, на следующих снимках экрана показан объект CollectionView , использующий вертикальную сетку двух столбцов и допускающий множественный выбор.
ListView
ListView представляет собой представление для представления списков данных, особенно длинных списков, требующих прокрутки.
TableView
TableView — Это представление для отображения прокручиваемых списков данных или вариантов выбора, где имеются строки, которые не используют один и тот же шаблон. В отличие от ListView, не имеет концепции ItemsSource , поэтому элементы должны добавляться вручную в качестве дочерних элементов.
Применение
Исходя из всего вышеописанного, наиболее подходящим решением стало применение нескольких ListView, находящихся внутри StackLayout и навигационной обертки TabbedPage, внутри которых задаётся кастомный вид элемента и источник данных со списком элементов и заданными заголовками и футерами. Внешняя обёртка TabbedPage обуславливается необходимостью переключения между двумя наборами данных в рамках одной дисциплины - баллы и посещения. StackLayout используется как базовый макет, не требующий задания абсолютного положения и использующий незначительное количество ресурсов. Самым нагруженным является ListView, который реализует возможности пролистывания ScrollView, для него определены заголовок, шаблон элемента и футер. В них используется Grid для расположения элементов блока в необходимой структуре.
