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

Урок 10

На этом уроке мы изучим работу с анимацией и кастомными компонентами

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

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

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

Рис. 1 экран ANIMATION
Рис. 1 экран ANIMATION

На рисунке 1 изображен экран ANIMATION с множеством кнопок для разных типов анимации.

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

    fragment(ANIMATION, R.layout.fragment_anim)
        .navigator(handler(R.id.back, VH.OPEN_DRAWER),
            handler(R.id.alpha_0, alpha(R.id.my, 0.5f, 500)),
            handler(R.id.alpha_1, alpha(R.id.my, 1f, 500)),
            handler(R.id.scale_0, scale(R.id.my, -0.5f, -0.5f, 500)),
            handler(R.id.scale_1, scale(R.id.my, 0.5f, 0.5f, 500)),
            handler(R.id.transl_0, translation(R.id.my, 24, 24, 500)),
            handler(R.id.transl_1, translation(R.id.my, -24, -24, 500)),
            handler(R.id.set_0, set(alpha(R.id.my, 0.5f, 500),
                rotate(R.id.my, 90f, 500),
                scale(R.id.my, -0.5f, -0.5f, 500),
                translation(R.id.my, 24, 24, 500))),
            handler(R.id.set_1, set(alpha(R.id.my, 1f, 500),
                rotate(R.id.my, -90f, 500),
                scale(R.id.my, 0.5f, 0.5f, 500),
                translation(R.id.my, -24, -24, 500))))

        .component(MyComponent.class, model(JSON, "{\"my\":\"WOOO DePro\"}"),
            view(R.id.my), navigator(show(R.id.panel)));

А теперь объясним те новые конструкции, которые были использованы при его описании.

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

Экран ANIMATION

Анимация задается в навигаторе. Общий вид обработчика следующий: handler(R.id.view, метод_анимации(R.id.view_объекта _анимации, значение, [значение_2,] длительность)). Метод_анимации может быть: alpha (изменение прозрачности), scale (изменение масштаба), rotate (поворот вокруг центра), translation (перемещение), set (совокупность отдельных анимаций). View_объекта задает id элемента у которого анимируются свойства. Значение и значение_2 конечные значения параметра анимации. При этом значение_2 указывается для методов у которых изменяются параметры по осям x и y. Длительность - время изменения параметра в милисекундах.

Более подробная информация об анимации в библиотеке декларативного программирования DePro приведена в разделе"Анимация в DePro"

Кастомный компонен задается методом component(). Он аналогичен стандартному с одни отличием. Вместо типа компонента указывается класс кастомного компонента:

    .component(MyComponent.class, model(JSON, "{\"my\":\"WOOO DePro\"}"), 
        view(R.id.my), navigator(show(R.id.panel)))

Параметры model, view и navigator описываются стандартно.

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

    public class MyComponent extends BaseComponent {

        @Override
        public void initView() {
            componentTag = "MY_COMPONENT_";
            viewComponent = null;
            if (paramMV.paramView != null || paramMV.paramView.viewId != 0) {
                viewComponent = parentLayout.findViewById(paramMV.paramView.viewId);
            }
            if (viewComponent == null) {
                iBase.log("Не найдена View для MyComponent в " + multiComponent.nameComponent);
                return;
            }
        }

        @Override
        public void changeData(Field field) {
            if (field != null) {
                workWithRecordsAndViews.RecordToView((Record) field.value, viewComponent, this, clickView);
            }
        }
    }

Класс должен наследоваться от BaseComponent. У него должны быть обязательные методы: initView и changeData. В нашем случае в методе initView мы переменную viewComponent связываем с элементом разметки, указанным в методе view описания. В методе changeData мы связываем данные типа Field с viewComponent. Связывание осуществляется методом RecordToView. Он же привязывет к заданным элементам обработку навигатора. Параметр clickView - это метод BaseComponent в котором осуществляетсмя обработка навигатора.

В нашем случае данные поступают с JSON строки, а в качестве элемента куда эти данные заносятся служит обычный TextView. Можете поэкспериментировать как с моделью, так и с view. Например, можете в качестве view задать какой нибудь лайаут, а в нем разные элементы: TextView, ImageView. Данные можете задавать как в JSON строке, так и в URL.

Более подробная информация о написании кастомных компонентов в библиотеке декларативного программирования DePro приведена в разделе"Дополнительный материал"

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

На этом описание уроков окончено. Более полно с декларативным программированием можно познакомиться в следующем разделе "Описание библиотеки DePro".



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