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();
}
}
}
