Android5.0水波纹效果适配4.X

最近研究Google Material Design 发现档次比公司UI图高很多,有木有.这里先实现个水波纹效果来感受下 效果图:

xi

  1. 系统有界效果
    .xml设置:
android:background="?android:attr/selectableItemBackground"

向下兼容,API21以下也可以使用,点击会变色,但不会有水波纹效果.

  1. 系统无界效果
    .xml设置:
android:background="?android:attr/selectableItemBackgroundBorderless"

特别注意: 此效果API21以上才能用,21以下会报错. 所以最小版本要设置为21

这里写图片描述

  1. 自定义有界效果
    在res里创建drawable-v21文件 white_ripple.xml
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
        android:color="@color/ripple">
   <!--去掉此item内容就是无界效果-->
    <item>
        <shape>
            <!-- 中间的背景色-->
            <solid android:color="@color/white"/>
        </shape>
    </item>
</ripple>

特别注意: 需要在drawable文件里创建同名文件white_ripple.xml 适配5.0以下机型.不然会崩溃的

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 没有焦点时的背景颜色 -->
    <item android:drawable="@color/white" android:state_window_focused="false" />
    <!-- 非触摸模式下获得焦点并单击时的背景颜色 -->
    <item android:drawable="@color/ripple" android:state_focused="true" android:state_pressed="true" />
    <!-- 触摸模式下单击时的背景颜色 -->
    <item android:drawable="@color/ripple" android:state_focused="false" android:state_pressed="true" />
    <!-- 选中时的背景颜色 -->
    <item android:drawable="@color/ripple" android:state_selected="true" />
    <!-- 获得焦点时的背景  颜色 -->
    <item android:drawable="@color/ripple" android:state_focused="true" />
</selector>

另:5.0以下没有水波纹效果.就是点击变色效果
4.自定义selector圆角效果
在res里创建drawable-v21文件 button_ripple.xml

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
        android:color="@color/colorAccent">
    <item>
        <shape>
            <!-- 中间的背景色 -->
            <solid android:color="@color/colorPrimaryDark"/>
            <!-- 设置四个角的角度 -->
            <corners android:radius="4dp"/>
        </shape>
    </item>
</ripple>

同样需要在drawable文件里创建同名文件button_ripple.xml 适配5.0以下机型.
参考资料:http://blog.csdn.net/u012702547/article/details/52325418 就这样吧 有兴趣的可以去看看 还有图形的点击变换效果
DEMO下载地址

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

友情链接更多精彩内容