实现按钮点击变暗特效 — MaskButton

立即下载用AI写一个

发布时间：2019-10-31

0人 | 浏览：2981次 | 收藏 |

技术：android7.0+jdk1.8

概述

MaskButton 是一款按钮点击变暗特效的简洁实现，告别繁杂的 xml 文件，只需要给控件添加一个背景即可。可支持多种类型的按钮背景。

详细

###前言
在Android开发过程中，为了ui的美观及给用户更好的体验，我们通常会对按钮点击设置一个点击效果。大家接触到最多的“炫酷”效果，估计就是水波纹了。但是今天我要讲一款十分平民化的点击效果，之所以介绍它，是因为它使用起来十分方便，并且不需要另外写Selecter xml文件。

今天涉及的内容有：
1. MaskButton 实现逻辑
2. MaskButton 运用场景
3. MaskButton 在MainActivity中的使用
4. 效果图和项目结构图

先来波效果图
![](/contentImages/image/20191031/E7cW2WqVuPQ9RqMBvaN.gif)

####一. MaskButton 实现逻辑
MaskButton 是一款自带点击变暗 效果的 button。其实现逻辑 是 监听 按钮 按下事件，然后对button的背景做变暗处理，来实现点击效果的。

####二.MaskButton 运用场景
当你需要对一个按钮做一个简单的点击特效，又不想写太多繁琐的 xml 文件的时候，你可以考虑使用 MaskButton 。

####三.MaskButton 在MainActivity中的使用
在使用MaskButton 的时候，你可以在布局文件中类似这样引用：
```
    <com.example.function.MaskButton
        android:id="@+id/btn"
        android:layout_width="80dp"
        android:layout_height="40dp"
        android:layout_marginTop="24dp"
        android:text="登录测试"
        android:textColor="#0000ff"
        android:background="#00ff00"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/tv" />
```
MaskButton的点击变暗特效主要作用于  android:background="xxxx"  属性上，其中 xxxx 支持以下几种background的设置：
```
android:background="@drawable/confirm_btn_bg"  //drawable类xml文件
android:background="#00ff00"  //纯色值
android:background="@mipmap/ic_launcher"  // mipmap类图片
```
值得注意的是，当你需要做一个圆角点击变暗效果的背景时，你再也不需要像以前一样写两个xml文件，然后用一个 selecter xml文件来串起两个xml文件，最后设置到 view上了。你只需要写一个未被按下的xml文件作为view背景即可。

MaskButton 默认打开点击变暗特效，若你不需要这个特效，可以在MainActivity中初始化MaskButton后做如下设置：
```
        //禁用点击变暗效果
        maskButton.setTouchEffect(false);
```
下面贴出 confirm_btn_bg.xml对应代码：
```
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#f3d266"/>
</shape>
```
MainActivity中使用代码如下：
```
public class MainActivity extends AppCompatActivity implements View.OnClickListener{

private TextView mTv;
    private MaskButton mBtn;

@Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

initData();
        setListener();
    }

private void initData() {
        mTv = findViewById(R.id.tv);
        mBtn = findViewById(R.id.btn);

//设置是否有点击效果
        mBtn.setTouchEffect(true);
    }

private void setListener() {
        mBtn.setOnClickListener(this);

}

@Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.btn:
              
                break;
            default:
                break;
        }

}

}
```
####四. 效果图和项目结构图
>效果图

![](/contentImages/image/20191031/E7cW2WqVuPQ9RqMBvaN.gif)

>项目结构图

![](/contentImages/image/20191031/DAuYz0yeebNTY5nVInc.png)

欢迎大家下载demo，相互学习交流。

本实例支付的费用只是购买源码的费用，如有疑问欢迎在文末留言交流，如需作者在线代码指导、定制等，在作者开启付费服务后，可以点击“购买服务”进行实时联系，请知悉，谢谢

感谢

手机上随时阅读、收藏该文章？请扫下方二维码