android自定义view圆,android 自定义View--圆扩散

前言

2018.5.3今天正式加入简书，记录下。以后的android博客从开源中国转向简书。要问我理由，只因为发现自己逛简书比较经常，而且编辑工具相对于开源中国好多了。那么这里对以前写过的博客，筛选一些相对好的搬过来，同时也温故而知新。

概述

最近跟我的一个同事在讨论关于---有没有必要重复造轮子？ 就我感受而言不重复造轮子让更多的时间去研究更广阔的领域。但前提是你有一定基础，什么基础呢？知道这个轮子它的实现原理是什么？让你独自去实现同样的效果你有把握吗？如果你有把握，那么恭喜你，你完全可以去复制别人的轮子，把时间花费在你未知的领域。当然像比较庞大的第三方，不建议太深入以免脱不了坑，适当就行。

圆扩散

项目中涉及到一个圆形不断的扩散效果，找了下网上也有类似的效果，但是呢，像扩散速度、间距、屏幕适配等等不是很完善，同时借鉴了代码，自己根据需求完善了这个自定义view。就当做练练手，以后关于这类的题材也会继续更新。

实心扩散

虚线扩散

实现步骤

1.先画一个圆，同时将圆的半径抽出一个变量(半径是可变的)

2.添加新圆的时机，采用数组遍历画多个圆

3.处理数组中数据

代码

自定义属性

这里提一下，name最好跟class名一致。

WaveView的实现

package partyhistorymuseum.lixiaoqian.com.custom_1;

import android.content.Context;

import android.content.res.TypedArray;

import android.graphics.Canvas;

import android.graphics.Paint;

import android.support.annotation.Nullable;

import android.util.AttributeSet;

import android.view.View;

import java.util.ArrayList;

import java.util.List;

/**

* Created by huangzhibo on 2017/9/25/025.

* 步骤:拆分式实现

* 1.先画个圆,通过属性动画扩散(根据圆的radius)

* 2.通过255f/view宽*当前drawCiry 去设置透明度

* 3.间隔多久(间距)在画一个圆

* mail:1043202454@qq.com

*/

public class WaveView extends View {

private static int centerColor;

private Paint mPaint;

private float alpharate;

private boolean isStartAnim = false;

private int mSpace;

private int mWidth;

private boolean isFillstyle;

private List mCount= new ArrayList();

private List mAlphas = new ArrayList();

public WaveView(Context context) {

this(context, null);

}

public WaveView(Context context, @Nullable AttributeSet attrs) {

this(context, attrs, 0);

}

public WaveView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {

super(context, attrs, defStyleAttr);

TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.WaveView, defStyleAttr, 0);

centerColor = typedArray.getColor(R.styleable.WaveView_wavecolor, getResources().getColor(R.color.colorAccent));

mSpace = typedArray.getInteger(R.styleable.WaveView_space, 100);

isFillstyle = typedArray.getBoolean(R.styleable.WaveView_fillstyle, true);

mWidth = typedArray.getInteger(R.styleable.WaveView_width, 400);

typedArray.recycle();

init();

}

private void init() {

mPaint = new Paint();

mPaint.setAntiAlias(true);

if (isFillstyle) {

mPaint.setStyle(Paint.Style.FILL);

} else {

mPaint.setStyle(Paint.Style.STROKE);

mPaint.setStrokeWidth(3);

}

alpharate = 255f / mWidth; //注意这里 如果为int类型就会为0,除数中f一定要加,默认int ;

mAlphas.add(255);

mCount.add(0f);

}

@Override

protected void onDraw(Canvas canvas) {

if (isStartAnim) {

invalidate();

}

mPaint.setColor(centerColor);

for (int i = 0; i < mCount.size(); i++) { //遍历圆数目

Integer cuAlpha = mAlphas.get(i);

mPaint.setAlpha(cuAlpha);

Float aFloat = widths.get(i);

canvas.drawCircle(getWidth() / 2, getHeight() / 2, aFloat, mPaint); //画圆

if (aFloat < mWidth) { //扩散直径和透明度

mAlphas.set(i, (int) (255 - alpharate * aFloat));

mCount.set(i, aFloat + 1);

}

}

if (widths.size() >= 5) {

mAlphas.remove(0);

mCount.remove(0);

}

if (widths.get(widths.size() - 1) == mSpace) {

mAlphas.add(255);

mCount.add(0f);

}

}

public void startAnim() {

isStartAnim = true;

invalidate();

}

public void pauseAnim() {

isStartAnim = false;

}

}

alpharate的值是float类型的，如果采用int类型在mWidth大于255的时候永远都是0，int类型对于余数都是直接舍去取整。

对于if (isStartAnim) { invalidate();}代码建议放在onDraw最前面，Why？ 考虑到切换activity要立马暂停扩散动画，如果不这样，会有延迟，造成视觉上的卡顿。

在onDraw中最好不要new对象，请都放在构造函数中初始化。

xml布局

xmlns:zhibo="http://schemas.android.com/apk/res-auto"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context="partyhistorymuseum.lixiaoqian.com.custom_1.MainActivity">

android:id="@+id/waveView"

android:layout_width="400dp"

android:layout_height="400dp"

zhibo:wavecolor="@color/colorPrimary"

zhibo:space="100"

zhibo:width="400"

zhibo:fillstyle="false"

android:layout_centerInParent="true" />

总结

对于自定义view的特效还有很多，这里有一篇我之前写的高级自定义View仿TextView：仿TextView