Android开发-自定义View-AndroidStudio(十七)自定义水波纹(1)

原创 2017年01月03日 10:16:30
转载请注明出处:http://blog.csdn.net/iwanghang/
觉得博文有用,请点赞,请评论,请关注,谢谢!~


老规矩,先上GIF动态图,看个效果,如果符合你的项目或者确定你要了解的内容,再往下看吧:
2个动图,上面的动图只实现了圆环内径自增和圆环宽度的自增,下面的动图实现了透明度的改变。
WaveView.java:
package com.iwanghang.waveview;

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.View;

/**
 * 水波纹
 */
public class WaveView extends View {

    private Paint paint;
    private int radio = 5; // 圆环半径

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

    // 1、创建画笔
    private void initView() {
        paint = new Paint();
        paint.setColor(Color.RED);
        paint.setAntiAlias(true); // 抗锯齿
        paint.setStyle(Paint.Style.STROKE); // 样式为圆环
        paint.setStrokeWidth(radio); // 圆环宽度为radio
    }

    // 2、开始绘制
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawCircle(200,200,radio,paint); // 重绘的圆环的内径A1
        handler.sendEmptyMessageDelayed(0,50);
    }

    // 3、让圆环动起来 实例化一个Handler
    private Handler handler = new Handler(){
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            radio += 5; // 这里的自增会影响每一次重绘的圆环的内径A1和圆环的宽度A2
            paint.setStrokeWidth(radio); // 重绘的圆环的宽度A2
            invalidate(); // onDraw();
        }
    };

}
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.iwanghang.waveview.MainActivity">

    <com.iwanghang.waveview.WaveView
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</RelativeLayout>


WaveView.java:
package com.iwanghang.waveview;

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.View;

/**
 * 水波纹
 */
public class WaveView extends View {

    private Paint paint;
    private int radio = 5; // 圆环半径

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

    // 1、创建画笔
    private void initView() {
        paint = new Paint();
        paint.setColor(Color.RED);
        paint.setAntiAlias(true); // 抗锯齿
        paint.setStyle(Paint.Style.STROKE); // 样式为圆环
        paint.setStrokeWidth(radio); // 圆环宽度为radio
    }

    // 2、开始绘制
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawCircle(200,200,radio,paint); // 重绘的圆环的内径A1
        handler.sendEmptyMessageDelayed(0,50);
    }

    // 3、让圆环动起来 实例化一个Handler
    private Handler handler = new Handler(){
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            radio += 5; // 这里的自增会影响每一次重绘的圆环的内径A1和圆环的宽度A2
            paint.setStrokeWidth(radio); // 重绘的圆环的宽度A2

            // 4、让圆环透明度递减
            int alpha = paint.getAlpha();
            alpha -= 5;
            if (alpha <= 0){
                alpha = 0;
            }
            paint.setAlpha(alpha);

            invalidate(); // onDraw();
        }
    };

}

问题来了,现在是无休止的重绘,我们需要加一些判断,比如透明为0,就不要在重绘了。请按B1->B2->B3顺序看代码~

WaveView.java:
package com.iwanghang.waveview;

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.View;

/**
 * 水波纹
 */
public class WaveView extends View {

    private Paint paint;
    private int radio = 5; // 圆环半径

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

    // 1、创建画笔
    private void initView() {
        paint = new Paint();
        paint.setColor(Color.RED);
        paint.setAntiAlias(true); // 抗锯齿
        paint.setStyle(Paint.Style.STROKE); // 样式为圆环
        paint.setStrokeWidth(radio); // 圆环宽度为radio
    }

    // 2、开始绘制
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawCircle(200,200,radio,paint); // 重绘的圆环的内径A1
        if (paint.getAlpha()>0){ // 只有当透明度大于0 才继续给handler发消息 B3
            handler.sendEmptyMessageDelayed(0,50); // 每次重绘后,等待50毫秒,给handler发消息 B1
        }
    }

    // 3、让圆环动起来 实例化一个Handler
    private Handler handler = new Handler(){
        @Override
        public void handleMessage(Message msg) {
            // 每次handler接到消息都要invalidate()从而onDraw(); B2
            super.handleMessage(msg);
            radio += 5; // 这里的自增会影响每一次重绘的圆环的内径A1和圆环的宽度A2
            paint.setStrokeWidth(radio); // 重绘的圆环的宽度A2

            // 4、让圆环透明度递减
            int alpha = paint.getAlpha();
            alpha -= 5;
            if (alpha <= 0){
                alpha = 0;
            }
            paint.setAlpha(alpha);

            invalidate(); // onDraw();
        }
    };

}























转载请注明出处:http://blog.csdn.net/iwanghang/



欢迎移动开发爱好者交流
沈阳或周边城市公司有意开发Android,请与我联系
联系方式

微信:iwanghang
QQ:413711276
邮箱:iwanghang@qq.com



觉得博文有用,请点赞,请评论,请关注,谢谢!~

版权声明:本文为博主原创文章,如转载,请标明出处。

Android Studio开发基础之自定义View组件

一般情况下,不直接使用View和ViewGroup类,而是使用使用其子类。例如要显示一张图片可以用View类的子类ImageView,开发自定义View组件可分为两个主要步骤: 一、创建一个继承自a...
  • lucky51222
  • lucky51222
  • 2015年05月19日 16:39
  • 7243

Android开发-自定义View-AndroidStudio(十八)自定义水波纹(2)

转载请注明出处:http://blog.csdn.net/iwanghang/ 觉得博文有用,请点赞,请评论,请关注,谢谢!~ 老规矩,先上GIF动态图,看个效果,如果符合你的项目或者确定你要了解...
  • iwanghang
  • iwanghang
  • 2017年01月03日 11:05
  • 890

Android开发-自定义View-AndroidStudio(一)

转载请注明出处:http://blog.csdn.net/iwanghang/article/details/53611277 觉得博文有用,请点赞,请评论,请关注,谢谢!~ 项目源码:http://...
  • iwanghang
  • iwanghang
  • 2016年12月13日 16:53
  • 742

Android开发-自定义View-AndroidStudio(八)自定义View初体验

转载请注明出处:http://blog.csdn.net/iwanghang/article/details/53783417 觉得博文有用,请点赞,请评论,请关注,谢谢!~ 老规矩,先上效果图,看个...
  • iwanghang
  • iwanghang
  • 2016年12月21日 13:41
  • 520

Android开发-自定义View-AndroidStudio(十四)快速索引(1)

转载请注明出处:http://blog.csdn.net/iwanghang/ 觉得博文有用,请点赞,请评论,请关注,谢谢!~ 老规矩,先上GIF动态图,看个效果,如果符合你的项目或者确定你要了解...
  • iwanghang
  • iwanghang
  • 2016年12月27日 14:38
  • 675

Android自定义View——实现水波纹效果类似剩余流量球

最近突然手痒就想搞个贝塞尔曲线做个水波纹效果玩玩,终于功夫不负有心人最后实现了想要的效果,一起来看下吧: 效果图镇楼一:先一步一步来分解一下实现的过程 需要绘制一个正弦曲线(sin)或者余弦曲线(co...
  • a_zhon
  • a_zhon
  • 2017年09月04日 23:51
  • 15826

Android利用自定义View实现水波纹效果

这个是朋友当时帮我写出来的一个,自定义View实现水波纹的效果   记录下来,以后多看看   温故而知新    效果图就是这样      这是 在自定义View类写的代码 pack...
  • better_candy
  • better_candy
  • 2015年08月27日 10:25
  • 430

Android开发-自定义View-AndroidStudio(十六)侧滑删除

转载请注明出处:http://blog.csdn.net/iwanghang/article/details/53929510 觉得博文有用,请点赞,请评论,请关注,谢谢!~ 项目源码下载:htt...
  • iwanghang
  • iwanghang
  • 2016年12月29日 16:23
  • 636

Android开发-自定义View-AndroidStudio(十九)HackView

转载请注明出处:http://blog.csdn.net/iwanghang/ 觉得博文有用,请点赞,请评论,请关注,谢谢!~ 老规矩,先上GIF动态图,看个效果,如果符合你的项目或者确定你要了解...
  • iwanghang
  • iwanghang
  • 2017年01月03日 15:31
  • 840

Android自定义控件之自定义View(三)——自定义水波纹

转载请注明出处:http://blog.csdn.net/xiaohao0724/article/details/54572605 上一篇我们实现了点击屏幕以点击的这个点为圆心画圆并放大,现在我们对上...
  • xiaohao0724
  • xiaohao0724
  • 2017年01月16日 11:32
  • 183
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Android开发-自定义View-AndroidStudio(十七)自定义水波纹(1)
举报原因:
原因补充:

(最多只允许输入30个字)