Android5.0中多种水波纹效果的实现代码

所属分类: 软件编程 / Android 阅读数: 39
收藏 0 赞 0 分享

水波纹效果已经不是什么稀罕的东西了,用过5.0新控件的小伙伴都知道这个效果,可是如果使用一个TextView或者Button或者其它普通控件的话,你是否知道如何给它设置水波纹效果呢?OK,我们今天就来看看这个水波纹效果的实现。水波纹效果的实现有系统自带属性可以实现,我们也可以自定义实现效果。

1.系统自带水波纹实现方式 有界水波纹

水波纹效果大致上可以分为两种,一种是有界的,一种无界,我们先来看看有界水波纹效果:

效果:

代码:

<TextView 
 android:layout_width="match_parent" 
 android:layout_height="56dp" 
 android:layout_centerInParent="true" 
 android:layout_marginTop="36dp" 
 android:background="?android:attr/selectableItemBackground" 
 android:clickable="true" 
 android:gravity="center" 
 android:text="Hello World!"/> 

只需要给TextView设置背景即可,背景内容就为系统自带的selecttableItemBackground。这种是有界水波纹,就是水波纹会在TextView所在区域进行绘制。

无界水波纹

代码:

<TextView 
 android:layout_width="match_parent" 
 android:layout_height="56dp" 
 android:layout_centerInParent="true" 
 android:layout_marginTop="36dp" 
 android:background="?android:attr/selectableItemBackgroundBorderless" 
 android:clickable="true" 
 android:gravity="center" 
 android:text="Hello World!"/> 

所谓的无界并非完全无界,而是以控件宽高中最大的数值作为水波纹效果所在正方形的边界进行绘制。OK,这两种都是系统自带的水波纹效果,如果我们想要自定义又该怎么做呢?

2.自定义水波纹实现方式无界水波纹

自定义这个效果其实也很简单,需要在drawable文件夹中定义ripple节点,再设置上颜色就可以了:

<?xml version="1.0" encoding="utf-8"?> 
<ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="@color/colorAccent"> 
</ripple>

在布局文件中将之引用为控件的背景:

<TextView 
 android:layout_width="match_parent" 
 android:layout_height="56dp" 
 android:layout_centerInParent="true" 
 android:layout_marginTop="36dp" 
 android:background="@drawable/nomaskripple" 
 android:clickable="true" 
 android:gravity="center" 
 android:text="Hello World!"/> 

显示效果如下:

OK,大家看到这是无界水波纹。OK,如果想定义有界水波纹又该如何呢?

有界水波纹

<?xml version="1.0" encoding="utf-8"?> 
<ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="@color/colorPrimary"> 
 <item 
 android:id="@android:id/mask" 
 android:drawable="@color/colorAccent"/> 
</ripple> 

有界水波纹需要我们在ripple节点中定义item,item的id要为系统id  mask,然后还要定义drawable,drawable中的颜色并没有什么卵用,水波纹的颜色是由ripple节点中的颜色来控制的,看看显示效果:


带图片形状的水波纹

有的时候如果你希望水波纹不是长条形,又该如何呢?有两种解决方案,一种是使用图片,还有就是自定义shape,我们先来看看使用图片:

<?xml version="1.0" encoding="utf-8"?> 
<ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="@color/colorAccent"> 
 <item 
 android:id="@android:id/mask" 
 android:drawable="@drawable/ic_launcher"/> 
</ripple>

我这里使用了系统自带的小机器人,我们来看看显示效果:

大家看到,这个时候的水波纹效果就是这个小机器人这张图片中非透明像素点所在的区域了。

自绘形状的水波纹

自绘shape,来看一个圆角矩形:

<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> 
 <corners android:radius="10dp"/> 
 <solid android:color="@color/colorPrimary"/> 
</shape> 

在ripple中引用该矩形:

<?xml version="1.0" encoding="utf-8"?> 
<ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="@color/colorAccent"> 
 <item 
 android:id="@android:id/mask" 
 android:drawable="@drawable/custom_shape"/> 
</ripple> 

显示效果:

这种方式我们在shape中定义的颜色只是用来划定水波纹显示区域,于视图显示上并没有什么用。如果你想让控件一开始就显示shape中定义的颜色,可以这样来定义ripple:

<?xml version="1.0" encoding="utf-8"?> 
<ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="@color/colorAccent"> 
 <!--<item--> 
 <!--android:id="@android:id/mask"--> 
 <!--android:drawable="@drawable/custom_shape"/>--> 
 <item> 
 <shape android:shape="rectangle"> 
  <corners android:radius="10dp"/> 
  <solid android:color="@color/colorPrimary"/> 
 </shape> 
 </item> 
</ripple> 

显示效果如下:


大家看到,我可以在item中定义shape,那么可能有小伙伴会想到我是否可以在item中定义selector呢?当然可以。

带selector效果的水波纹

代码:

<?xml version="1.0" encoding="utf-8"?> 
<ripple xmlns:android="http://schemas.android.com/apk/res/android" 
 android:color="@color/colorAccent"> 
 <item> 
 <selector> 
  <item 
  android:state_pressed="true" 
  android:drawable="@drawable/ic_launcher"/> 
  <item 
  android:state_pressed="false" 
  android:drawable="@drawable/bg"/> 
 </selector> 
 </item> 
</ripple> 

显示效果:

Ok,这就是5.0中水波纹效果的使用。

源码下载

参考资料:

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。

更多精彩内容其他人还在看

使用ViewPager实现android软件使用向导功能实现步骤

现在的大部分android软件,都是使用说明,就是第一次使用该软件时,会出现向导,可以左右滑动,然后就进入应用的主界面了,下面我们就实现这个功能
收藏 0 赞 0 分享

android在异步任务中关闭Cursor的代码方法

android在异步任务中如何关闭Cursor?在我们开发应用的时候,很多时候会遇到这种问题,下面我们就看看代码如何实现
收藏 0 赞 0 分享

Android自定义桌面功能代码实现

android自定义桌面其实很简单,看一个例子就明白了
收藏 0 赞 0 分享

android将图片转换存到数据库再从数据库读取转换成图片实现代码

有时候我们想把图片存入到数据库中,尽管这不是一种明智的选择,但有时候还是不得以会用到,下面说说将图片转换成byte[]数组存入到数据库中去,并从数据库中取出来转换成图像显示出来
收藏 0 赞 0 分享

TextView显示系统时间(时钟功能带秒针变化

用System.currentTimeMillis()可以获取系统当前的时间,我们可以开启一个线程,然后通过handler发消息,来实时的更新TextView上显示的系统时间,可以做一个时钟的功能
收藏 0 赞 0 分享

Android用ListView显示SDCard文件列表的小例子

本文简单实现了用ListView显示SDCard文件列表,目录的回退等功能暂不讨论,获取文件列表,files即为所选择目录下的所有文件列表
收藏 0 赞 0 分享

Android拦截外拨电话程序示例

这篇文章主要介绍了Android拦截外拨电话的示例,大家参考使用吧
收藏 0 赞 0 分享

通过Html网页调用本地安卓(android)app程序代码

如何使用html网页和本地app进行传递数据呢?经过研究,发现还是有方法的,总结了一下,大致有一下几种方式
收藏 0 赞 0 分享

android Textview文字监控(Textview使用方法)

以手机号充值为例,当用户输入最后一位数时候,进行汇率的变换,本文就实现类似这样的功能
收藏 0 赞 0 分享

Android ListView长按弹出菜单二种实现方式示例

这篇文章主要介绍了Android ListView长按弹出菜单的方法,大家参考实现
收藏 0 赞 0 分享
查看更多