android 自定义View--圆扩散

前言

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

概述

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

圆扩散

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

实心扩散
虚线扩散

实现步骤

1.先画一个圆,同时将圆的半径抽出一个变量(半径是可变的)
2.添加新圆的时机,采用数组遍历画多个圆
3.处理数组中数据

代码

自定义属性

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="WaveView">
        <attr name="wavecolor" format="color"/> <!--view颜色-->
        <attr name="fillstyle" format="boolean"/><!--Paint的填充风格-->
        <attr name="space" format="integer"/><!--每个圆形间距-->
        <attr name="width" format="integer"/><!--扩散的宽度-->
    </declare-styleable>
</resources>

这里提一下,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<Float> mCount= new ArrayList();
    private List<Integer> 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布局

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    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">

    <partyhistorymuseum.lixiaoqian.com.custom_1.WaveView
        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" />
</RelativeLayout>

总结

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

推荐文章:SearchView特效

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,332评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,508评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,812评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,607评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,728评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,919评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,071评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,802评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,256评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,576评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,712评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,389评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,032评论 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,798评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,026评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,473评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,606评论 2 350

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,833评论 25 707
  • 转自:https://www.jianshu.com/p/e9d8420b1b9c 自定义View是Android...
    CQ_TYL阅读 1,831评论 0 26
  • 网上有很多类似的教程,这次只是从一个初学者的角度,进行一番自定义view的思路分析,以达到举一反三的效果。 一、构...
    鱼头豆腐文阅读 2,560评论 7 45
  • 在教室里抬起头,惊喜地看到久违的王老师从教室门口走进,我心头微微一震,心间轻荡涟漪。同学们也和我一样,非常地激动,...
    围境阅读 244评论 0 0
  • 1.我是谁? 我是三岁孩子的妈妈,30岁的职场老油条,95后都叫我阿姨,可是,相比55岁还在努力工作的父母,我还是...
    阿柯姑娘阅读 222评论 0 0