В помощь мобильному разработчику

Таймлайн на Xamarin.Forms

Александр Алексеев

Макет, на который я не раз смотрю почти каждый день, — это график выполнения работ. Он полезен для таких вещей, как графики транспортировки или распорядки учебных занятий. Итак, давайте составим простой макет для графика работ при помощи ListView с колонтитулами и настраиваемым ViewCell.

iOS Timeline

Android Timeline

Структура страницы

Эта страница является простым ListView, и ничего сложного в ней нет. Я отключил разделители (Separators). И настроил RowHeight таким образом, чтобы было поинтереснее.

 

Кроме того, Вы можете заметить, что ItemTapped у меня подключен, хотя это мало на что влияет:

 

Он просто отключает строку от выбора, главным образом потому, что все выглядит довольно плохо, когда выбрана одна из строк… но, конечно, в зависимости от макета, возможно, потребуется выполнить навигацию в стиле отношения «один ко многим» (Master / Detail).

Header

Если требуется, чтобы что-то отображалось над ListView и оно также прокручивалось с ListView, используйте Header.

Совет: Что бы вы ни делали, не ставьте ScrollView вокруг всей страницы. Если получатся вложенные контейнеры прокрутки (например, ScrollView с ListView внутри), то будет сплошное расстройство. Вместо этого, лучше использовать Header.

Что же касается этого нашего Header, то он всего лишь простая компоновка стека с некоторыми метками и небольшим количеством заполнений.

 

Footer

Внизу списка мы только что поместили изображение. Не по какой-то особо веской причине, а просто чтобы немного оживить страницу и показать, как работает Footer. Вы можете легко избавиться от изображения и тогда получится красивый макет; я просто подумал, что надо его сюда включить, чтобы развить идею Header/Footer.

В нашем случае Footer содержит сетку с двумя строками. Настоящее фоновое изображение Footer.png занимает обе строки. Кроме того, здесь есть прозрачное изображение с градиентом от прозрачного к белому, которое накладывается на первую строку. Что, по сути, просто создает эффект затухания для изображения.

 

ViewCell

Самое интересное же происходит во ViewCell, что определяет, как будет выглядеть каждая строка.

В сущности это всего лишь простая сетка с тремя столбцами и двумя строками.

GridLayout

И единственная действительно интересная ее часть — это настоящие линии и окружности, которые формируют временную шкалу. Это достигается при использовании тонкого вертикального BoxView, который заполняет высоту ViewCell. Наложение в первой строке — это изображение окружности. Здесь нет ничего сверхъестественного.

Сейчас можно заметить, что в нем используется ValueConverter для свойства IsVisible, что своего рода хитрость, которая нужна для того, чтобы линия не отображалась в последней строке. Наш объект модели (который, вероятно, будет ViewModel в реальном приложении) обладает свойством IsLast, в котором установлено значение true для последней строки. И кроме того, у нас есть NotBooleanConverter с присвоенным знанием IsVisible у линии, так что линия не отображается в последней строке. Кажется, получилось слегка неказисто, но ничего лучшего ко мне в голову на этот раз не пришло.

 

Подведение итогов

Таким образом, при помощи ListView мы получили простую временную шкалу. И она отлично работает.

Ниже приведены ссылки, перейдя по которым можно получить дополнительные сведения о некоторых методах:

Как бы сказал некто с YouTube: Напишите в комментариях, понравился ли Вам этот материал: 🙂 Кроме того, если Вам известны какие-либо макеты, о которых может быть интересно рассказать непременно сообщите мне о них.

И да, Вы можете забрать полный код проекта на https://github.com/kphillpotts/XamarinFormsLayoutChallenges

Кроме того, ознакомьтесь с некоторыми другими макетами в Xamarin.Forms Layout Challenges.

Счастливого макета!

Автор: Kym Phillpotts
ИсточникKymPhillpotts.com

Александр Алексеев
Александр Алексеев

Xamarin – разработчик. Работаю с .NET платформой с 2012 года, программирую в основном с использованием C#.
За это время успел поработать с ASP.NET, Entity Framework, MSSQL, Git

UISegmentedControl

Написать ответ