[英]How to set button click effect in Android?
在 Android 中,当我为按钮设置背景图像时,单击它时看不到任何效果。
我需要在按钮上设置一些效果,以便用户可以识别按钮已被单击。
单击该按钮时,该按钮应该会变暗几秒钟。 这该怎么做?
这可以通过创建一个包含按钮状态列表的可绘制 xml 文件来实现。 例如,如果您使用以下代码创建一个名为“button.xml”的新 xml 文件:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true" android:state_pressed="false" android:drawable="@drawable/YOURIMAGE" />
<item android:state_focused="true" android:state_pressed="true" android:drawable="@drawable/gradient" />
<item android:state_focused="false" android:state_pressed="true" android:drawable="@drawable/gradient" />
<item android:drawable="@drawable/YOURIMAGE" />
</selector>
要使背景图像在印刷时保持深色外观,请创建第二个 xml 文件并使用以下代码将其命名为 gradient.xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<bitmap android:src="@drawable/YOURIMAGE"/>
</item>
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient android:angle="90" android:startColor="#880f0f10" android:centerColor="#880d0d0f" android:endColor="#885d5d5e"/>
</shape>
</item>
</layer-list>
在按钮的 xml 中,将背景设置为按钮 xml,例如
android:background="@drawable/button"
希望这可以帮助!
编辑:更改了上面的代码以在按钮中显示图像(YOURIMAGE),而不是块颜色。
当您有很多图像按钮时,它会更简单,并且您不想为每个按钮编写 xml-s。
科特林版本:
fun buttonEffect(button: View) {
button.setOnTouchListener { v, event ->
when (event.action) {
MotionEvent.ACTION_DOWN -> {
v.background.setColorFilter(-0x1f0b8adf, PorterDuff.Mode.SRC_ATOP)
v.invalidate()
}
MotionEvent.ACTION_UP -> {
v.background.clearColorFilter()
v.invalidate()
}
}
false
}
}
Java版本:
public static void buttonEffect(View button){
button.setOnTouchListener(new OnTouchListener() {
public boolean onTouch(View v, MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN: {
v.getBackground().setColorFilter(0xe0f47521,PorterDuff.Mode.SRC_ATOP);
v.invalidate();
break;
}
case MotionEvent.ACTION_UP: {
v.getBackground().clearColorFilter();
v.invalidate();
break;
}
}
return false;
}
});
}
创建您的AlphaAnimation
对象,该对象决定按钮的淡入淡出效果,然后让它在您的按钮的onClickListener
中启动
例如 :
private AlphaAnimation buttonClick = new AlphaAnimation(1F, 0.8F);
// some code
public void onClick(View v) {
v.startAnimation(buttonClick);
}
当然这只是一种方式,不是最喜欢的方式,只是更简单
您可以简单地为您的View
使用前景来实现可点击的效果:
android:foreground="?android:attr/selectableItemBackground"
为了与深色主题一起使用,还可以将主题添加到您的layout
中(以使可点击效果清晰):
android:theme="@android:style/ThemeOverlay.Material.Dark"
要使您的项目与系统外观和感觉保持一致,请尝试在所需视图的背景或前景标记中引用系统属性android:attr/selectableItemBackground
:
<ImageView
...
android:background="?android:attr/selectableItemBackground"
android:foreground="?android:attr/selectableItemBackground"
...
/>
使用这两个属性分别在 API 级别 23 之前/之后获得所需的效果。
或者只使用一张背景图片,您可以使用setOnTouchListener
实现点击效果
两种方式
((Button)findViewById(R.id.testBth)).setOnTouchListener(new OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN: {
Button view = (Button) v;
view.getBackground().setColorFilter(0x77000000, PorterDuff.Mode.SRC_ATOP);
v.invalidate();
break;
}
case MotionEvent.ACTION_UP:
// Your action here on button click
case MotionEvent.ACTION_CANCEL: {
Button view = (Button) v;
view.getBackground().clearColorFilter();
view.invalidate();
break;
}
}
return true;
}
});
如果您不想使用setOnTouchLister
,另一种实现方式是
myButton.getBackground().setColorFilter(.setColorFilter(0xF00, Mode.MULTIPLY);
StateListDrawable listDrawable = new StateListDrawable();
listDrawable.addState(new int[] {android.R.attr.state_pressed}, drawablePressed);
listDrawable.addState(new int[] {android.R.attr.defaultValue}, myButton);
myButton.setBackgroundDrawable(listDrawable);
对于所有视图
android:background="?android:attr/selectableItemBackground"
但是对于具有海拔使用的cardview
android:foreground="?android:attr/selectableItemBackground"
对于工具栏中的圆形点击效果
android:background="?android:attr/actionBarItemBackground"
你还需要设置
android:clickable="true"
android:focusable="true"
这是我从@Vinayak 的回答中得出的最佳解决方案。 所有其他解决方案都有不同的缺点。
首先创建一个这样的函数。
void addClickEffect(View view)
{
Drawable drawableNormal = view.getBackground();
Drawable drawablePressed = view.getBackground().getConstantState().newDrawable();
drawablePressed.mutate();
drawablePressed.setColorFilter(Color.argb(50, 0, 0, 0), PorterDuff.Mode.SRC_ATOP);
StateListDrawable listDrawable = new StateListDrawable();
listDrawable.addState(new int[] {android.R.attr.state_pressed}, drawablePressed);
listDrawable.addState(new int[] {}, drawableNormal);
view.setBackground(listDrawable);
}
解释:
getConstantState().newDrawable() 用于克隆现有的 Drawable,否则将使用相同的 drawable。 从此处阅读更多信息: Android:克隆可绘制对象以使用过滤器制作 StateListDrawable
mutate() 用于使 Drawable 克隆不与其他 Drawable 实例共享其状态。 在此处阅读更多信息: https://developer.android.com/reference/android/graphics/drawable/Drawable.html#mutate()
用法:
您可以将任何类型的视图(按钮、图像按钮、视图等)作为参数传递给函数,它们将获得应用到它们的点击效果。
addClickEffect(myButton);
addClickEffect(myImageButton);
只是想添加另一种简单的方法来执行此操作:如果您的 ImageButton 保持其背景并且您没有将其设置为 null,它将像普通按钮一样工作,并且会在单击时显示单击动画,就像其他按钮一样。隐藏的方式仍然存在的背景:
<ImageButton
android:id="@+id/imageButton2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="1dp"
android:paddingLeft="1dp"
android:paddingRight="1dp"
android:paddingTop="1dp"
android:src="@drawable/squareicon" />
填充不会让背景可见并使按钮像其他按钮一样工作。
Step: set a button in XML with onClick Action:
<Button
android:id="@+id/btnEditUserInfo"
style="?android:borderlessButtonStyle"
android:layout_width="wrap_content"
android:layout_height="@dimen/txt_height"
android:layout_gravity="center"
android:background="@drawable/round_btn"
android:contentDescription="@string/image_view"
android:onClick="edit_user_info"
android:text="Edit"
android:textColor="#000"
android:textSize="@dimen/login_textSize" />
Step: on button clicked show animation point
//pgrm mark ---- ---- ----- ---- ---- ----- ---- ---- ----- ---- ---- -----
public void edit_user_info(View view) {
// show click effect on button pressed
final AlphaAnimation buttonClick = new AlphaAnimation(1F, 0.8F);
view.startAnimation(buttonClick);
Intent intent = new Intent(getApplicationContext(), EditUserInfo.class);
startActivity(intent);
}// end edit_user_info
将 RippleDrawable 用于 Material Design 状态按下/点击效果。
为了实现这一点,请在 /drawable 文件夹下将波纹项目创建为 .xml 并在 android:background 中用于任何视图。
图标按下/点击的效果,使用圆形波纹效果,例如:
<ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="@android:color/darker_gray" />
使用矩形边界单击视图的效果,我们可以在现有的可绘制对象上添加波纹,如下所示:
<?xml version="1.0" encoding="utf-8"?> <ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="#000000"> <item android:drawable="@drawable/your_background_drawable"/> </ripple>
为动画创建bounce.xml文件
地点:
res->anim->bounce.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<scale
android:duration="100"
android:fromXScale="0.9"
android:fromYScale="0.9"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="1.0"
android:toYScale="1.0" />
</set>
在onClick中加入这一行进行初始化
final Animation myAnim = AnimationUtils.loadAnimation(this,R.anim.bounce);
button.startAnimation(myAnim);
单击按钮即可获得收缩效果。
我有同样的问题,我需要有一个透明的背景,但仍然可以得到动画。 设置它为我解决了它:
android:background="?android:selectableItemBackground"
如果你想有循环效果,这也是:
android:background="?android:selectableItemBackgroundBorderless"
在您的 MainActivity.xml 按钮中添加此代码
android:clickable="true"
android:background="?attr/selectableItemBackground"
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/selectableItemBackground"
android:text="New Button" />
对 Andràs 的回答做一个小小的补充:
您可以使用postDelayed
使颜色过滤器持续一小段时间以使其更明显:
@Override
public boolean onTouch(final View v, MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN: {
v.getBackground().setColorFilter(color, PorterDuff.Mode.SRC_ATOP);
v.invalidate();
break;
}
case MotionEvent.ACTION_UP: {
v.postDelayed(new Runnable() {
@Override
public void run() {
v.getBackground().clearColorFilter();
v.invalidate();
}
}, 100L);
break;
}
}
return false;
}
您可以更改延迟 100L 的值以满足您的需要。
如果您使用的是 xml 背景而不是 IMG,只需删除它:
<item>
<bitmap android:src="@drawable/YOURIMAGE"/>
</item>
从@Ljdawson 给我们的第一个答案开始。
设置查看点击效果的简单方法。
方法
public AlphaAnimation clickAnimation() {
return new AlphaAnimation(1F, 0.4F); // Change "0.4F" as per your recruitment.
}
在视图中设置
yourView.startAnimation(clickAnimation());
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.