自定义控件探究

从今天开始每天会分享一些自定义控件编程相关内容。

自定义控件研发算是Android研发中的一颗明珠。每每Android推出漂亮功能的时候，都是某位代码工匠精心雕琢的硕果。研究他们的实现原理，相关技巧，有助于我们开发更好Android功能。常言道：熟读唐诗三百首，不会作诗也会吟。

好，今天我们先研究一个比较经典的，经常会碰到，但是又觉得实现起来有一定难度的“水波纹”效果。

核心类继承至View类

public class WaterBubbleView extends View {    /**     * 初始半径     */    private final int RADIUS = 40;    /**     * 初始透明度     */    private final int ALPHA = 255;    private Canvas canvas;    private Paint paint;    /**     * 颜色数组     */    private final int colors[] = new int[]{Color.RED, Color.BLUE,            Color.GREEN, Color.YELLOW, Color.BLACK, Color.CYAN, Color.GRAY,            Color.GRAY, Color.MAGENTA};    /**     * 圆心X坐标     */    private int cx;    /**     * 圆心Y坐标     */    private int cy;    /**     * 圆的半径     */    private int radius = RADIUS;    /**     * 运行状态     */    private boolean isRunning = false;    /**     * 透明度     */    private int alpha = ALPHA;    /**     * 实现动画效果     */    private Handler handler = new Handler(new Callback() {        @Override        public boolean handleMessage(Message msg) {            alpha -= 4;            paint.setAlpha(alpha);            radius += 15;            if (alpha <= 10) {                isRunning = false;                radius = RADIUS;                alpha = ALPHA;            }            invalidate();            return true;        }    });    public WaterBubbleView(Context context, AttributeSet attrs) {        super(context, attrs);        init();    }    private void init() {        canvas = new Canvas();        paint = new Paint();        paint.setAntiAlias(true);    }

    //这是第三步，在屏幕上画出视图，在此之前还有个第二步onLayout方法，用来决定视图绘制在屏幕的哪个部位，一般认为决定视图左上角和右下角的两个位置。    @Override    protected void onDraw(Canvas canvas) {        if (isRunning) {            System.out.println("isRun, draw");            canvas.drawCircle(cx, cy, radius, paint);            handler.sendEmptyMessageDelayed(0, 20);        } else {            System.out.println("noRun, change");            paint.setColor(colors[(int) (Math.random() * colors.length)]);        }    }

    //用来测量视图绘制在屏幕上的大小尺度，这是继承View的第一步    @Override    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        super.onMeasure(widthMeasureSpec, heightMeasureSpec);    }    @Override    public boolean onTouchEvent(MotionEvent event) {        switch (event.getAction()) {            case MotionEvent.ACTION_DOWN:                //保证每次按下时绘图颜色重置                radius=40;                alpha=255;                if (!isRunning) {                    isRunning = true;                }                cx = (int) event.getX();                cy = (int) event.getY();                handler.sendEmptyMessage(0);                break;            case MotionEvent.ACTION_HOVER_MOVE:                isRunning = true;                break;            case MotionEvent.ACTION_UP:                isRunning = true;                break;        }        return super.onTouchEvent(event);    }}

引用方式：

<com.voyage.waterbubble.WaterBubbleView    android:layout_width="fill_parent"    android:layout_height="fill_parent" />

layout_height可以指定为固定高度，波纹会在视图中绘画。

特别说明：当alpha 的值为0时将停止循环绘制。

实现原理：init(）  中初始化画布和画笔，

在onDraw()中首次画默认圆，发送handler消息，更新半径和透明图参数，启动   invalidate()  方法，再次绘画，如此循环。直到alpha值为o，停止绘画。 

效果图：