zoukankan      html  css  js  c++  java
  • 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的扩展开发包库中:extrasandroidsupportdesign。


    第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" />

  • 相关阅读:
    【转载】Python中如何高效实现两个字典合并,三种方法比较。
    闭包在python中的应用,translate和maketrans方法详解
    python中的多线程【转】
    二叉树非递归遍历方法小结
    Mac OS X 10.9 编译C++11
    LeetCode--Reverse Words in a String
    LeetCode ---Anagrams() 详解
    KMP算法的代码实现
    Mac OS10.9 下python开发环境(eclipse)以及自然语言包NLTK的安装与注意
    秋季面试准备(1)——atoi的实现以及C++库函数stringstream
  • 原文地址:https://www.cnblogs.com/hehehaha/p/6147261.html
Copyright © 2011-2022 走看看