关闭

Android Material Design : Ripple Effect水波波纹荡漾的视觉交互设计

标签: android
3378人阅读 评论(0) 收藏 举报
分类:


Android Material Design : Ripple Effect水波波纹荡漾的视觉交互设计

Android Ripple Effect波纹荡漾效果,是Android Material Design视觉设计引入的一种交互设计效果简言之:当点击某个view时候,view会出现像水波波纹一样的荡漾传播效果。在最新版的Android如Android 5.0或以上版本中默认具有该效果,但在低版本Android中没有,如果需要向下兼容低版本设备,则需要自己写代码实现,实现步骤:


第1步:需要先引入一个名叫design的Android扩展库。在Android Studio中直接添加该库。Eclipse项目则位于Android SDK的扩展开发包库中:extras\android\support\design。


第2步:在res/目录下新建一个 drawable-v21 文件目录。


第3步:在drawable-v21目录下新建一个Android xml资源文件,名称随意,比如叫ripple_effect.xml。


第4步:在ripple_effect.xml中写入代码:

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

    <item>
        <shape android:shape="rectangle" >
            <solid android:color="@android:color/white" />

            <corners android:radius="10dp" />
        </shape>
    </item>

</ripple>

注意:如果此处把ripple里面的item全部删掉,ripple效果依然有效,但是此时的ripple effect将没有边界,ripple效果将变成一个圆形超出View边界的ripple effect视觉效果,一般是一个从点击位置开始往圆周扩散的圆形渐变水波波纹荡漾效果。有些像一个往圆周发散衰减信号的“雷达”,利用这一点,可以改造ripple effect成更为复杂和精彩的视觉交互效果。


第5步:接下来就是使用。比如把一个普通的Android TextView改造成具有Ripple Effect的TextView,那么就设置该TextView的background之资源为第4步创建的ripple_effect:

 <TextView
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:background="@drawable/ripple_effect"
        android:clickable="true"
        android:gravity="center"
        android:padding="10dp"
        android:text="zhang phil @ csdn" />

1
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

Android 5.0 Material Design的实现点击任意View的水波效果

文章目的:点击任意的View,实现水波的点击效果。 本文来自【 Mr.Simple的博客 】 前言:自从Android 5.0问世以后,它的UI风格受到了大家普遍的赞美,简单、动感十足,但是由...
  • JavaAndroid730
  • JavaAndroid730
  • 2016-11-10 22:57
  • 1212

Material Design风格的水波涟漪效果(Ripple Effect)的实现

Material Design是Google在2014年Google I/O大会上推出的一套全新的设计语言,经过接近两年的发展,可谓是以燎原之势影响着整个设计交互生态,和Material Design...
  • licaomengRICE
  • licaomengRICE
  • 2016-02-21 23:18
  • 4852

Material Design——Touch feedback Ripple波纹动画

Touch feedback(触摸反馈)Ripple波纹效果 使用系统波纹效果 要实现波纹效果首先要保证控件可以进行触摸反馈,一半要将foucesable和clickable 设置为trueandro...
  • xf616510229
  • xf616510229
  • 2016-11-26 22:04
  • 325

Android 点击水波纹扩散效果( Ripple Effect )

文章转载自:http://www.tuicool.com/articles/NFr6jie 以下介绍的实现方式都是调用Android5.0的新API,并非自定义实现,所以支持在Android5.0...
  • u013278940
  • u013278940
  • 2016-08-12 16:00
  • 1946

实现Android 5.0 Material Design的点击任意View的水波效果

自从Android 5.0问世以后,它的UI风格受到了大家普遍的赞美,简单、动感十足,但是由于工作比较忙,本人对于Android 5.0并没有太多的关注。前几天在知名博主任玉刚的群中有同学问到实现An...
  • bboyfeiyu
  • bboyfeiyu
  • 2015-01-10 21:49
  • 7223

Android Material Design动画 Reveal Effect | 揭示效果

Material Design动画 Reveal Effect|揭示效果核心方法 ViewAnimationUtils.createCircularReveal( View view,//视...
  • lengxuechiwu1314
  • lengxuechiwu1314
  • 2017-06-13 18:59
  • 1078

Android源码解析--Material Design之水波纹点击效果RippleEffect使用

Android Materail Design之RippleEffect水波涟漪的使用源码解析,点击控件实现水波涟漪效果,加到你的app中会显得很高大上,分析一下源码,看看具体怎么实现的。 ndroi...
  • lyhhj
  • lyhhj
  • 2015-09-16 23:21
  • 5247

安卓学习笔记---Android源码解析--Material Design之水波纹点击效果RippleEffect使用

今天老板跟我说,能不能加一个点击效果,要不然用户不知道他是否已经点击了,我说好的,刚开始我是使用的selector添加效果的,UI看了之后说好丑啊,能不能改的好看点啊,哎,,,果然好难啊,咋滴都得好看...
  • juhua2012
  • juhua2012
  • 2016-09-12 14:53
  • 1514

图像处理之水波纹扩散效果(water ripple effect)

实现一个常见PS特效,water ripple effect, 水波纹扩散效果,主要是利用sine函数模拟 水波纹扩散效果,使用双线性插值完成像素提供。
  • jia20003
  • jia20003
  • 2013-10-26 22:38
  • 12453

实现Material Design风格的点击水波荡漾效果

自Material Design的设计理念推出以来,整个安卓的UI跟UE界几乎发生了翻天覆地的变化,由此推出的设计理念也在一步一步的被引入到开发者的具体项目中,良心来说Google提出的这个设计理念跟...
  • xieluoxixi
  • xieluoxixi
  • 2017-02-09 14:40
  • 573
    个人资料
    • 访问:1517061次
    • 积分:19981
    • 等级:
    • 排名:第491名
    • 原创:546篇
    • 转载:13篇
    • 译文:2篇
    • 评论:323条
    关于我
    邮箱: zhangphil@live.com
    博客专栏