Введение
Общее описание
Структура приложения
Уроки
Урок 1
Создание приложения, экраны, меню, список, локализация
Урок 2
Просмотр видео (youtube), панель ввода
Урок 3
Карты, PlusMinus, пользовательская обработка экранов
Урок 4
Завершение разработки, закрепление материала
Урок 5
Интро, авторизация, фото
Урок 6
Боковое меню, горизонтальный список, пагинация, раскрывающийся список, баркод-сканер, распознавание речи, поиск, листание страниц
Урок 7
Работа с базами данных SQLite, свайп, componentDateDiapason
Урок 8
Спиннер, календарь, пиккер и события
Урок 9
Работа с пуш сообщениями, BadgeTextView
Урок 10
Анимация, кастомные компоненты
Описание библиотеки
Приложения

Урок 8

На этом уроке мы изучим спиннер, календарь, пиккер и события

Постановка задачи (задание урока)

Нужно описать экран на котором показывается список секций по фитнес клубам.

Его дизайн приведен на следующих рисунках:

Рис. 1 экран FITNESS
Рис. 1 экран FITNESS
Рис. 2 экран PICK_TIME
Рис. 2 экран PICK_TIME
Рис. 3 экран PICK_TIME
Рис. 3 экран PICK_TIME

При выборе другого клуба должен показываться список секций выбранного клуба. При клике на секцию осуществляется переход на экран PICK_TIME. На экране PICK_TIME можно выбрать дату занятий. При этом в пикере показываются список свободного времени начала занятий на этот день. При клике на кнопку отправить данные отправляются на сервер, после получения положительного ответа показывается всплывающая панель с сообщением.

Описание API

Список клубов задается строкой (R.string.clubs): [{"clubId":"1","title":"Клуб 1"},{"clubId":"2","title":"Клуб 2"}]

Список секций по клубу: URL depro/cron/fitness, метод GET, параметр "clubId".
Ответ 
[
    {
        "title":"SPA зона",
        "url":"depro/aura_fit/icon_service_spa.png"
    },
    {
        "title":"Автомойка",
        "url":"depro/aura_fit/icon_service_carwash.png"
    },
    
    . . .
]

Список свободного времени:
    URL depro/cron/freetime, метод GET, параметры "clubId,fit_id,date".
Ответ:
    {"worktime":["08:00","08:15","08:45","09:00","09:15", . . . ,"19:45"]}

Отправка заказа на сервер: URL depro/cron/fit_time, метод POST Параметры: "clubId,fit_id,date,worktime".
Данные отправляемые:
    {"clubId":"1","fit_id":"28","date":"1574463600000"}
Ответ 
{"result":"oK"}

Описание экранов:

    fragment(FITNESS, R.layout.fragment_fitness)
        .navigator(handler(R.id.back, VH.OPEN_DRAWER))
        .component(TC.SPINNER, model(JSON, getString(R.string.clubs)),
            view(R.id.spinner, R.layout.item_spin_drop, R.layout.item_spin_hider))
        .list(model(Api.FITNESS, "clubId"),
            view(R.id.recycler, R.layout.item_fitness),
            navigator(start(PICK_TIME))).eventFrom(R.id.spinner);

    activity(PICK_TIME, R.layout.activity_pick_timer, "%1$s %2$s", "club_name,name_fit")
        .navigator(back(R.id.back))
        .component(TC.PANEL_ENTER, model(Api.FREEE_TIME, "clubId,fit_id,date"), view(R.id.panel),
            navigator(handler(R.id.send, VH.CLICK_SEND, model(POST, Api.SEND_FIT_TIME,
                "clubId,fit_id,date,worktime"),
                after(show(R.id.ok))))).eventFrom(R.id.calend)
        .calendar(R.id.calend, "date");

Если все введено правильно, то при старте приложения будет отображаться (и работать) экраны FITNESS и PICK_TIME. А теперь объясним те новые конструкции, которые были использованы при его описании.

Объяснение работы новых компонентов

Экран FITNESS

Новым для нас является компонент типа SPINNER. Его описание стандартно: в view указываются id элемента разметки Spinner и лайоуты айтемов, которые будут показаны в выпадающем меню и в заголовке спиннера. При выборе нового элемента выпадающего списка обновляются значения глобальных параметров по переменным соответствующей записи. Также об этом сообщается всем компонентам экрана которые запросили посылать им соответствующие события

Нужно обратить внимание дополнительный функционал ( eventFrom(R.id.spinner) ) компонента типа list. Он указывает id компонента который должен посылать сообщения в случае изменения своего состояния. При поступлении такого сообщения компонент типа list обновит свои данные. Таким образом при выборе нового клуба в спиннере будут обновлены данные в компоненте list.

Экран PICK_TIME

Новым для нас является компонент calendar. Описание календаря простое: указывается id элемента типа Calendar и имя параметра в который будет заноситься выбранная дата. При каждом выборе даты в календаре формируется новое значение параметра и сообщается всем компонетам экрана которые запросили посылать им соответствующие события. Таким образом, при выборе новой даты компонент PANEL_ENTER будет обновлять список свободного времени.

Также новым для нас является элемент разметки DrumPicker. Он отображает список выбора. В нашем случае это список свободного времени для записи на занятия. Подробно его работа описана в следующем разделе.

Если все было сделано правильно, то после запуска приложения будет работать весь функционал



Лучше пакета DePro может быть только искусственный интеллект
Задать вопрос
Отправить вопрос