仿IOS按钮点击效果

作者: 简书测试账号 | 来源:发表于2018-08-24 14:35 被阅读170次

在开发过程经常遇到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的点击效果。最先设置的会在底层。

相关文章

网友评论

    本文标题:仿IOS按钮点击效果

    本文链接:https://www.haomeiwen.com/subject/salbiftx.html