前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Android 的UI效果篇Ripple

Android 的UI效果篇Ripple

作者头像
程思扬
发布2022-01-10 15:11:20
1.7K0
发布2022-01-10 15:11:20
举报
文章被收录于专栏:程思阳的专栏

本文记录了5.0以Ripple(波纹效果)的使用

1.为什么要使用Ripple 2.如何使用Ripple效果 3.Ripple效果的颜色值改变 4.Ripple的波纹范围改变 5.Ripple添加一个item,其id为@android:id/mask

1.为什么要使用Ripple

提高用户体验,更好的视觉效果反馈给用户 间接增加了用户在应用停留的时间

2.如何使用Ripple效果

在5.0的机型上,button会自带有Ripple点击效果。但是往往开发者需要修改点击效果,从而修改android:backgroud,这时候Ripple效果就会改变。所以使用Ripple的关键就在android:backgroud中设置。

点击效果主要分为2类:

有边界波纹 布局代码:

代码语言:javascript
复制
android:background="?android:attr/selectableItemBackground"

点击效果

在这里插入图片描述
在这里插入图片描述

超出边界波纹(圆形) 布局代码:

代码语言:javascript
复制
android:background="?android:attr/selectableItemBackgroundBorderless"

点击效果

在这里插入图片描述
在这里插入图片描述

超出边界波纹(圆形) 布局代码:

代码语言:javascript
复制
android:background="?android:attr/selectableItemBackgroundBorderless"

点击效果:

在这里插入图片描述
在这里插入图片描述

超出边界波纹

注意: 超出边界波纹,API要求21以上 如果点击效果没有,很可能是该控件本身点击没开启,设置如下属性即可

代码语言:javascript
复制
android:clickable="true"

3.Ripple效果的颜色值改变

现在很多APP都有自己的主题颜色,而Ripple效果的颜色如果还是默认的灰色,这样会不会显得格格不入。现在我们就来修改下Ripple效果的颜色。

设置ripple标签的drawable

代码语言:javascript
复制
<?xml version="1.0" encoding="utf-8"?>
 <ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="?android:colorPrimaryDark"> 
 </ripple>

点击效果

在这里插入图片描述
在这里插入图片描述

注意 颜色可能有遮盖的情况,效果不是很理想

4.Ripple的波纹范围改变

从上面我们知道,除了超出边界模式,还有一种是有边界限制的。既然要限制边界,我们就需要给他提供一个范围,即添加一个item标签。

颜色做为Mask 布局代码:

代码语言:javascript
复制
<ripple xmlns:android="http://schemas.android.com/apk/res/android"        
android:color="?android:colorPrimaryDark">    
    <item android:drawable="@color/colorAccent">
    </item>
</ripple>

点击效果:

在这里插入图片描述
在这里插入图片描述

颜色做为Mask

形状做为Mask 布局代码:

代码语言:javascript
复制
<ripple xmlns:android="http://schemas.android.com/apk/res/android"        
android:color="?android:colorPrimaryDark">   
     <item >        
        <shape android:shape="oval">           
          <solid android:color="@color/colorAccent"></solid>        
       </shape>   
     </item>
</ripple>

点击效果:

在这里插入图片描述
在这里插入图片描述

图片做为Mask 布局代码:

代码语言:javascript
复制
<ripple xmlns:android="http://schemas.android.com/apk/res/android"        
android:color="?android:colorPrimaryDark">    
       <item         android:drawable="@drawable/ic_launcher">    
       </item>
</ripple>

点击效果:

在这里插入图片描述
在这里插入图片描述

注意 这里的图片一定要显示完整,不然会出现闪烁。

5.添加一个item,其id为@android:id/mask

对比上面的图片做为Mask的例子,只是添加了一个id,代码如下:

代码语言:javascript
复制
<ripple xmlns:android="http://schemas.android.com/apk/res/android"        
android:color="?android:colorPrimaryDark">    
       <item android:id="@android:id/mask"        android:drawable="@drawable/ic_launcher">    
       </item>
</ripple>

然而效果却发生了改变:

在这里插入图片描述
在这里插入图片描述

很明显的看到一开始,图片是隐藏的,即: 如果不指定id为@android:id/mask,那么在显示的时候会显示出item指定的drawable。 如果指定id为@android:id/mask,那么默认是不会显示该drawable,而是在点击的时候出现。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018/11/26 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1.为什么要使用Ripple
  • 2.如何使用Ripple效果
  • 3.Ripple效果的颜色值改变
  • 4.Ripple的波纹范围改变
  • 5.添加一个item,其id为@android:id/mask
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档