Rain.gif

Android 自定义View(二) 下雨效果

一 实现思路，

雨点用线段表示，通过控制线段的大小和宽度来表示不同的线段。

一个雨点下雨的过程可以表示为一条直线，一次雨点在下雨的过程中坐标表示为 y=kx+b;

通过不停的绘制调用onDraw 实现下雨的动画。

二 RainView

整个RainView 继承自View，然后把下雨的过程抽象为雨点，在RainView 中增加N个雨点，这样把整个下雨过程抽象到了RainDrop中，RainView 负责一些初始化工作。

在构造函数里面完成一些属性的解析，比如雨点的数量，所用的雨点用一个ArrayList 保存。

在onMeasure中对雨点做一些初始化工作，因为RainDrop 需要知道View的大小，而在RainView 构造的时候 宽和高还未知，所以放在了onMeasure处理，当然也可以放在onSizeChanged 中。

在OnDraw 方法中遍历调用RainDrop 的rain 方法，让雨点移动，然后调用 postInvalidateDelayed(mDelayTime); 不停的重新绘制，完成下雨的过程。

package com.dawang.androidexample.view;

import android.content.Context;

import android.content.res.TypedArray;

import android.graphics.Canvas;

import android.support.annotation.Nullable;

import android.util.AttributeSet;

import android.view.View;

import com.dawang.androidexample.R;

import java.util.ArrayList;

public class RainView extends View {

private ArrayList mDropList;

TypedArray mArray;

private int mDropNum;

private int mDelayTime = 10;

public RainView(Context context) {

super(context);

}

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

super(context, attrs);

mArray = context.obtainStyledAttributes(attrs, R.styleable.RainView);

mDropNum = mArray.getInteger(R.styleable.RainView_drop_number, 30);

if(mDropList == null){

mDropList = new ArrayList<>();

for(int i = 0; i < mDropNum ; i++){

RainDrop drop = new RainDrop(mArray);

mDropList.add(drop);

}

}

mArray.recycle();

}

@Override

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

drawRain(canvas);

}

void drawRain(Canvas canvas){

for (RainDrop drop:mDropList) {

drop.rain(canvas);

}

postInvalidateDelayed(mDelayTime);

}

@Override

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

super.onMeasure(widthMeasureSpec, heightMeasureSpec);

for (RainDrop drop:mDropList) {

drop.init(getMeasuredWidth(), getMeasuredHeight());

drop.initPos();

}

}

}

三 RainDrop

一个雨点在onDraw 方法中表示为

canvas.drawLine(mStartX, mStartY, mStartX+mRainSizeW, mStartY+mRainSizeW*mK, mPaint);

mStartX, mStartY 表示起点位置，mRainSizeW表示雨点的长度，根据y=kx+b 计算出y的坐标。mK表示斜率。下完雨以后，雨点继续向下移动

mStartX +=mSpeed;

mStartY +=mSpeed*mK;

雨点的速度(mSpeed)， 起始位置(mStartX, mStartY)，方向(斜率表示mK) 大小(mRainSizeW) 是有一定的随机性，雨点的大小在宽度上用线宽表示

mPaint.setStrokeWidth(mRainSize);

package com.dawang.androidexample.view;

import android.content.res.TypedArray;

import android.graphics.Canvas;

import android.graphics.Color;

import android.graphics.Paint;

import android.util.Log;

import com.dawang.androidexample.R;

import java.util.Random;

public class RainDrop {

// y=kx + b

private Paint mPaint = new Paint();

private int mStartX = 30;

private int mStartY = 0;

private int mK = 3;

private int mRainSizeW = 8;

private int mSpeed = 3;

private int mDirectX = 1;

private int mViewW;

private int mViewH;

private Random mRandom;

private int mRandRainSizeW;

private int mRandRainSpeed;

private int mRainColor;

private int mRainSize;

public RainDrop(TypedArray array){

mRandRainSizeW = array.getInteger(R.styleable.RainView_drop_length, 5);

mRandRainSpeed = array.getInteger(R.styleable.RainView_drop_speed, 5);

mRainColor = array.getColor(R.styleable.RainView_drop_color, Color.WHITE);

mRainSize = array.getInteger(R.styleable.RainView_drop_length, 3);

mPaint.setColor(mRainColor);

mPaint.setStrokeWidth(mRainSize);

}

void init(int w, int h){

mViewW = w;

mViewH = h;

}

void initPos(){

mRandom = new Random();

mStartX = mRandom.nextInt(mViewW);

mStartY = mRandom.nextInt(mViewH);

mRainSizeW = 5 + mRandom.nextInt(mRandRainSizeW);

mK = 3 + mRandom.nextInt(5);

mSpeed = 1+ mRandom.nextInt(mRandRainSpeed);

if((mSpeed + mK) %2 == 0){

mDirectX = 1;

} else {

mDirectX = 1;

}

}

void rain(Canvas canvas){

canvas.drawLine(mStartX, mStartY, mStartX+mRainSizeW, mStartY+mRainSizeW*mK, mPaint);

mStartX +=mSpeed*mDirectX;

mStartY +=mSpeed*mK;

if(mStartX > mViewW || mStartY > mViewH){

initPos();

}

}

}