Android эффект при нажатии
Кнопки являются самым часто используемым элементом любого Android приложения. Сегодня мы немного расширим свои способности в области создания кнопок и сделаем анимированную кнопку.
Создаем новый проект, выбираем Blank Activity. Основные шаги создания будут следующими:
1) создаем интерфейс программы, состоящий всего то из одного элемента ImageView, который и будет играть роль кнопки;
2) создаем анимацию из набора изображений;
3) ну и напоследок кодим в MainActivity.java.
Начнем с работы с интерфейсом. Открываем файл activity_main.xml и добавляем туда элемент ImageView, задав ему определенные рамки, чтоб он в итоге не занимал нам весь экран:
Пока что Android Studio ругает нас на строчке android:background=»@drawable/anim_button», чтобы это исправить, переходим к выполнению второго пункта плана: создание анимации. Как вы наверное уже догадались, анимация в приложении будет представлена xml файлом anim_button.xml. Перед тем, как его создать, добавим в проект приложения несколько изображений, которые и будут составлять анимацию. Я не слишком крутой дизайнер (мягко говоря), поэтому если вам не понравиться мой набор картинок, можете подобрать что-нибудь свое. Изображения нужно поместить в папке res/drawable проекта.
Теперь в этой же папке res/drawable создаем новый xml файл по имени anim_button.xml и добавим в него наши картинки:
Команда duration регулирует продолжительность показа одного изображения в миллисекундах, можете подобрать оптимальное для вас значение.
Переходим к работе в файле MainActivity.java. Нам нужно объявить и инициализировать переменные ImageView и AnimationDrawable, настроить файл anim_button.xml в качестве анимации для элемента ImageView и настроить запуск самой анимации при нажатии на элемент ImageView. Чтобы все это сделать, добавляем следующий код:
Ну вот и все на этот раз, запускаем и смотрим что получилось:
Кнопочка с ImageView работает нормально. Чтобы анимация повторилась 1 раз, в строке
animation.setOneShot(false) нужно выставить значение true.
Наша анимация не сильно красива, поэтому сложно увидеть ей применение, но если создать красивую анимацию, то использование такого элемента в интерфейсе программы может оказаться очень полезным и приятным. Кстати, похожую работу мы выполняли в уроке по созданию фреймовой анимации.
Источник
Анимация Floating Action Button в Android
С момента возникновения концепции Material design одним из самых простых в реализации элементов стала плавающая кнопка действия — FAB, Floating Action Button. Этот элемент быстро обрёл широчайшую популярность среди разработчиков и дизайнеров. В этой публикации мы рассмотрим, как можно анимировать FAB и сделать её интерактивной. Но сначала разберём, как вообще добавить этот элемент в ваш проект.
FAB выглядит как цветной круг в правом нижнем углу экрана. Если в Android Studio создать новый проект Blank Activity, то в нём автоматически будет сгенерирована плавающая кнопка действия.
Floating Action Button
FAB может быть одного из двух размеров: 56 dp (по умолчанию) или 40 dp. Если вы хотите подробнее изучить принципы использования FAB в дизайне приложения, то обратите внимание на официальные гайдлайны Google.
В самых свежих Android-приложениях FAB реагирует на прокручивание списка элементов. Было бы логичнее скрывать её во время прокручивания. Вот что имеется в виду:
Для отображения этой анимации создадим recyclerView , благодаря которому FAB реагирует на прокручивание. Сегодня доступно немало библиотек, позволяющих добиться этого с помощью пары строк кода. Например:
Здесь использован класс FloatingActionButton.Behavior() , чья основная задача, согласно официальной документации, заключается в перемещении видов FloatingActionButton , чтобы ни один из Snackbar их не перекрывал. Но в нашем случае этот класс является расширенным, так что мы можем его использовать для реализации нужного поведения кнопки.
Что же делает данный класс? При каждой инициализации прокрутки вниз метод onStartNestedScroll() возвращает значение true. После этого метод onNestedScroll() отображает или прячет кнопку, в зависимости от её текущей видимости. Конструктор класса FloatingActionButton.Behavior() является важной частью описанного поведения вида (view) и извлекается из XML-файла.
Добавим в FAB атрибут layout_behavior , содержащий название пакета, а в конце — имя класса. Иначе говоря, в атрибуте должно быть указано точное размещение класса в проекте. Например:
Анимация выглядит хорошо, но можно сделать ещё лучше. Например, чтобы кнопка уходила за пределы экрана во время прокрутки — это более реалистичное поведение:
Здесь используется та же логика, что и в предыдущем варианте, за исключением способа исчезновения FAB. Анимация довольно проста. Кнопка уходит вниз с помощью LinearInterpolator. Расстояние, которое ей нужно пройти, равно высоте кнопки плюс ширина нижнего поля.
Обратите внимание, что в выражениях if отсутствуют проверки View.VISIBLE и View.GONE , поскольку в данном случае вид не скрывается, а лишь уплывает за пределы экрана.
Меню из FAB’ов
Существует немало приложений, авторы которых создали красивые и хорошо работающие меню, состоящие из плавающих кнопок действия.
Давайте сделаем нечто подобное. Для начала создадим макет, содержащий три маленькие кнопки. Они невидимы и расположены в самом низу макета, под главной FAB. Содержимое fab_layout.xml:
Этот макет нужно включить в макет activity под главной FAB.
Теперь нужно добавить анимацию исчезновения и появления каждой из малых кнопок.
Примечание: здесь вы можете столкнуться с проблемой, связанной с отработкой нажатия на малые кнопки. Когда анимация завершается, реальное положение кнопки не меняется, перемещается только вид. Поэтому вы не сможете правильно обработать касание кнопки. Для решения этой проблемы можно настроить параметры макетов каждой кнопки с учётом их нового положения, и только потом выполнять анимацию перемещения вида.
Саму анимацию вы можете посмотреть в конце этой публикации. Порядок действий для всех кнопок один и тот же, различаются лишь координаты перемещения.
fab1 перемещается с помощью добавления в layoutParams полей справа и снизу, после чего инициируется анимация.
FrameLayout.LayoutParams layoutParams = (FrameLayout.LayoutParams) fab1.getLayoutParams();
layoutParams.rightMargin -= (int) (fab1.getWidth() * 1.7);
layoutParams.bottomMargin -= (int) (fab1.getHeight() * 0.25);
fab1.setLayoutParams(layoutParams);
fab1.startAnimation(hide_fab_1);
fab1.setClickable(false);
Процесс скрывания представляет собой обратное воспроизведение предыдущей анимации.
//Анимации одной из малых кнопок
Animation show_fab_1 = AnimationUtils.loadAnimation(getApplication(), R.anim.fab1_show);
Animation hide_fab_1 = AnimationUtils.loadAnimation(getApplication(), R.anim.fab1_hide);
Теперь создадим в папке res/anim/ файлы для каждой из анимаций. Делается это просто, но если у вас возникнут затруднения, то можете обратиться к документации.
Если вы посмотрите на тэг перевода (translate tag), отвечающий за движение вида, то увидите, что коэффициент перемещения (170% и 25%) соответствует коэффициентам, использованным при добавлении полей и извлечённым в Java-код.
Все вышеописанные шаги мы повторяем и для остальных малых кнопок. Различаются только коэффициенты перемещения: fab2 — 150% и 150%, fab3 — 25% и 170%.
Источник
Установить эффект нажатия кнопки в Android
Я новичок в разработке приложений для Android и понял, что, в конце концов, для конечного пользователя действительно важен пользовательский интерфейс приложения.
Я всегда стараюсь изо всех сил, когда дело касается пользовательского интерфейса, но у меня всегда возникают проблемы. В частности, одна из основных проблем, с которыми я всегда сталкиваюсь, и я не знаю, как исправить, заключается в том, что когда я устанавливаю пользовательский цвет фона или изображение для какой-либо кнопки, эффект щелчка исчезает. Итак, вы нажимаете кнопку, и хотя она, очевидно, работает, довольно неприятно видеть, как она ничего не делает графически.
Я хотел бы знать, есть ли способ вернуть исходный эффект или программно установить какой-либо эффект щелчка.
4 ответа
Допустим, у вас есть кнопка, TextView или любое другое представление. и вы хотите, чтобы он менял свой цвет во время события касания, а также что-то делал после щелчка:
А затем добавьте прослушиватель кликов:
Сохраните это как чертеж и установите в качестве фона:
Это всего лишь простой пример. Вы можете сами создавать более сложные.
Благодаря ответу Амира Хорева я понял, что мне действительно нужно. Я основал свое решение на его ответе, но вместо вызова метода setBackgroundColor () я использовал метод setColorFilter () вместо фона представления, чтобы вызвать как события ACTION_DOWN, так и ACTION_UP. Итак, теперь я могу установить цветовой фильтр для любой кнопки. Вот как окончательно выглядел код:
Я также написал такую функцию, как public void triggerActionDownEvent(Button button); , чтобы я мог вызывать эту функцию вместо того, чтобы писать весь предыдущий код для каждой кнопки. Теперь мне нужно будет следить за тем, чтобы одновременно нажималась не более одной кнопки.
Предлагаю программно настроить цвет или изображение. Ты можешь использовать:
Источник
Как установить эффект нажатия кнопки в Android?
В Android, когда я устанавливаю фоновое изображение на кнопку, я не вижу никакого эффекта на кнопке.
Мне нужен какой-то эффект на кнопке, чтобы пользователь мог распознать, что кнопка нажата.
Кнопка должна быть темной в течение нескольких секунд при нажатии, что мне делать для этого?
Этого можно достичь, создав файл XML с возможностью рисования, содержащий список состояний кнопки. Так, например, если вы создаете новый XML-файл с именем «button.xml» со следующим кодом:
Чтобы фоновое изображение оставалось затемненным при печати, создайте второй XML-файл и назовите его gradient.xml со следующим кодом:
В xml вашей кнопки установите фон как кнопку xml, например
Надеюсь это поможет!
Изменить: изменен приведенный выше код, чтобы на кнопке отображалось изображение (ВАШЕ ИЗОБРАЖЕНИЕ), а не цвет блока.
Это проще, когда у вас много кнопок с изображениями, и вы не хотите писать xml-файлы для каждой кнопки.
Создайте свой AlphaAnimation объект, который определяет, насколько будет эффект затухания кнопки, а затем позвольте ему начать в onClickListener ваших кнопках
конечно, это просто способ, не самый предпочтительный, просто проще
Вы можете просто использовать передний план для View достижения эффекта кликабельности:
Для использования с темной темой добавьте также тему в свою layout (чтобы эффект кликабельность был понятен):
Чтобы ваш элемент соответствовал внешнему виду системы, попробуйте сослаться на системный атрибут android:attr/selectableItemBackground в теге фона или переднего плана желаемого представления:
Используйте оба атрибута, чтобы получить желаемый эффект до / после уровня API 23 соответственно.
Или используя только одно фоновое изображение, вы можете добиться эффекта щелчка, используя setOnTouchListener
А если вы не хотите использовать setOnTouchLister , другой способ добиться этого —
просто хочу добавить еще один простой способ сделать это: если ваш ImageButton останется фоном и вы не установите для него значение null, он будет работать как обычная кнопка и будет показывать анимацию щелчка при нажатии точно так же, как и другие кнопки. фон, пока он еще есть:
Прокладки не позволят фону быть видимым и заставят кнопку действовать как другие кнопки.
Это лучшее решение, которое я придумал, взяв подсказки из ответа @ Vinayak. Все остальные решения имеют другие недостатки.
Прежде всего создайте такую функцию.
Пояснение:
getConstantState (). newDrawable () используется для клонирования существующего Drawable, в противном случае будет использоваться тот же Drawable. Подробнее здесь: Android: клонирование объекта для рисования для создания объекта StateListDrawable с помощью фильтров.
mutate () используется для того, чтобы клон Drawable не делился своим состоянием с другими экземплярами Drawable. Подробнее об этом читайте здесь: https://developer.android.com/reference/android/graphics/drawable/Drawable.html#mutate ().
Использование:
Вы можете передать любой тип View (Button, ImageButton, View и т. Д.) В качестве параметра функции, и к ним будет применен эффект щелчка.
Источник
Эффект нажатия кнопки
Как убрать эффект нажатия в TabLayout
Привет всем! При нажатии на tab на мгновение появляется соответствующий «эффект нажатия». Как.
Отслеживание нажатия кнопки
В приложении присутствует две кнопки и один долгий цикл. Нужно ли отслеживать нажатие кнопки при.
Обработка нажатия на аппаратные кнопки
Товарищи, у меня встал вопрос! Как обычно, ребром. Не могу правильно обработать нажатие на.
Анимация нажатия кнопки ImageButton
Есть ImageButton — как сделать анимацию уменьшения при нажатии?
появляется сообщение
tag requires a ‘drawable’ attribute or child tag defining a drawable
Добавлено через 10 минут
все понял, ели нужно указать цвет, а не картинку, все равно нужно указывать android:drawable
Действие без нажатия кнопки
Добрый день Нужно реализовать следующее Поле поиска Поле ответа С полем ответа понятно это.
Событие нажатия кнопки Back
Как сделать, чтоб при нажатии кнопки Back выполнялось сразу несколько действий? Например, если при.
Изменить фон кнопки в момент нажатия
Добрый день! подскажите как изменить фон кнопки в момент нажатия. пробовал .
Вывод изображения после нажатия кнопки
Можно ли вывести изображение на главный layout, после нажатия кнопки, которая расположена на нём? .
Источник
