艺术般的波浪点击反馈效果

Material Design之Rippledrawable 使用与简单封装(向下兼容至selector)


  • 前言

Android 5.0问世以来,谷歌所推崇的Material Design得到业界的一致好评,其良好的UI规范与交互确实让界面交互友好和漂亮了不少,Rippledrawable便是其中之一,本博客今天着重讲如何将它运用到我们自己的项目中,并且封装得简单易用。

我们都知道,我们在之前做按钮或者布局的反馈效果,一般都用selector来实现,分别指定按下或正常状态的两种颜色即可,我们点击的效果也本质上就是颜色的改变而已,而Rippledrawable则不同,它能将我们指定的颜色产生一个渐变的动画过程,并且看上去像是一滴水滴在水面上的涟漪效果,看上去非常赏心悦目,效果如下:

非常炫有木有!当然要把它用到我们的项目里面来!
下面我们来看看简单用法:
首先rippledrawble 是5.0以后才出的类,因此会有兼容性(文章后面会解决这个问题)所以我们需要在系统资源文件下新建一个drwable-v21的文件夹:

然后我们在里面新建一个selector_item.xml的文件(名称随意~)

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

然后在我们需要的view中setbackground即可~
但是低于5.0一下的版本不就没有点击效果了嘛?所以我们还要按照我们指定的这两种颜色去写一个selector,低版本才能有点击效果~
so 来到我们熟悉的selector~

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/colorgray" android:state_pressed="true" />
    <item android:drawable="@color/colorwhite" android:state_pressed="false" />
</selector>

设置给view~

效果对比~

左边的效果就是我们5.0一下的点击效果,而右边就是我们的新的交互效果,这样一来,既往下兼容了点击效果,又保证了高于5.0的系统有更好的交互体验,何乐而不为呐?

  • 拓展

但是上面的实现方式似乎不太灵活,也很麻烦,为了实现一个点击效果,我们要新建一个文件夹,还要额外写两个点击效果的文件,是不是太烦了?so 我们直接用代码实现我们上面繁琐的过程~
首先贴下实现效果:

5.0以上的系统:

这里写图片描述

5.0以下的系统:

这里写图片描述

很方便有木有!不需要额外创建文件啥的,我们一行代码指定我们所需要的颜色指定给需要设定的view即可!
代码如下:

/**
     *为单个view设置点击效果,高版本带涟漪反馈
     * @param normalColor 未点击的颜色
     * @param pressColor  按下的颜色
     * @param view  目标view
     */
    public static void setOnclickfeedBack(int normalColor, int pressColor, View view) {
        Drawable bgDrawble;
        ColorDrawable drawablePressed = new ColorDrawable(pressColor);//分别解析两种颜色为colordrawble
        ColorDrawable drawableNormal = new ColorDrawable(normalColor);
        if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.LOLLIPOP) {//高版本设置RippleDrawable 而低版本设置 StateListDrawable也就是selector
            ColorStateList stateList = ColorStateList.valueOf(pressColor);
            RippleDrawable rippleDrawable = new RippleDrawable(stateList, drawableNormal, drawablePressed);
            bgDrawble = rippleDrawable;
        } else {
            StateListDrawable stateListDrawable = new StateListDrawable();
            stateListDrawable.addState(new int[]{android.R.attr.state_pressed}, drawablePressed);
            stateListDrawable.addState(new int[]{-android.R.attr.state_pressed}, drawableNormal);
            bgDrawble = stateListDrawable;
        }
        view.setBackgroundDrawable(bgDrawble);//最终设置给我们的view作为背景
    }

思路很简单,我们就是设定两个颜色和目标view,根据系统sdk版本来对应为view设置不同的Drawble背景高于5.0的我们生成RippleDrawable低版本我们用selector~
如果我们要设置多个view,我们再进一步封装这个方法:

  /**
     *支持同时设置多个view
     * @param normalColor
     * @param pressColor
     * @param views 目标view群
     */
    public static void setOnclickfeedBack(int normalColor, int pressColor, View... views) {
        for (int i = 0, size = views.length; i < size; i++) {
            View view = views[i];
            setOnclickfeedBack(normalColor, pressColor, view);
        }
    }

设置了个可变参数,想传几个view就几个,现在用起来就很简单了~

  FeedBackUtils.setOnclickfeedBack(Color.WHITE, Color.GRAY, vFeed2, vFeed3);

vFeed2,vFeed3就是我们demo里面变色的那两个view~
到这里大功告成,一句代码,轻松实现~

完整工具类

/**
 * Created by soulqw on 16/7/18.
 */
public class FeedBackUtils {
    /**
     *为单个view设置点击效果,高版本带涟漪反馈
     * @param normalColor 未点击的颜色
     * @param pressColor  按下的颜色
     * @param view  目标view
     */
    public static void setOnclickfeedBack(int normalColor, int pressColor, View view) {
        Drawable bgDrawble;
        ColorDrawable drawablePressed = new ColorDrawable(pressColor);//分别解析两种颜色为colordrawble
        ColorDrawable drawableNormal = new ColorDrawable(normalColor);
        if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.LOLLIPOP) {//高版本设置RippleDrawable 而低版本设置 StateListDrawable也就是selector
            ColorStateList stateList = ColorStateList.valueOf(pressColor);
            RippleDrawable rippleDrawable = new RippleDrawable(stateList, drawableNormal, drawablePressed);
            bgDrawble = rippleDrawable;
        } else {
            StateListDrawable stateListDrawable = new StateListDrawable();
            stateListDrawable.addState(new int[]{android.R.attr.state_pressed}, drawablePressed);
            stateListDrawable.addState(new int[]{-android.R.attr.state_pressed}, drawableNormal);
            bgDrawble = stateListDrawable;
        }
        view.setBackgroundDrawable(bgDrawble);//最终设置给我们的view作为背景
    }

    /**
     *支持同时设置多个view
     * @param normalColor
     * @param pressColor
     * @param views 目标view群
     */
    public static void setOnclickfeedBack(int normalColor, int pressColor, View... views) {
        for (int i = 0, size = views.length; i < size; i++) {
            View view = views[i];
            setOnclickfeedBack(normalColor, pressColor, view);
        }
    }
}
  • 拓展

    其实RippleDrawable除了单一颜色之外还支持item中加入图片,并且支持图片渐隐还有无边际的波浪效果等等,大家有兴趣可以多玩一玩,demo里面有简单配置,今天主要是抽取其可能最通用的场景,有啥问题欢迎大家反馈~

demo下载

本页内容版权归属为原作者,如有侵犯您的权益,请通知我们删除。
ubuntu环境 首先确定是否安装了Git管理工具 sudo apt-get install git 我选择SSH方式,比较安全方便,只需一次配置 1- 使用ssh命令连接github.com的SSH服务,登录名为git@github.com(所有GitHub用户共享此SSH用户名)。 wangxiong @Dell :~/Public/GitHubRepository/PaPaPlayer $ ssh - T git @github .com The authenticity of host 'gith
         每次看到iOS的远程消息推送,总是感觉很头大,即便后来项目都做完了,还是觉得摸不着远程推送的脉门,网上介绍的资料虽多,但不是写的太简单了,就是写的太详细了,不能一下抓住要点,今天终于能够抽出点时间,来扒一扒这其中究竟有怎样的奥秘。     根据苹果掌控一切的习惯,消息推送也当然不能例外,不论你在哪里推送,也不论你用什么方式推送,都必须首先把消息发给苹果的消息推送服务器APNs(Apple Push Notification Service),然后再由APNs发给指定的设备,也就是说消息推
Day02 Html、Css实战和WebView实现手机显示网页 1.html与css实战 1.1 程序猿小网页 先来看一下效果图 编程用图如下 实现代码如下 !DOCTYPE htmlhtml head meta charset="utf-8" title/title style #pic{ position: relative; float: left; } #text{ width: 400; height: 200; position: relative; float: left; font-si
前言 或许你知道了jni的简单调用,其实不算什么百度谷歌一大把,虽然这些jni绝大多数情况下都不会让我们安卓工程师来弄,毕竟还是有点难,但是我们还是得打破砂锅知道为什么这样干吧,至少也让我们知道调用流程和数据类型以及处理方法,或许你会有不一样的发现。 其实总的来说从java的角度来看.h文件就是java中的interface(插座),然后.c/.cpp文件呢就是实现类罢了,然后数据类型和java还是有点出入我们还是得了解下(妈蛋,天气真热不适合生存了)。 今天也给出一个JNI动态注册native方法的例子

Android渐变标题栏的实现 - 2016-07-24 14:07:56

Android4.4以上推出了Toolbar,改变程序的style属性就可以给手机的标题栏填充颜色,可以是你设置好的系统的主题色,也可以是自己填充的颜色,其实这个效果在iOS早就有了,但在Android中还是很少见的。在iOS中,最常见的Navigationbar的效果就是一个转场动画(多出现于两个界面切换的时候),一个就是随着手势滑动背景渐变(多出现于详情页)。今天我们就来实现下大多出现于详情页的这个渐变效果的标题栏。 具体效果见: 点击打开链接 接下来我们就来实现这个效果。 首先,我们要先把手机上面的
这一篇,承接地八话。使用高效的方式备份短信——xml序列化器。 存储短信,要以对象的方式存储。首先创建javabean: package com.itydl.createxml.domain;public class Message {private String body;private String date;private String address;private String type;public String getBody() {return body;}public void setB

android独特的天气预报 - 2016-07-24 14:07:50

android独特的天气预报 package com.dchan.myweather;import java.io.UnsupportedEncodingException;import java.net.URLEncoder;import java.security.PublicKey;import java.util.ArrayList;import java.util.Calendar;import java.util.Collection;import java.util.HashMap;impo

cocoapods的安装和使用 总结 - 2016-07-24 14:07:48

一、CocoaPods 是什么? CocoaPods 是开发 OS X 和 iOS 应用程序的一个第三方库的依赖管理工具。利用CocoaPods,可以定义自己的依赖关系 (称作 pods),并且随着时间的变化,以及在整个开发环境中对第三方库的版本管理非常方便。 CocoaPods 背后的理念主要体现在两个方面。首先,在工程中引入第三方代码会涉及到许多内容。针对 Objective-C 初级开发者来说,工程文件的配置会让人很沮丧。在配置buildphases和linker flags过程中,会引起许多人为因
最近有一段时间没写博客了,一方面是工作比较忙,一方面也着实本人水平有限,没有太多能与大家分享的东西,也就是在最近公司要做一个抢红包的功能,老板发话了咋们就开干呗,本人就开始在网上收集资料,经过整理和实践,总算完美实现了功能,这里拿出本人一点微薄的成就与大家分享。 首先界面是这样的 开启自动抢红包只需点击相应的选项即可,下面我们进入正题,实现自动抢红包的原理,其实是借助android下的一个辅助服务AccessibilityService,这个服务是google公司为许多Android使用者因为各种情况导致
在实现该控件之前,先说一下该控件的难度, 一、   每个item中如果有RadioButton之类,可以focus焦点的,点击效果可能会失效   二、无限的滚动   下面是效果图: 实现上图的效果,一共自定义了两个 控件,viewpager+底部导航图标 下面我先来讲解一下,viewpager的实现: 1.初始化 pre name="code" class="java"/** 点击按下的坐标 **/PointF downP = new PointF();/** 当前按下的坐标 **/PointF curP