zoukankan      html  css  js  c++  java
  • Material Design风格的水波涟漪效果(Ripple Effect)的实现

    Material Design是Google在2014年Google I/O大会上推出的一套全新的设计语言,经过接近两年的发展,可谓是以燎原之势影响着整个设计交互生态,和Material Design相关的开源项目也犹如雨后春笋般的出现。

    其中,Ripple Effect是Google非常推崇的Material Design风格的交互方式,甚至已经将它组件化。在越来越多的应用上可以看到这种水波效果,不仅仅是Google自家的应用比如Google Play, 我们在市面上见到的很多应用也都纷纷跟随Google的步伐,加入了Ripple Effect的元素,比如我最早在360手机卫士上看到了Ripple Effect的大量运用。

    那Ripple Effect应该如何实现呢?我们平时在开发的时候又如何轻松的将它引入呢。正如之前所说的,Ripple Effect是谷歌现在非常推崇的一种风格,已经将它组件化,实现起来可谓是so easy…

    这是一个Ripple Effect的demo录像:

    这里写图片描述

    怎么样?是不是看上去很炫,很Material。下面就来看下他的实现到底有多简单。

    第一步,在drawable目录下面添加xml文件touchable_background_white.xml

    <?xml version="1.0" encoding="utf-8"?>
    <ripple xmlns:android="http://schemas.android.com/apk/res/android"
            android:color="@color/grey">
        <item android:drawable="@color/white"/>
    </ripple>
    • android:color设置的颜色表示控件正常状态下的颜色,android:drawable设置的颜色表示控件按下时的颜色。

    第二步,在colors.xml文件中添加如下:

    <color name="grey">#AAAAAA</color>
    <color name="white">#FFFFFF</color>
    • white就是button正常情况下的颜色,grey则是button按下时的颜色。

    这个时候你有可能遇到报错,出现 <ripple> requires API level 21

    如果你使用的开发环境是Android Studio的话,就需要在build.gradle文件中把minSdkVersion修改为21: 
    minSdkVersion 21

    如果使用的是eclipse的话,就需要在AndroidManifest.xml中将minSdkVersion修改为21: 
    android:minSdkVersion=”21”

    第三步,再来看下他的xml布局文件,我们看到的Button控件对应的xml代码如下:

    <Button
        android:layout_width="match_parent"
        android:layout_height="200dip"
        android:background="@drawable/touchable_background_white"
        android:text="RIPPLE EFFECT!"/>
  • 相关阅读:
    asp.net中利用session对象传递、共享数据[session用法]
    敏捷软件开发要点【转载】
    简化 Django
    由浅入深探究mysql索引结构原理、性能分析与优化
    Instagram的技术架构
    nosql数据库选型
    以Facebook为案例剖析科技公司应有的工具文化
    Hadoop2.2.0安装配置手册!完全分布式Hadoop集群搭建过程~(心血之作啊~~)
    spark0.9分布式安装
    前端开发框架选型清单
  • 原文地址:https://www.cnblogs.com/xgjblog/p/6134474.html
Copyright © 2011-2022 走看看