PopupWindow который указывает на view вызывающий его

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

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

Никакие библиотеки нам в этот раз не понадобятся, никакие расширения дополнительные тоже. Использовать мы будем стандартный ListView для создания списка и обычный ArrayAdapter для написания адаптера для списка. Единственное что нам понадобится так это минимальная версия проекта minSdkVersion 19, так как для использования showAsDropDown() нужно иметь минимальный SDK 19.

Проектируем приложение с MVVM

Я уже писал про ViewModel у себя в блоге, но я писал немного про другое использование данного класса, там мы рассматривали сохранение состояния данных при вращениии экрана что бы мы не теряли данные. Сейчас же мы поговорим про паттерн MVVM который используется для визуального упрощения кода и устанавливает правила для каждого класса выполнять свою работу.

Что же такое MVVM? Вот выдержка из википедии:

Model-View-ViewModel (т.е. MVVM) — это шаблон архитектуры клиентских приложений, который был предложен Джоном Госсманом (John Gossman) как альтернатива шаблонам MVC и MVP при использовании технологии связывания данных (Data Binding). Его концепция заключается в отделении логики представления данных от бизнес-логики путем вынесения её в отдельный класс для более четкого разграничения.

Affter Effect анимация с помощью Lottie

Недавно пришлось столкнуться с такой штукой как работа с анимацией которая была экспортирована из Affter Effect. Она была красивая, все переливалось, но реализовать такое стандартными методами было просто нереально, но потом мне расказали про Lottie которая была создана AirBnb для своих нужд, но в дальнейшем выпущена в публичный доступ для всех желающих. Эта библиотека позволяет проигрывать анимации экспортированные как json файлы из Affter Effect буквально в пару строчек кода.

Это очень крутая штука и очень мощная, анимаций уже готовых в свободном доступе просто куча. Найти их можно на сайте lottiefiles.com. Для примера я взял один пример и решил его запустить в этом приложении. Анимация добавляется в проект в папку assets, и прописывается в дальнейшем в вашем layout файле, а в коде можно запускать уже настройки, такие на пример как проигрывание анимации сразу при старте приложения, или цикличное проигрывание без остановки, или на пример запуск по кнопке. Для примера мы сделаем элементарное приложение в котором будем по клику на вью запускать анимацию. Для начала нам нужно создать пустой проект, в котором добавим библиотеку Lottie.

AutoPlayRecyclerView для проигрывания видео в списке автоматически

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

В случае с этой статьей, я просто приведу пример своего кастомного RecyclerView который я использовал для проигрывания видео в списке. Но так же хочу привести примеры уже готовых решений, таких на пример как Toro Player, который реализован на основе ExoPlayer'a и который выполняет свою работу просто отлично, но к сожалению я не смог найти ему применения у себя в проекте. Но сразу скажу что я советую его всем кто хочет сделать у себя автоплей, стандартный с одним плеером в айтеме — это то что вам нужно. 

Мой же пример ориентирован больше на людей которые любят собственные решения и которые хотят понимать что происходит у них в приложении и как это все работает. Опять же, сразу скажу что вариант который я использую в этой статье не мое личное решение, я его нашел на просторах Github'a, и при чем не у одного человека, по этому я не могу утверждать кому оно пренадлежит, но к сожалению оно было изобретено до меня и я могу только им пользоваться. :) 

Пример использования ViewModel

Что-то побудило меня написать статью про эту новую фичу. Погуглив пару секунд я наткнулся на замечательную статью на Medium'e, пример который я привожу тут взят оттуда, только с небольшим моим дополнением, а так по сути это реплика статьи с Medium'a…

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

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

GalleryView своими руками

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

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

Создание корзины для мобильного интернет магазина

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

Вот такой у нас будет мини магазин, в котором у нас будет два экрана. Простенько и красивенько, дак еще и с дизайном :) 

Форматируемый EditText для номеров телефона или email'ов

Как-то на одном проекте нужно было сделать формат ввода телефона прям очень жестким, что бы оно не давало пользователю двинуться ни вправо ни влево. Полазив по интернету нашел кучу либ которые умеют красивенько это делать, но ради одной строчки не хотелось подключать целую библиотеку и начал я еще по интернету лазить и набрел на какой-то репозиторий на котором я отрыл прям кусок кода — кастомного EditText который умеет все тоже самое что и либы, только это все в одном файле и его можно редактировать как душе угодно!

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

Анимирование кнопка с прогрессом долгого нажатия

Бывают не тривиальные задания на подобии создания простых вьюх которые расширяют функционал приложения, добавляют какую-то изюминку, так вот в нашем случае у нас будет кнопка по нажатию и удержанию на которую у нас будет происходить заполнение кнопки, а по достижению конца кнопки анимация будет обнуляться, и будет отображаться сообщение о том что мы закончили задание. 

Кастомная CarouselView в домашних условиях

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

Для реализации карусели я использовал готовую библиотеку CarouselView но немного ее изменив.

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

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