前一段时间去百度面试,面试官让实现如下效果的自定义控件的思路,这里整理一下,并且通过代码实现这个效果的自定义View.
Wave.gif
先说一下思路:
思路:1.该view是一个标转的正余弦函数 Y=Asin(Wi+b)+h A表示幅度 W影响周期 b影响初始化位置 h影响高度
2.创建一个长度为控件width的数组,通过正余弦函数计算出各个像素上的Y坐标的位置
3.指定一个平移的速度,根据这个速度不断的改变数组
4.通过System.arraycopy来对数组进行元素进行平移的操作.(也可以通过不断设置b初相的值来改变数组的元素,不过这种操作显然更耗时间)
5.在ondraw中不断的通过drawPoint,drawLine或者的Path的LineTo方法绘制(具体使用哪种都可以)
6.在一次绘制完成以后通过postInvalidate来刷新.
public class WaveView extends View {
// 波纹颜色
private static final int WAVE_PAINT_COLOR = 0x880000aa;
// y = Asin(wx+b)+h
private static final float STRETCH_FACTOR_A = 20;
private static final int OFFSET_Y = 0;
// 第一条水波移动速度
private static final int TRANSLATE_X_SPEED_ONE = 20;
// 第二条水波移动速度
private static final int TRANSLATE_X_SPEED_TWO = 40;
private float mCycleFactorW;
private int mWith, mHeight;
private float[] mYPositions;
private float[] mResetOneYPositions;
private float[] mResetTwoYPositions;
private int mXOffsetSpeed1;
private int mXOffsetSpeed2;
private int mX1Offset;
private int mX2Offset;
private Paint mWavePaint;
private DrawFilter mDrawFilter;
public WaveView(Context context, AttributeSet attrs) {
super(context, attrs);
// 将dp转化为px，用于控制不同分辨率上移动速度基本一致
mXOffsetSpeed1 = UIUtils.dipToPx(context, TRANSLATE_X_SPEED_ONE);
mXOffsetSpeed2 = UIUtils.dipToPx(context, TRANSLATE_X_SPEED_TWO);
// 初始绘制波纹的画笔
mWavePaint = new Paint();
// 去除画笔锯齿
mWavePaint.setAntiAlias(true);
// 设置风格为实线
mWavePaint.setStyle(Style.FILL);
// 设置画笔颜色
mWavePaint.setColor(WAVE_PAINT_COLOR);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
// 从canvas层面去除绘制时锯齿
canvas.setDrawFilter(mDrawFilter);
resetPositonY();
for (int i = 0; i < mWith; i++) {
// 减400只是为了控制波纹绘制的y的在屏幕的位置，大家可以改成一个变量，然后动态改变这个变量，从而形成波纹上升下降效果
// canvas.drawLine(i, mHeight - mResetOneYPositions[i] - 400, i,
// mHeight,
// mWavePaint);
// canvas.drawLine(i, mHeight - mResetTwoYPositions[i] - 400, i,
// mHeight,
// mWavePaint);
canvas.drawPoint(i,mHeight - mResetOneYPositions[i] - 400,mWavePaint);
canvas.drawPoint(i,mHeight - mResetTwoYPositions[i] - 400,mWavePaint);
}
// 改变两条波纹的移动点
mX1Offset += mXOffsetSpeed1;
mX2Offset += mXOffsetSpeed2;
// 如果已经移动到结尾处，则重头记录
if (mX1Offset >= mWith) {
mX1Offset = mXOffsetSpeed1;
}
if (mX2Offset > mWith) {
mX2Offset = mXOffsetSpeed2;
}
// 引发view重绘，一般可以考虑延迟20-30ms重绘，空出时间片
postInvalidateDelayed(20);
}
private void resetPositonY() {
// mX1Offset代表当前第一条水波纹要移动的距离
int yOneInterval = mYPositions.length - mX1Offset;
// 使用System.arraycopy方式重新填充第一条波纹的数据
System.arraycopy(mYPositions, mX1Offset, mResetOneYPositions, 0, yOneInterval);
System.arraycopy(mYPositions, 0, mResetOneYPositions, yOneInterval, mX1Offset);
int yTwoInterval = mYPositions.length - mX2Offset;
System.arraycopy(mYPositions, mX2Offset, mResetTwoYPositions, 0,
yTwoInterval);
System.arraycopy(mYPositions, 0, mResetTwoYPositions, yTwoInterval, mX2Offset);
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
// 记录下view的宽高
mWith = w;
mHeight = h;
// 用于保存原始波纹的y值
mYPositions = new float[mWith];
// 用于保存波纹一的y值
mResetOneYPositions = new float[mWith];
// 用于保存波纹二的y值
mResetTwoYPositions = new float[mWith];
// 将周期定为view总宽度
mCycleFactorW = (float) (2 * Math.PI / mWith);
// 根据view总宽度得出所有对应的y值
for (int i = 0; i < mWith; i++) {
mYPositions[i] = (float) (STRETCH_FACTOR_A * Math.sin(mCycleFactorW * i) + OFFSET_Y);
}
}
}
分别介绍一下
1.在构造方法中初始化几个重要的参数mXOffsetSpeed:余弦的的推进速度,每一次绘制将每个像素上的Y增加mXOffsetSpeed个数值,初始化paint对象.
public WaveView(Context context, AttributeSet attrs) {
super(context, attrs);
// 将dp转化为px，用于控制不同分辨率上移动速度基本一致
mXOffsetSpeed1 = UIUtils.dipToPx(context, TRANSLATE_X_SPEED_ONE);
mXOffsetSpeed2 = UIUtils.dipToPx(context, TRANSLATE_X_SPEED_TWO);
// 初始绘制波纹的画笔
mWavePaint = new Paint();
// 去除画笔锯齿
mWavePaint.setAntiAlias(true);
// 设置风格为实线
mWavePaint.setStyle(Style.FILL);
// 设置画笔颜色
mWavePaint.setColor(WAVE_PAINT_COLOR);
}
2.onSizeChange方法在确认view的width和heigh时调用,此时传递,在这个方法中初始化几个数组,数组的大小跟view的宽度相等,这些数组用于存放每个像素上的Y轴值,并通过Math.sin方法生成每个像素对应的值.存放到数组中.
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
// 记录下view的宽高
mWith = w;
mHeight = h;
// 用于保存原始波纹的y值
mYPositions = new float[mWith];
// 用于保存波纹一的y值
mResetOneYPositions = new float[mWith];
// 用于保存波纹二的y值
mResetTwoYPositions = new float[mWith];
// 将周期定为view总宽度
mCycleFactorW = (float) (2 * Math.PI / mWith);
// 根据view总宽度得出所有对应的y值
for (int i = 0; i < mWith; i++) {
mYPositions[i] = (float) (STRETCH_FACTOR_A * Math.sin(mCycleFactorW * i) + OFFSET_Y);
}
}
3.ondraw方法:当view开始绘制时,根据数组每个像素的值,并通过canvas.drawLine来对x轴上的每个点画线,这样就绘制出了一个静态的余弦曲线,如果仅仅只需要一个曲线而不需要曲线下方的颜色时用canvas.drawPoint来绘制,这两种在代码里都存在,可以通过自己的需求来使用特定的样式.你也可以通过path的LineTo来绘制,这样也是可行的
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
// 从canvas层面去除绘制时锯齿
canvas.setDrawFilter(mDrawFilter);
resetPositonY();
for (int i = 0; i < mWith; i++) {
//通过drawline绘制波浪
// canvas.drawLine(i, mHeight - mResetOneYPositions[i] - 400, i,
// mHeight,
// mWavePaint);
// canvas.drawLine(i, mHeight - mResetTwoYPositions[i] - 400, i,
// mHeight,
// mWavePaint);
//通过drawPoint来画曲线
// 减400只是为了控制波纹绘制的y的在屏幕的位置，大家可以改成一个变量，然后动态改变这个变量，从而形成波纹上升下降效果
canvas.drawPoint(i,mHeight - mResetOneYPositions[i] - 400,mWavePaint);
canvas.drawPoint(i,mHeight - mResetTwoYPositions[i] - 400,mWavePaint);
}
4.在绘制一次只得到一个静态的曲线,而如何将这个曲线推动起来呢?通过则需要在绘制完成以后调用postInvalidate来进行下一次的绘制,而在绘制之前需要将x轴上每个点的高度改变,改变高度我们通过System.copyArrary来实现数组中元素的平移
public static void arraycopy(Object src, int srcPos. Object dest,int destPos,int length)
src:源数组； srcPos:源数组要复制的起始位置；
dest:目的数组； destPos:目的数组放置的起始位置； length:复制的长度。
注意：src and dest都必须是同类型或者可以进行转换类型的数组．
你也可以通过sin(wx+b)的方式通过改变b来重新获取一组坐标,但是这样的是很消耗性能的.所以建议使用copyArray来实现
private void resetPositonY() {
// mX1Offset代表当前第一条水波纹要移动的距离
int yOneInterval = mYPositions.length - mX1Offset;
// 使用System.arraycopy方式重新填充第一条波纹的数据
System.arraycopy(mYPositions, mX1Offset, mResetOneYPositions, 0, yOneInterval);
System.arraycopy(mYPositions, 0, mResetOneYPositions, yOneInterval, mX1Offset);
int yTwoInterval = mYPositions.length - mX2Offset;
System.arraycopy(mYPositions, mX2Offset, mResetTwoYPositions, 0,
yTwoInterval);
System.arraycopy(mYPositions, 0, mResetTwoYPositions, yTwoInterval, mX2Offset);
}
以上就是自定义view的全部代码.
