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

??

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" />
时间: 2024-11-25 06:31:56

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

Android Material Design新UI控件使用大全 一

序言 自从谷歌在2014年的IO大会上推出了Material Design新的设计规范后,安卓应用的整体美观程度提升了很大的一个层次, 安卓再也不是又黑又丑的界面,取而代之的是拥有丰富的颜色,美观的按钮,好的用户体验;但是刚开始的话这种设计规范只能在Android 5.0以上的手机上运行,导致开发者也只是自己去体验,在国内并没有大范围的推广,App的质量并不能大幅度的提升,但是作为改变世界的Google公司不久就推出了兼容库Android Material Design,这绝对是业界良心了,我们

Android Material Design 兼容库的使用

Android Material Design 兼容库的使用 mecury 前言:近来学习了Android Material Design 兼容库,为了把这个弄懂,才有了这篇博客,这里先推荐两篇博客:1.Android Material Design 兼容库的使用详解2.Android应用Design Support Library完全使用实例第一篇博客是这个兼容库的详细解析,我参考了里面的许多内容,第二篇是兼容库的大致介绍,如果你能把这两篇全部弄懂,我这篇也没有必要看了.说了这么多,开始正文吧

Android Material Design学习之RecyclerView代替 ListView

前言 # Android Material Design越来越流行,以前很常用的 ListView 现在也用RecyclerView代替了,实现原理还是相似的.笔者实现一下 RecyclerView,代码比较简单,适合初学者,如有错误,欢迎指出. 源码地址(欢迎star) https://github.com/studychen/SeeNewsV2 本文链接 http://blog.csdn.net/never_cxb/article/details/50495505,转载请注明出处. 复习 L

Android Material Design带来的UI变革

谷歌Matias Duarte称,"Material Design是美丽和大胆的,因为干净的排版和布局简单且容易理解.内容才是焦点. 谷歌I/O 014开发者大会上宣布全新的设计语言"Material Design",适用于旗下所有平台,包括 Android.Chrome OS 和网页. 谷歌Matias Duarte称,"Material Design是美丽和大胆的,因为干净的排版和布局简单且容易理解.内容才是焦点." Material Design 初

Android Material Design之Toolbar与Palette

转:http://blog.csdn.net/jdsjlzx/article/details/41441083 前言 我们都知道Marterial Design是Google推出的全新UI设计规范,如果对其不太了解的可以看下:Material design非官方中文指导手册 ,或者我的前面几篇Material Design的译文,相比之前Google在Android Holo风格上平平淡淡的表现不同,Material Design现在是被Google所比较重视的.在推出这门全新设计语言后,And

MaterialEditText——Android Material Design EditText控件

MaterialEditText是Android Material Design EditText控件.可以定制浮动标签.主要颜色.默认的错误颜色等. 随着 Material Design 的到来, AppCompat v21 中也提供了 Material Design 的控件外观支持,其中包括 EditText .但 AppCompat 中的 EditText 实在有点难用,因为它是通过 colorAccent 来自动为控件着色的,并没有提供设置颜色的api,因此需要通过为控件定制theme的

android Material design是什么

Material design概述: Material design是一套UI样式标准,应该会提供一些新的API这写API包含了以下五大模块内容,分别是: Material Theme New Widgets View Shadows Animations New Capabilities for Drawables 1.material新的主题样式. 主题的颜色.动画.反馈效果都可以自定义: 2.控件阴影. 在原来的X,Y的基础之上增加了Z轴的阴影控制,Z值大的控件将显示在上面. 3.Recy

Android Material Design之Toolbar与Palette实践

转载请注明出处:http://blog.csdn.net/bbld_/article/details/41439715 [Rocko's bog] 前言 我们都知道Marterial Design是Google推出的全新UI设计规范,如果对其不太了解的可以看下:Material design非官方中文指导手册 ,或者我的前面几篇Material Design的译文,相比之前Google在Android Holo风格上平平淡淡的表现不同,Material Design现在是被Google所比较重视

Android Material Design动画

最近在看一些关于Material Design的东西,还记得在博客<你所不知道的Activity转场动画--ActivityOptions>中,我们介绍了一种优雅的activity过度动画.如果大家看了最后给出的参考链接,会发现还有很多内容是值得我们学习的,所以这篇博客,我们来学习一下这一页上剩下的东西. 一.触摸反馈 大家都知道,在Material Design中,触摸反馈的效果非常绚丽,是一种涟漪的效果,令我们高兴的是,这种效果也是可以自定义的. <LinearLayout xmln