Material Design - пора обновляться. Coordinator, дубль два.⁠⁠

Привет, человеки!

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

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

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

Перед нами - элемент Coordinator. Я уже рассказывал о нем до появления сообществ, поэтому дублировать информацию, и засорять пост не буду. При желании, загляните в мой профиль.

Программировать мы будем на примере приложения Pikabu для Android - мое первое творение, выложенное на всеобщее обозрение на этом портале.

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

Пример, который я описываю, имеет собственные исходники на гитхабе, и представляет собой ознакомительный код с презентации Google I/O. На его основе вы можете повторить мои шаги.

https://github.com/saulmm/CoordinatorExamples

Итак, после создания активности, нам нужно рассмотреть, что нам необходимо координировать. На гифке присутствует ImageView + CircleImageView, TabLayout + текстовые поля + Toolbar. Дохрена. Вот как это выглядит в файле разметки:

- CoordinatorLayout

-- AppBarLayout

--- CollapsingToolbarLayout

---- ImageView

-----CircleImageView (отдельная библиотека)

------Toolbar

-------LinearLayout

--------TextView

-------/LinearLayout (закрыли)

---------TabLayout

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

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

Как выглядит это на практике, в эмуляторе (я заранее подготовил простую круглую картинку в формате png):

Верхняя часть экрана(до иконки) у нас не занята - туда мы затолкаем изображение, которое будем грузить из сети при помощи Picasso. Это отдельная (и довольно популярная) библиотека, которая пользуется невероятным спросом среди разработчиков.

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

Загружаем картинку:

Вот и все. Три строчки кода (не считая объявления imageview), и изображение будет загружено при посещении активности, а при повторном запуске оно подгрузится из кеша.

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

Нам необходимо создать два класса, для каждой из вкладок. Я не напрягал мозг, и назвал их Tаb1 и Tab2. Профит.

В коде ничего сверхъестественного нет, объявили класс, и назначили слой для него. Аналогично поступаем со второй вкладкой, только меняем названия.

Далее, нам в коде главной активности потребуется ViewPager и встроенный класс ViewPagerAdapter, которые обеспечат работу с вкладками.

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

Все шуршит, и скроллится вправо\влево.

P.S. на старых версиях Android (до API 21) нет понятия android:elevation, поэтому круглая картинка будет обрезаться пополам. Чтобы этого косяка избежать, я просто убрал ее для старых версий:

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

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

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