Android自定义View控件实现多种水波纹涟漪扩散效果

效果图

实现思路

这个效果实现起来并不难,重要的是思路

此View满足了多种水波纹涟漪扩散效果,这要求它能满足很多的变化

根据上面的样式,可以看出此View需要满足以下变化

  • 圆圈从中心可循环向外扩散
  • 圆圈之间的扩散间距可以改变
  • 可控制扩散圆的渐变度
  • 圆圈可以是线条样式或者实心样式
  • 圆圈扩散的速度可以控制
  • 适配圆圈不同大小下的扩散效果

具体实现

创建自定义属性

首先为View创建自定义的xml属性

在工程的values目录下新建attrs.xml文件

 <declare-styleable name="mRippleView">
 <attr name="cColor" format="color"/>
 <attr name="cSpeed" format="integer"/>
 <attr name="cDensity" format="integer"/>
 <attr name="cIsFill" format="boolean"/>
 <attr name="cIsAlpha" format="boolean"/>
 </declare-styleable>

各个属性的作用如下

  • cColor:View控件的颜色
  • cSpeed:向外扩散的速度
  • cDensity:圆形波纹扩散的间距
  • cIsFill:是否开启填充模式,true为实心圆
  • cIsAlpha:是否开启渐变效果,true为开启

创建自定义View控件

新建RippleView类继承View类,重写它的三个构造方法,获取用户设置的属性,同时指定默认值

 public RippleView(Context context, AttributeSet attrs, int defStyleAttr) {
 super(context, attrs, defStyleAttr);
 // 获取用户配置属性
 TypedArray tya = context.obtainStyledAttributes(attrs, R.styleable.mRippleView);
 mColor = tya.getColor(R.styleable.mRippleView_cColor, Color.BLUE);
 mSpeed = tya.getInt(R.styleable.mRippleView_cSpeed, 1);
 mDensity = tya.getInt(R.styleable.mRippleView_cDensity, 10);
 mIsFill = tya.getBoolean(R.styleable.mRippleView_cIsFill, false);
 mIsAlpha = tya.getBoolean(R.styleable.mRippleView_cIsAlpha, false);
 tya.recycle();
 init();
 }

使用TypedArray读取完自定义的属性后一定要记得调用recycle方法释放掉

重写onMeasure

测量onMeasure,首先需要测量出View的宽和高,并指定View在wrap_content时的最小范围,对于View绘制流程还不熟悉的同学,可以先去了解下具体的绘制流程

//www.jb51.net/article/118775.htm

重写onMeasure方法,其中我们要考虑当View的宽高被指定为wrap_content时的情况,如果我们不对wrap_content的情况进行处理,那么当使用者指定View的宽高为wrap_content时将无法正常显示出View

 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
 super.onMeasure(widthMeasureSpec, heightMeasureSpec);
 int myWidthSpecMode = MeasureSpec.getMode(widthMeasureSpec);
 int myWidthSpecSize = MeasureSpec.getSize(widthMeasureSpec);
 int myHeightSpecMode = MeasureSpec.getMode(heightMeasureSpec);
 int myHeightSpecSize = MeasureSpec.getSize(heightMeasureSpec);
 // 获取宽
 if (myWidthSpecMode == MeasureSpec.EXACTLY) {
  // match_parent/精确值
  mWidth = myWidthSpecSize;
 } else {
  // wrap_content
  mWidth = DensityUtil.dip2px(mContext, 120);
 }

 // 获取高
 if (myHeightSpecMode == MeasureSpec.EXACTLY) {
  // match_parent/精确值
  mHeight = myHeightSpecSize;
 } else {
  // wrap_content
  mHeight = DensityUtil.dip2px(mContext, 120);
 }
 // 设置该view的宽高
 setMeasuredDimension(mWidth, mHeight);
 }

MeasureSpec的状态分为三种EXACTLY、AT_MOST、UNSPECIFIED,这里只要单独指定非精确值EXACTLY之外的情况就好了

本文中使用到的DensityUtil类,是为了将dp转换为px来使用,以便适配不同的屏幕显示效果

 public static int dip2px(Context context, float dpValue) {
 final float scale = context.getResources().getDisplayMetrics().density;
 return (int) (dpValue * scale + 0.5f);
 }

重写onDraw

设计的整体思路如下图所示

先要实现圆形向外扩散的效果

  • 初始化第一个圆

这里的动画效果本来是想使用ValueAnimator属性动画的数值发生器来实现,但是我们这里有很多的计算需求,所以最后还是选择使用算法来实现,方便控制圆的一些参数

想要实现扩散的效果,这里思路是在每次更新View时动态改变圆的半径,同时还需要给圆设置渐变度数,所以决定用一个类来保存圆的状态,所有圆都存在一个List里

// 添加第一个圆圈
mRipples = new ArrayList<>();
Circle c = new Circle(0, 255);
mRipples.add(c);

传入Circle类里的两个参数,第一个0表示圆的初始宽度,第二个255表示初始透明度

  • 添加新圆

要想实现不断有圆向外扩散,就需要在第一个圆扩散到一定范围时在圆心处再添加一个圆,这个的范围可以由圆的半径来控制,当List集合中最后一个圆的半径增加到某个值mDensity时,新的圆就从圆心处创建出来

// 添加圆
if (mRipples.size() > 0) {
 // 控制第二个圆出来的间距
 if (mRipples.get(mRipples.size() - 1).width > DensityUtil.dip2px(mContext, mDensity)) {
 mRipples.add(new Circle(0, 255));
 }
}
  • 删除List中多余的圆

List中的圆存储的数量不宜过多,多了内存消耗大,需要在当圆的半径超过View的宽度时就删掉这个圆

// 当圆超出View的宽度后删除
if (c.width > mWidth / 2) {
 mRipples.remove(i);
}

我们也可以在外切正方形的顶点处删除这个圆,需要用到勾股定律来计算扩散圆到外切正方形顶点的位置

如上图所示,得出计算公式为

// 使用勾股定律求得一个外切正方形中心点离顶点的距离
sqrtNumber = (int) (Math.sqrt(mWidth * mWidth + mHeight * mHeight) / 2);

这样就需要修改删除圆的位置了

if (c.width > sprtNumber) {
 mRipples.remove(i);
}
  • 控制扩散圆的渐变度

当圆在向View的边缘扩散时,渐变度数的改变需要动态来计算,渐变的计算算法要适配不同的圆宽度大小,我们知道透明度是0~255之间的,0表示完全透明,255表示百分百不透明,计算的时候就是需要将这个数值等份分配到圆的宽度里

这里要区分一点,对于圆来说,宽度是由圆心从0开始向外递增,而渐变度数则是由圆心从255开始向外递减,当圆与最外围的正方形内切时渐变度必须变为0,由此分析得知,公式如下

透明度 = 255 - 圆的宽度 * (255 / View宽度)

double alpha = 255 - c.width * (255 / ((double) mWidth / 2));
c.alpha = (int) alpha;

GitHub地址

https://github.com/zhuwentao2150/RippleView

总结

关于自定义View的总结部分在我的其它博客中已经写过蛮多了,有兴趣的可以去看看

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对我们的支持。

(0)

相关推荐

  • Android实现水波纹扩散效果的实例代码

    本文讲述了Android实现水波纹扩散效果的实例代码.分享给大家供大家参考,具体如下: 项目地址下载 1.效果图: 2.使用方法: 在xml里使用RippleImageView自定义控件: xmlns:app="http://schemas.android.com/apk/res-auto" <com.army.rippleimage.RippleImageView android:id="@+id/rippleImageView" android:layou

  • Android波纹扩散效果之仿支付宝咻一咻功能实现波纹扩散特效

    今年春节晚会没看尽兴,被支付宝集福给添了一段插曲,朋友们都在那数定时间段不停的咻一咻,哇,我咻到一个敬业福,不可能的,哈哈.那么咻一咻功能基于程序代码是怎么实现的呢?下面我们小编给大家分享本教程帮助大家学习Android波纹扩散效果之仿支付宝咻一咻功能实现波纹扩散特效,具体内容如下所示: 先来看看这个效果 这是我的在Only上添加的效果,说实话,Only现在都还只是半成品,台面都上不了,怪自己技术不行,也太懒了 PS:这个view也是我模仿了人家的效果,参考了人家的思路写的,不是纯手撸,罪过罪过

  • Android特效之水波纹的实现

    前言 水波纹特效,想必大家或多或少见过,在我的印象中,大致有如下几种: 支付宝 "咻咻咻" 式 流量球 "荡漾" 式 真实的水波纹效果,基于Bitmap处理式 话不多说,先来看看效果: 填充式水波纹,间距相等 非填充式水波纹,间距相等 非填充式水波纹,间距不断变大 填充式水波纹,间距不断变小 想必大家已经知道基本的原理了,就是用Canvas来画嘛,但可不是简单的画哦,请往下看. 分析 这种类型的水波纹,其实无非就是画圆而已,在给定的矩形中,一个个圆由最小半径扩大到最

  • Android实现水波纹效果

    一.效果 点击开始: 点击停止: 二.在MainActivity中 import android.graphics.Paint; import android.os.Bundle; import android.support.v4.view.animation.LinearOutSlowInInterpolator; import android.support.v7.app.AppCompatActivity; import android.view.View; import android

  • Android实现点击Button产生水波纹效果

    先上图,看看接下来我要向大家介绍的是个什么东西,如下图: 接下来要介绍的就是如何实现上述图中的波纹效果,这种效果如果大家没有体验过的话,可以看看百度手机卫士或者360手机卫士,里面的按钮点击效果都是这样的,另外Android 5.0以上的版本也出现了这种效果.不多说,下面聊聊具体的怎么实现. 首先大家看到的是三个button,水波纹的出现给我们的错觉是直接将波纹绘制在button上面的,但是这样能做到吗?首先button自己有background和src,如果把半透明的水波纹当作backgrou

  • Android自定义view实现圆的扩散效果

    本文实例为大家分享了Android自定义View的实现水波纹,供大家参考,具体内容如下 一.实现效果 MainActivity.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.andro

  • Android仿水波纹流量球进度条控制器

    仿水波纹流球进度条控制器,Android实现高端大气的主流特效,供大家参考,具体内容如下 效果图: CircleView 这里主要是实现中心圆以及水波特效 package com.lgl.circleview; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.gra

  • Android 实现圆圈扩散水波动画效果两种方法

    两种方式实现类似水波扩散效果,先上图为敬 自定义view实现 动画实现 自定义view实现 思路分析:通过canvas画圆,每次改变圆半径和透明度,当半径达到一定程度,再次从中心开始绘圆,达到不同层级的效果,通过不断绘制达到view扩散效果 private Paint centerPaint; //中心圆paint private int radius = 100; //中心圆半径 private Paint spreadPaint; //扩散圆paint private float cente

  • Android项目实战手把手教你画圆形水波纹loadingview

    本文实例讲解的是如何画一个满满圆形水波纹loadingview,这类效果应用场景很多,比如内存占用百分比之类的,分享给大家供大家参考,具体内容如下 效果图如下: 预备的知识: 1.贝塞尔曲线    如果你不了解,可以来这里进行基础知识储备:神奇的贝塞尔曲线 2.Paint.setXfermode()  以及PorterDuffXfermode 千万不要被这个b的名字吓到,不熟悉看到可能会认为很难记,其实 只要站在巨人的丁丁上 还是很简单的. 好了 废话不多说 ,跟我一步步来做一个炫酷的view吧

  • Android自定义View 实现水波纹动画引导效果

    一.实现效果图 二.实现代码 1.自定义view package com.czhappy.showintroduce.view; import android.content.Context; import android.graphics.Bitmap; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.Pat

随机推荐