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!"/>
  • 相关阅读:
    西门子PLC 8种入门实例接线与控制
    安全继电器工作原理、接线图、使用方法图解
    RKNN--群聊天
    技术分享 | 无人机上仅使用CPU实时运行Yolov5?(OpenVINO帮你实现)(上篇)
    (博途)S7-300PLC传送带工件计数控制程序设计
    Adaptive Mixture Regression Network with Local Counting Map for Crowd Counting
    配色网站收集(持续更新...)
    VUE项目里个性化写个时间轴组件,带折叠效果
    纯CSS画尖角符号
    Docker部署
  • 原文地址:https://www.cnblogs.com/xgjblog/p/6134474.html
Copyright © 2011-2022 走看看