Создание android-компонента. Круглая слайд-кнопка. Часть 1 — общий функционал.

Создание android-компонента. Круглая слайд-кнопка. Сага в 3х частях:

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

Давно мне не давали покоя кнопки приема/отклонения звонка или будильника/таймера в моем Samsung Galaxy S5 — круглая кнопочка, при нажатии на нее, из нее вылезает полупрозрачный расширяющийся круг. А когда тянешь палец в сторону — за ним тянется еще один расширяющийся круг. Дотащив второй круг до границы первого вызываем срабатывание кнопки. А если не дотащить до границы и отпустить, то оба круга плавно сожмутся и исчезнут. Как это выглядит в натуре видно на миниатюре к этому посту.

Вот, не давала мне такая кнопка покоя и захотелось поиметь у себя в программе такую же. Поиск по интернетам результата не дал. Я даже не знаю, может это стандартная кнопка, в общем, решил сделать сам.

Для начала определимся как это сделать. Компонент будем строить как производный класс от RelativeLayout. Это нам даст возможность размещения элементов в центре отведенного нам места на экране.

Итак. Берем RelativeLayout, задаем ему квадратные размеры, помещаем в центр три ImageView: в первом, небольшом, будет изображение кнопки, в двух остальных — расширяющиеся круги. Вот разметка:

Теперь начинаем созидать класс нашего компонента. Класс назовем MySlideButton. Для начала — конструктор:

Как видно, в конструкторе ничего не происходит, кроме вызова всего одного метода — init(), в который передаются контекст и атрибуты. В этом методе происходит инициализация элементов нашего компонента:

Все примитивно просто. Находим наши элементы разметки и запоминаем их в членах класса.

Теперь надо нарисовать сами круги. Делать это в теле метода init() нельзя — на этапе создания компонента системой мы еще не знаем его размеров. Для создания кругов лучше всего подойдет метод onMeasure(int widthMeasureSpec, int heightMeasureSpec). Этот метод вызывается системой для настройки размеров. Уж в нем-то и можно создать необходимые круги:

Тоже ничего сложного — в режиме редактора, т.е. в Android Studio — будет отображаться 2 фиксированных круга разного диаметра, чтобы было видно, как это будет. В рабочем режиме создаются круги полного размера, на всю рабочую область. Поскольку до этого оба ImageView были скрыты в методе init(), то изначально круги видны не будут.

Теперь — само действо. Обработка тыканья пальцАми и слайд. Этим займется метод onTouch(),который мы назначили прослушивателем событий касания для ivIcon в методе init():

Все просто: Нажатие на иконку кнопки — вызываем growBackgroundCircle(), что вызовет медленное надувание круга-подложки, отпускание иконки — вызываем shrinkCircles(), что заставит сдуваться и круг-подложку, и круг-слайдер, если он будет виден. При перетаскивании иконки пальцем — вычисляем текущий масштаб для круга-слайдера и устанавливаем его, тем самым круг будет следовать за пальцем.

Что касается надувания круга-подложки — тут тоже все просто, воспользуемся банальной анимацией:

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

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

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

Для лучшей настраиваемости, параметры анимации вынесены в члены класса:

На текущем этапе, уже можно смотреть как это работает. Создаем в нашем проекте Activity, и его Layout, куда и добавляем наш новый компонет:

ru.droidtips.test.MySlideButton — это название класса в моем пространстве имен. У вас это будет по-другому.

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

Продолжение следует.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *