Разработка дизайна приложения (3)
Продолжаем нашу работу над календарем дефекации. В прошлых записях мы создали дизайн простого блока числа, в этот же раз мы добавим для него вариации, создав дополнительные компоненты.
Ссылки на другие части
- Часть первая — организационная
- Часть вторая — создаем основу календаря
Давайте посмотрим, что у нас получается
Так как экран уже немного готов, я буду отсматривать результат в режиме презентации. Это удобно, потому что восприятию не мешают разметка и интерфейс редактора.
Для входа в этот режим жмем кнопку проигрывателя в верхней части экрана.
Окно презентации находится в отдельной вкладке.
Состояния заполнения
Для отображения ситуации за конкретный день будут отвечать две характеристики заполнения нашего круга — это, во-первых, цвет, а во-вторых, его высота.
Красный цвет — плохое самочувствие, зеленый — хороший. Градиент между ними будет показывать оттенки ощущений.
Чем выше наполнение, тем обильнее разродился пользователь в тот день.
Переходим на страницу «UI-кит».
Сейчас у нас есть один компонент под названием «Число». Продублируем его:
Новый элемент является экземпляром «Числа», а так как мы будем менять размеры одного из его прямоугольников, нам это не подходит. Чтобы убрать наследование, выбираем Detach instance в контекстном меню, либо жмем сочетание Command + Option + B.
Теперь это обычный элемент, который мы можем полностью изменять, и он не наследует ничего от «Числа».
Выберем в древе слоев «Заполнение» и изменим его высоту вот так:
Переименуем получившийся фрейм:
Продублируем его:
И изменим в нем высоту заполнения таким образом:
Переименуем его тоже.
И сделаем эти два фрейма компонентами (Cmnd + Option + K):
Итого мы имеем три компонента с разным наполнением.
Вернемся на страницу «Экран приветствия»:
Напоминаю, что здесь у нас собран календарь из одинаковых компонентов, и теперь мы заменим часть из них на новые.
Для этого выбираем элемент:
И переключаем параметр Instance:
Теперь выберем заполнение этого элемента и изменим его цвет (цвет у экземпляров компонента менять можно):
Смотрим на результат:
Аналогичным образом изменим еще несколько элементов:
Предполагаем, что часть чисел еще не отмечены, поэтому в этих числах мы скроем слой с заполнением. Для этого вернемся на страницу «UI-кит» и создадим еще один компонент: «Не заполнено».
Переходим на страницу с экраном и меняем остаток на «Не заполнено»:
Таким образом я создал несколько компонентов для разных состояний, каждому из которых я могу задать свой цвет, так как этот параметр не является неизменным для экземпляра компонента.
