Как нарисовать кнопку громкости на холсте в Android

  Перевод   Ссылка на автора

Возможно, этот урок будет полезен для начинающих разработчиков Android.

Если вы хотите создать настоящий телевизионный пульт в своем приложении, вы можете создать различные типы кнопок (например, кнопку d-pad, кнопку громкости, кнопку канала и т. Д.).

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

Таким образом, эта «монолитная» кнопка должна работать как две кнопки, в зависимости от того, какая сторона была нажата.

Давайте посмотрим накод,

Шаг 1. Нарисуйте капсулу

1. Напишите метод рисования половины капсулы:

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

На этом этапе вы можете увидеть монолитную кнопку громкости, как показано ниже:

Шаг 2. Добавьте украшения

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

1. Нарисуйте значки

Определите два метода (первый для рисования значка «+», второй для рисования значка «-») и вызовите их вOnDraw (), добавив необходимые параметры:

2. Нарисуйте текст

Для добавления текста мы вычисляем центр этой кнопки и вызываем этот метод вOnDraw ():

На этом этапе мы получаем это изображение:

Шаг 3. Добавьте жизнь к кнопке

Теперь добавьте интерактивные эффекты.

Прежде всего, мы переопределяем методonTouchEvent (), Это помогает нам определитьACTION_UPа такжеACTION_DOWNМероприятия.

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

Важно позвонитьInvalidate ()метод. Если этот метод не вызываетсяOnDraw ()метод также не вызывается.

вOnDraw ()метод, внести изменения в рендеринг половины кнопок капсулы с использованием логических переменных.

Здесь мы просто изменим один параметр - Paint. Он перезаписывает предыдущее изображение, добавляя новое.

Шаг 4. Добавьте красоту

Используйте градиент:

И получаем окончательный результат:

Вы можете увидеть полный код, нажав на эту ссылку на GitHub: https://github.com/Klarry/volume-button

Надеюсь, этот урок кому-нибудь поможет. :)