android自定义view案例,自定义动态View：Android 自定义View实例

前言

Android 开发中自定义View的重要性不言而喻，这里就结合github上一个自定义view的代码来进行分析，代码中提供了动态效果，使用两种方式来生成了自定义View。

效果图：

image

以下是介绍。

自定义View

在安卓开发艺术探索中，自定义View被分为4类

继承View重写onDraw方法

继承ViewGroup派生特殊的Layout

继承特定的View

继承特定的ViewGroup

这里就使用上述1和4来实现效果。

继承View重写onDraw方法

这种方法主要用于实现一些不规则的效果，需要自己重写onDraw方法，同时需要自己支持wrap_content，并且padding也需要自己处理，这里因为实现的两个View会添加到一个重写的ViewGroup里，所以没有实现。

首先是简单的Solid：

class Solid extends View {

// This is a Rect to cover the main view

private Paint aboveWavePaint;

private Paint blowWavePaint;

public Solid(Context context, AttributeSet attrs) {

this(context, attrs, 0);

}

public Solid(Context context, AttributeSet attrs, int defStyleAttr) {

super(context, attrs, defStyleAttr);

LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT);

// 这里为1则在LinearLayout中会填满剩余空间

params.weight = 1;

setLayoutParams(params);

}

public void setAboveWavePaint(Paint aboveWavePaint) {

this.aboveWavePaint = aboveWavePaint;

}

public void setBlowWavePaint(Paint blowWavePaint) {

this.blowWavePaint = blowWavePaint;

}

@Override

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

canvas.drawRect(getLeft(), 0, getRight(), getBottom(), blowWavePaint);

canvas.drawRect(getLeft(), 0, getRight(), getBottom(), aboveWavePaint);

}

}

Solid实现的效果很简单，从onDraw中可以看到，Solid画了两个正方形，效果是实现了WaveView的下面部分，也就是波浪线的下方。

接下来是Wave，波浪线，不重要的代码被去除了，只关注最重要的部分：

// y=Asin(ωx+φ)+k

class Wave extends View {

......

// ω

private double omega;

public Wave(Context context, AttributeSet attrs) {

this(context, attrs, R.attr.waveViewStyle);

}

public Wave(Context context, AttributeSet attrs, int defStyle) {

super(context, attrs, defStyle);

}

@Override

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

canvas.drawPath(mBlowWavePath, mBlowWavePaint);

canvas.drawPath(mAboveWavePath, mAboveWavePaint);

}

......

/**

* calculate wave track

* this is why is can wave

* y=Asin(ωx+φ)+k

*/

private void calculatePath() {

mAboveWavePath.reset();

mBlowWavePath.reset();

getWaveOffset();

float y;

mAboveWavePath.moveTo(left, bottom);

// calculate the path by sin

for (float x = 0; x <= mMaxRight; x += X_SPACE) {

y = (float) (mWaveHeight * Math.sin(omega * x + mAboveOffset) + mWaveHeight);

mAboveWavePath.lineTo(x, y);

}

mAboveWavePath.lineTo(right, bottom);

mBlowWavePath.moveTo(left, bottom);

for (float x = 0; x <= mMaxRight; x += X_SPACE) {

y = (float) (mWaveHeight * Math.sin(omega * x + mBlowOffset) + mWaveHeight);

mBlowWavePath.lineTo(x, y);

}

mBlowWavePath.lineTo(right, bottom);

}

@Override

protected void onWindowVisibilityChanged(int visibility) {

super.onWindowVisibilityChanged(visibility);

if (View.GONE == visibility) {

removeCallbacks(mRefreshProgressRunnable);

} else {

removeCallbacks(mRefreshProgressRunnable);

mRefreshProgressRunnable = new RefreshProgressRunnable();

post(mRefreshProgressRunnable);

}

}

@Override

protected void onDetachedFromWindow() {

super.onDetachedFromWindow();

}

@Override

public void onWindowFocusChanged(boolean hasWindowFocus) {

super.onWindowFocusChanged(hasWindowFocus);

if (hasWindowFocus) {

if (mWaveLength == 0) {

startWave();

}

}

}

@Override

protected void onLayout(boolean changed, int left, int top, int right, int bottom) {

super.onLayout(changed, left, top, right, bottom);

if (mWaveLength==0){

startWave();

}

}

private void startWave() {

if (getWidth() != 0) {

int width = getWidth();

mWaveLength = width * mWaveMultiple;

left = getLeft();

right = getRight();

bottom = getBottom() + 2;

mMaxRight = right + X_SPACE;

omega = PI2 / mWaveLength;

}

}

private void getWaveOffset() {

if (mBlowOffset > Float.MAX_VALUE - 100) {

mBlowOffset = 0;

} else {

mBlowOffset += mWaveHz;

}

if (mAboveOffset > Float.MAX_VALUE - 100) {

mAboveOffset = 0;

} else {

mAboveOffset += mWaveHz;

}

}

private class RefreshProgressRunnable implements Runnable {

public void run() {

synchronized (Wave.this) {

long start = System.currentTimeMillis();

calculatePath();

invalidate();

// update every 16ms

long gap = 16 - (System.currentTimeMillis() - start);

postDelayed(this, gap < 0 ? 0 : gap);

}

}

}

}

Wave的逻辑是这样的：

当窗口可视时，如果View不是GONE则调用post方法后台运行一个RefreshProgressRunnable对象

RefreshProgressRunnable对象则调用calculatePath方法计算要画的路径，然后调用postDelayed方法，在16ms内再次计算路径

calculatePath方法中则根据y=Asin(ωx+φ)+k，x以一定的间隔增大，从左到右的计算函数值并调用path的lineTo方法勾画路径，k则为设置的高度值，是水波的最高值

调用invalidate方法更新视图

onDraw方法中根据路径重画

继承特定的ViewGroup实现自定义View

这里是WaveView，它继承了LinearLayout，里面添加了Wave和Solid两个View，Wave负责水波纹效果，Solid则是水面下。

public class WaveView extends LinearLayout {

......

public WaveView(Context context, AttributeSet attrs) {

super(context, attrs);

setOrientation(VERTICAL);

......

addView(mWave);

addView(mSolid);

setProgress(mProgress);

}

// The height of Wave

public void setProgress(int progress) {

this.mProgress = progress > 100 ? 100 : progress;

computeWaveToTop();

}

@Override

public void onWindowFocusChanged(boolean hasWindowFocus) {

super.onWindowFocusChanged(hasWindowFocus);

if (hasWindowFocus) {

computeWaveToTop();

}

}

private void computeWaveToTop() {

mWaveToTop = (int) (getHeight() * (1f - mProgress / 100f));

ViewGroup.LayoutParams params = mWave.getLayoutParams();

if (params != null) {

((LayoutParams) params).topMargin = mWaveToTop;

}

mWave.setLayoutParams(params);

}

......

}

这个就比较简单了，computeWaveToTop计算wave视图到顶部的距离，以此实现WaveView progress的变化。

总结

上面这个例子实现了自定义View，继承View 重写了onDraw方法，同时继承LinearLayout，通过组合加上多线程的更新，达到了一个良好的效果。这也同时说明了自定义View对我们开发者有多重要，它通过特殊的排列组合能够完成令人眼前一亮的效果，大大拓展了安卓开发界面的效果。

参考资料

个人思考

有时候会觉得遇到了瓶颈，有时候会不知道做什么，这时候就学点新东西吧，看看书吧，这种时候就是我们能够大进步的时候，有瓶颈说明我们有不足，即使无法认清我们的不足之处，我们也可以学点新的东西，把旧知识弄的深入。会有进步的。