Android自定义控件实现水波纹效果

本文实例为大家分享了Android自定义控件实现水波纹的具体代码,供大家参考,具体内容如下

示例代码:

MainActivity.java

package com.example.mhy.shuibowen;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
  }
}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"

  tools:context="com.example.mhy.shuibowen.MainActivity">

  <com.example.mhy.shuibowen.MyRingWave
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    />
</RelativeLayout>

MyRingWave.java

package com.example.mhy.shuibowen;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.os.Handler;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

import java.util.ArrayList;

/**
 * 水波纹效果
 * Created by mhy on 2016/6/16.
 */
public class MyRingWave extends View {
  /**
   * 二个相临波浪中心点的最小距离
   */
  private static final int DIS_SOLP = 13;
  protected boolean isRunning = false;

  private ArrayList<Wave> wList;

  public MyRingWave(Context context,AttributeSet attrs) {
    super(context, attrs);
    wList = new ArrayList<MyRingWave.Wave>();
  }

  @Override
  protected void onDraw(Canvas canvas) {
    for(int i=0; i<wList.size(); i++) {
      Wave wave = wList.get(i);
      canvas.drawCircle(wave.cx, wave.cy, wave.r, wave.p);
    }
  }

  @Override
  public boolean onTouchEvent(MotionEvent event) {
    super.onTouchEvent(event);

    switch(event.getAction()) {
      case MotionEvent.ACTION_DOWN:
      case MotionEvent.ACTION_MOVE:

        int x = (int) event.getX();
        int y = (int) event.getY();

        addPoint(x, y);

        break;
      default:
        break;
    }
    return true;
  }

  private Handler handler = new Handler(){
    public void handleMessage(android.os.Message msg) {

      //刷新数据
      flushData();
      //刷新页面
      invalidate();
      //循环动画
      if (isRunning) {
        handler.sendEmptyMessageDelayed(0, 50);
      }

    }
  };

  /**
   * 刷新数据
   */
  private void flushData() {

    for (int i = 0; i < wList.size(); i++) {

      Wave w = wList.get(i);

      //如果透明度为 0 从集合中删除
      int alpha = w.p.getAlpha();
      if(alpha == 0){
        wList.remove(i); //删除i 以后,i的值应该再减1 否则会漏掉一个对象,不过,在此处影响不大,效果上看不出来。
        continue;
      }

      alpha-=5;
      if(alpha<5){
        alpha =0;
      }
      //降低透明度
      w.p.setAlpha(alpha);

      //扩大半径
      w.r = w.r+3;
      //设置半径厚度
      w.p.setStrokeWidth(w.r/3);
    }

 /*
  * 如果集合被清空,就停止刷新动画
  */
    if(wList.size() == 0){
      isRunning = false;
    }
  }

  /**
   * 添加新的波浪中心点
   * @param x
   * @param y
   */
  private void addPoint(int x, int y) {

    if(wList.size() == 0) {
      addPoint2List(x, y);
      isRunning = true;
      handler.sendEmptyMessage(0);
    }else{
      Wave w = wList.get(wList.size()-1);

      if(Math.abs(w.cx - x)>DIS_SOLP || Math.abs(w.cy-y)>DIS_SOLP){
        addPoint2List(x,y);
      }

    };
  }

  /**
   * 添加新的波浪
   * @param x
   * @param y
   */
  private void addPoint2List(int x, int y) {
    Wave w = new Wave();
    w.cx = x;
    w.cy=y;
    Paint pa=new Paint();
    pa.setColor(colors[(int)(Math.random()*4)]);
    pa.setAntiAlias(true);
    pa.setStyle(Paint.Style.STROKE);

    w.p = pa;

    wList.add(w);
  }

  private int [] colors = new int[]{Color.BLUE,Color.RED,Color.YELLOW,Color.GREEN};
  private class Wave {
    //圆心
    int cx;
    int cy;

    //画笔
    Paint p;
    //半径
    int r;
  }
}

MyRing.java

package com.example.mhy.shuibowen;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.os.Handler;
import android.os.Message;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

/**
 * Created by mhy on 2016/6/16.
 */
public class MyRing extends View {

  /**
   * 圆心的X坐标
   */
  private float cx;

  /**
   * 圆心的Y坐标
   */
  private float cy;
  /**
   * 圆环半径
   */
  private float radius = 0;
  /**
   * 默认画笔
   */
  private Paint paint;
  private boolean isRuning = false;

  public MyRing(Context context, AttributeSet attrs) {
    super(context, attrs);
    initView();
  }

  private void initView() {
    radius = 0;
    paint = new Paint();
    paint.setAntiAlias(true);
    paint.setStyle(Paint.Style.STROKE); // 空心圆
    paint.setStrokeWidth(radius / 4); // 画笔宽度 半径4分之一
    paint.setColor(Color.GREEN); // 画笔颜色
    paint.setAlpha(255); //不透明
  }

  @Override
  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
  }

  @Override
  protected void onLayout(boolean changed, int l, int t, int r, int b) {
    if(changed) {
      cx = getWidth() / 2;
      cy = getHeight() / 2;
    }
  }

  @Override
  protected void onDraw(Canvas canvas) {
    canvas.drawCircle(cx, cy, radius, paint);
  }

  @Override
  protected void onAttachedToWindow() {
    super.onAttachedToWindow();
  }

  @Override
  protected void onDetachedFromWindow() {
    super.onDetachedFromWindow();
    isRuning = false;
  }

  @Override
  public boolean onTouchEvent(MotionEvent event) {
    super.onTouchEvent(event);

    if(event.getAction() == MotionEvent.ACTION_DOWN) {
      cx = event.getX();
      cy = event.getY();
      initView();
      startAnim();
    }
    return true;
  }

  private Handler handler = new Handler(){
    @Override
    public void handleMessage(Message msg) {

      // 设置透明度
      int alpha = paint.getAlpha();
      if(alpha == 0) {
        isRuning = false;
      }

      // 透明度 慢慢变透明
      alpha = Math.max(0, alpha-10);

      paint.setAlpha(alpha);

      System.out.println(alpha);

      // 设置半径
      radius += 5;
      paint.setStrokeWidth(radius / 3);
      invalidate();

      if(isRuning) {
        handler.sendEmptyMessageDelayed(0, 50);
      }
    }
  };
  private void startAnim() {
    isRuning = true;
    handler.sendEmptyMessageDelayed(0, 50);
  }

}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Android 5.0 实现水波扩散效果

    本文实例为大家分享了Android 5.0 实现水波扩散效果的具体代码,供大家参考,具体内容如下 该效果是通过自定义界面来实现的 1.首先自定义属性,attrs.xml代码如下: <?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="RippleView"> <attr name="rippleCo

  • Android特效之水波纹的实现

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

  • 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自定义WaveView水波纹控件

    本文实例为大家分享了android自定义WaveView水波纹控件的使用方法,供大家参考,具体内容如下 Github Repository and libaray WaveView水波纹控件 首先看下演示demo demo中可以看到不同高度,不同速度,不同幅度的水波纹:你可以通过view的参数直接控制view的表现形式. 引入你的工程 在项目的根目录下的build.gradle文件中添加如下代码: allprojects { repositories { ... maven { url 'htt

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

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

  • Android实现水波纹扩散效果

    本文实例为大家分享了Android实现水波纹扩散效果的具体代码,供大家参考,具体内容如下 先上图 囧!没有图片所以就拿了小安代替了. 先看一下如何使用这个View. <jianpan.com.mybutton.view.RippleDiffuse android:layout_width="200dp" android:layout_height="200dp" app:btn_img_res="@drawable/rd" app:ripp

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

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

  • Android水波纹载入控件CircleWaterWaveView使用详解

    一.效果图 本控件已上传Github,欢迎Star和Fork,项目地址:CircleWaterWaveView 二.设计思路 观察效果图,可以看出,该自定义控件由三个部分构成:外圆.内圆.正弦曲线.他们的关系如下图: 因为控件是动态的,所以我们需要一个线程去不停地绘制,所以我选择了SurfaceView来作为该控件地父类.该控件地核心是如何去绘制波浪,我采用如下的思路来进行内圆下部地绘制.利用内圆与正弦曲线地交集,来绘制. 核心代码如下: /** * 绘制图像 * * @author luxun

  • Android实现水波纹特效

    最近需要做个类似于水波纹动画的效果,思考了一下不需要UI切个动态图,Android原生的技术利用动画或者自定义控件都可以实现,下面上个图类似于这样的效果 下面请看第一种动画实现,这种方式较为简单些,就是利用3个ImageView不断地做缩放和渐变的动画. 布局文件定义一下 <RelativeLayout android:id="@+id/rl" android:layout_width="match_parent" android:layout_height=

  • Android中Item实现点击水波纹效果

    前言 水波纹效果大致上可以分为两类,一类是有界水波纹,而另一类是无界水波纹,较为广泛使用的是有界水波纹. 系统自带的水波纹实现 系统自带的方法非常方便,只需要给相应的空间设置背景,背景内容则为系统自带的 selectableItemBackground ,这样的话,水波纹就会在TextView所在的区域内进行绘制. <TextView android:background="?android:attr/selectableItemBackground" ... /> 先上效

随机推荐