android中button点击效果,带点击效果的button — MaskButton

前言

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

今天涉及的内容有：

MaskButton 实现逻辑

MaskButton 运用场景

MaskButton 在MainActivity中的使用

效果图和项目结构图

MaskButton源码

先来波效果图

1.gif

一. MaskButton 实现逻辑

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

二.MaskButton 运用场景

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

三.MaskButton 在MainActivity中的使用

在使用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对应代码：

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;

}

}

}

四. 效果图和项目结构图

效果图

1.gif

项目结构图

image.png

五.MaskButton源码

MaskButton源码如下：