Material Design - Пора обновляться. Coordinator + Material Search.⁠⁠

Привет, товарищи!

В сегодняшнем посте мы рассмотрим два вопроса по дизайну. Во первых, я покажу еще один пример по Coordinator, а также мы прокачаем строку поиска, в соответствии с гайдлайнами.

Полетели!

Для затравки покажу то, чего мы добьемся в конечном итоге:

Называется такое чудо flexible space. Общий принцип в в том, что по мере скроллинга пальцем изображение, загруженное в CollapsingToolbar'е, скрывается вместе с этой панелью.

Мы немного улучшим изображение, наложив на него фильтр. Таким образом оно будет иметь оттенок из нашей цветовой палитры.

Работать будем в приложении Pikabu Free, которое в скором времени получит индекс 2.3

Открываем студию, создаем активность, открываем слой xml:

Разметка в слое следующая (описываю только наш пример, мои кнопки и дополнительные виджеты туда не входят):

- CoordinatorLayout

-- AppBarLayout

--- CollapsingToolbarLayout

---- ImageView

----- Toolbar

( закрываем все слои в обратном порядке )

------ FloatingActionButton

Хотелось бы добавить, что к атрибуту ImageView мы добавляем параметр android:tint="#BB689F38", это наше будущее затемнение.

А у слоя CollapsingToolbarLayout параметр android:layout_height="300dp", это его общая ширина.

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

Проверяем. Откроем на реальном устройстве, предварительно загрузив изображение:

Отображается реальная ширина CollapsingToolbarLayout (300dp). Если будем скроллить, он спрячется вместе с FAB, и останется только Tollbar

Кроме самого фильтра прокачан и показ картинок. При каждом открытии программы рандомно загружается какая нибудь печенька, чтобы пикабунятам было не скучно.

Выглядит примерно так:

ШАГ 2 - ПОИСК

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

Пример такого поиска можно посмотреть в Google Chrome, при вводе адреса

Импортируем библиотеку в Gradle:

Вставляем в конце файла (XML) виджет поиска. Почему так? Так как поиск будет на весь экран, соответственно ему требуется match_parent на ширину и высоту, и он будет некорректно отображаться внутри других слоев

В коде нужно добавить три слушателя:

- setOnQueryTextListener (слушает нажатия на клавиатуру, и на кнопку подтверждения)

- setSearchViewListener (слушает состояния поиска - открыт / закрыт / неактивен)

- setOnItemClickListener (слушает нажатия на предыдущий поиск)

И вроде все. Компилируем все это дело, загружаем на устройство, проверяем:

Нажимаем на значок поиска. Он раскроется на весь экран с приятной анимацией:

На сегодня все, спасибо за интерес.

https://github.com/Mauker1/MaterialSearchView - библиотека поиска на гитхабе

https://github.com/saulmm/CoordinatorExamples - библиотека примеров MD, которые я описываю

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

Всем бобра!