在开发过程经常遇到UI设计出来的按钮点击效果与ios一样,当看到这样的UI设计时候,第一反应是不是要找UI切图,没办法自己绘制吗?在这里我们要来学习下自己如何绘制出这样效果的UI。大家先看下实现好的效果图
演示图.gif
怎么样,是不是跟ios上的效果一样,其实实现起来很简单,话不多说,直接上代码
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="false">
<shape android:shape="rectangle">
<corners android:radius="50dp" />
<solid android:color="#8AFF5658" />
</shape>
</item>
<item android:state_pressed="false">
<shape android:shape="rectangle">
<corners android:radius="50dp" />
<solid android:color="#FF5658" />
</shape>
</item>
<item android:state_pressed="true">
<layer-list>
<item>
<shape android:shape="rectangle">
<corners android:radius="50dp" />
<solid android:color="#FF5658" />
</shape>
</item>
<item>
<shape android:shape="rectangle">
<corners android:radius="50dp" />
<solid android:color="#3A000000" />
</shape>
</item>
</layer-list>
</item>
</selector>
接下来我们来看看设置的几个属性
①android:state_enabled="false" 表示当按钮设置不可点击【button.setEnable(false)】的时候样式,这个属性必须要最先设置,不然没法生效。
②android:state_pressed="false" 表示未点击触摸时候的样式
③android:state_pressed="true" 表示点击触摸时候的样式,可以看到我们 <layer-list>这个标签,我们就是使用了层叠颜色实现了仿IOS的点击效果。最先设置的会在底层。