SliderButton — реализация скользящей кнопки типа «Slide to unlock»

Точнее это не Slide to unlock, а скорее реализация ответа на звонок: кнопка по центру, которую можно сдвигать влево или вправо до конца экрана. Такой функционал может использоваться, например, при приеме звонка (принять/отклонить), при активизации напоминания (завершить/отложить) и тому подобное. Переделать это под Slide to unlock достаточно просто. Сразу скажу, что идея не моя, идея взята со StackOverflow, однако доработана мной в соответствии со своим видением того, как это должно работать.

Итак. Мне нужна кнопка по центру экрана, которую можно будет сдвигать влево или вправо, тем самым выбирая один из двух вариантов действия. Можно было бы заморочиться с ImageView, такая реализация тоже мне попадалась, однако больше всего мне понравился вариант модифицировать под это SeekBar. Этот компонент уже имеет на борту почти весь необходимый функционал, осталось лишь слегка подрихтовать.

Объясню для чего рихтовка: обычный компонент SeekBar — это полоса регулировки и слайдер. У компонента есть 2 возможности регулировки — перетаскивание слайдера и нажатие на саму полосу, по которой он бегает. Вот именно нажатие на полосу и есть то, что мне не понравилось — это нужно исключить. Штатного функционала у SeekBar для такого нет, поэтому и нужно создать свой компонент на основе SeekBar.

Приступаем:

Создаем субкласс SeekBar. Назовем его SeekButton:

Далее, в layout экрана добавляем наш новый компонент:

Тут в RelativeLayout есть два ImageView — это рисунки по краям экрана, чтобы юзер понимал, что будет, когда он перетянет ползунок в эту сторону.
И сам компонент. Главное тут — растянутость по горизонтали до match_parent, прозрачный цвет полосы SeekBar и иконка ползунка.

Далее, в коде Activity полключаем слушатель для нашего элемента:

Вот и все.

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

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