Material Design - Пора обновляться (Часть 3)⁠⁠

Привет, пикабуняне!

Сегодня опять выдался выходной, а значит пора дальше обновлять приложения.

В предыдущем посте мы нарисовали стартовый экран для приложения, используя CardView и развитую мышцу мозга. Сегодня будем продвигаться еще глубже, и обновим экран каталога - самое масштабное место в практически любом приложении.

Использовать будем наработки по CardView, познакомимся с элементом Coordinator, и бонусом я немножко напишу про использование базовой анимации в приложении.

Первым делом создаем активность в студии. Использовать будем Scrolling Activity:

Перед тем, как продолжить, немного теории.

Coordinator Layout - слой, который как ясно из названия, координирует действия дочерних элементов, которые он содержит (обеспечивает анимацию при прокрутке, появление и изчезание отдельных слоев, меню и вкладок). Он был анонсирован вместе с Android 5.0, и с той поры пользуется популярностью.

Реализаций для этого компонента масса, главное фантазия.

В Гуглдоках можно найти следущий пример работы, его мы и будем повторять:

После создания активности мы получаем слой, с визуально большим размером Toolbar'а.

Мы сделаем его еще больше, потому что будем загружать туда изображение. Для этого меняем значение:

android:layout_height="app_bar_height"

на

android:layout_height="280dp"

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

Лезем на уже известный сайт http://www.freepik.com, вводим поисковые запросы:

- Appliances (Бытовая техника)

- Material Design

В итоге имеем два изображения:

Используя графический редактор, редактируем два этих изображения, чтобы в приложении название "Каталог" и стрелка назад помещались в разноцветных блоках, и были читабельны:

Теперь засовываем это в студию, смотрим на эмуляторе:

Теперь переходим к наполнению самого каталога. Так как у нас каталог представлен в виде бытовой и цифровой техники, мы быстренько разбрасываем его на основные категории, по нажатию на которую будет раскрываться список с подпунктами.

Берем куски кода CardView из предыдущего занятия экрана, загружаем нужные иконки на https://design.google.com/icons/, и получаем следующее:

Отлично. Теперь по нажатию на один из пунктов, внутри карточки должен появиться список из подкатегорий. Я сделаю подобный список для одного элемента, принцип будет везде одинаков.

Создаем новый слой (совсем отдельный), рисуем в нем список:

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

После того, как мы все это нарисовали, нам надо затолкать этот список в карточку, через дополнительный атрибут <include/> 

Этот атрибут позволяет вставлять в слой дополнительные слои, который, в свою очередь, находятся внутри слоя. Сложно? Обрисую как это выглядит:

- LinearLayout (корневой слой)

-- android.support.v7.widget.CardView (карточка)

--- RelativeLayout (корневой слой внутри карточки)

---- include (вставляем отдельный слой, внутри него своя разметка)

--- /RelativeLayout (закрываем слой внутри карточки)

-- / (закрываем все остальное)

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

Для этого задаем ему атрибут android:visibility="gone", что означает, что этого слоя не будет видно, пока мы не вызовем его программно. Теперь он будет скрыт, и будет ждать команды на отображение.

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

За нее отвечает две строчки кода:

Animation anim = AnimationUtils.makeInAnimation(this, true);

tv1.startAnimation(anim);

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

Методов опять таки очень много, я приведу лишь некоторые:

Ударение о поверхность:

anim.setInterpolator(new BounceInterpolator());

Ускорение:

anim.setInterpolator(new AccelerateInterpolator());

Замедление:

anim.setInterpolator(new DecelerateInterpolator());

Ускорение с замедлением:

anim.setInterpolator(new AccelerateDecelerateInterpolator());

Также можно комбинировать почти все анимации.

В итоге, на рабочем устройстве получаем красиво оформленный каталог. Над ним еще прийдется очень долго работать, и писать код, но начало положено.

Спасибо, что дочитали до конца! В следующий раз мы будем интегрировать в программу стороннюю библиотеку для просмотра web страниц, а также я немного расскажу о монетизации приложения в целом.

P.S. мои дорогие подписчики! Если я начал выкладывать котиков, значит школота интеллигенция портала жестом однокнопочного рукоблуда руки поставила минусы, и я восполняю баланс в мире =)