Android - Custom View

来源：互联网发布：网络作家富豪榜 2016 编辑：程序博客网时间：2024/05/01 14:33

在很多时候，Android自带的控件并不能满足我们编程的需求。这个时候就需要我们开发出美观，功能完善的自定义控件。在智能灯泡的APP这个项目中，需要SlideMenu控件使得界面更加充实，需要ColorPickerView控件来自定义灯泡颜色。因此了解如何开发Android自定义View就显得很有必要。Android的自定义控件的开发步骤如下：

①View的工作原理
Android中所有的控件的基类都是View，ViewGroup也是对View类扩展成的视图容器类（……Layout）。View定义了绘图的基本操作，主要包括onMeasure(), onLayout(), onDraw()这三个子方法：

onMeasure()：确定视图的大小，通过setMeasuredDimension(width, heght)方法设置视图大小。
onLayout()：决定视图的布局坐标。在View类中定义为final类型，要求子类不能修改。其中setFrame(x0,y0,x1,y1)设置子View的具体位置(x0,y0) (x1,y1)为父View的坐标；onLayout()设置子View的布局类型。
OnDraw()：利用前两部份得到的参数，将自定义视图绘制在屏幕上。

②创建自定义控件
创建自定义控件有3种主要实现方式：

a. 继承已有的控件来实现，主要是当要实现的控件和已有的控件在很多方面的功能比较类似, 这是就可以通过对已有控件的扩展来满足要求。
b. 通过继承一个布局文件来实现自定义控件。此时不用onDraw方法绘制界面，在构造函数中通过inflater加载自定义控件的布局文件，再addView(view)，自定义控件的图形界面就加载进来了[14]。
c. 通过直接继承View类来实现自定义控件，使用GDI中的图形API来绘制出组件界面。

③自定义控件增加属性
为Android自定义控件增加属性有两种方法：

a. 在View类中申明属性，然后通过构造函数中引入的AttributeSet来得到XLM布局文件中的属性名称。
b. 按照Android API提供的标准写法，通过XML(Values. attr.xml)为View注册属性。（常用的方法）

④绘制控件
使用Android. Graphics API在onDraw()函数中绘制控件。

⑤响应用户动作
定义以下函数来响应用户动作：onKeyDown()按键按下事件，onKeyUp()按键抬起事件，onTrackballEvent()轨迹球事件，onTouchEvent()响应触屏事件

⑥定义回调函数
在自定义控件类中定义一个接口，这个接口用于在某个情景下执行相应的操作。然后在类中的合适位置调用接口中的方法，但是这个方法并没有实现。最后在使用这个控件的UI Activity中实现这个接口中的方法。这种接口回调机制会使得自定义控件更加灵活、适用。

侧滑菜单的例子

public class SlideMenu extends HorizontalScrollView {    private LinearLayout mWapper; //整体页面    private ViewGroup mMenu; //菜单页面    private ViewGroup mContent; //内容页面    private int mMenuWidth; //菜单的宽度    public SildeMenu(Context context, AttributeSet attrs) { ……………//初始化内容和菜单偏移量  }    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        // 设置 菜单页面 和 内容页面的 大小        if (!once) { //在一开始运行，防止多次调用该方法            mMenuWidth = mMenu.getLayoutParams().width = mScreenWidth                    - mMenuRightPaddding;  //设置菜单宽度            mContent.getLayoutParams().width = mScreenWidth; //设置内容的宽度            once = true;        }        super.onMeasure(widthMeasureSpec, heightMeasureSpec);    }    protected void onLayout(boolean changed, int l, int t, int r, int b) {        // 设置 菜单页面开始的偏移量        super.onLayout(changed, l, t, r, b);        if (changed) {          //将页面左移整个菜单的宽度，就可以将菜单隐藏在屏幕左侧            this.scrollTo(mMenuWidth, 0);        }    }    public boolean onTouchEvent(MotionEvent ev) { ….. // 响应用户动作事件 }    protected void onScrollChanged(int l, int t, int oldl, int oldt) {        // l =getScrollX(); 菜单当前的偏移量        //在滚动发生时，调用属性动画，设置transaction，        super.onScrollChanged(l, t, oldl, oldt);        ViewHelper.setTranslationX(mMenu, l);    }}

取色盘例子

package com.example.controlbulb;import android.content.Context;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Paint;import android.graphics.RectF;import android.graphics.Shader;import android.graphics.SweepGradient;import android.util.AttributeSet;import android.view.MotionEvent;import android.view.View;public class ColorPickerView extends View {    public interface OnColorChangedListener {        void colorChanged(int color);    }    public boolean flag;    private Paint mPaint;    private Paint mCenterPaint;    private final int[] mColors;    private OnColorChangedListener mListener;    public void setOnColorChangedListener(OnColorChangedListener l){        mListener = l;    }    public ColorPickerView(Context context, AttributeSet attrs) {        super(context,attrs,0);        //mListener = l;        mColors = new int[] { 0xFFFF0000, 0xFFFF00FF, 0xFF0000FF, 0xFF00FFFF,                0xFF00FF00, 0xFFFFFF00, 0xFFFF0000 };        Shader s = new SweepGradient(0, 0, mColors, null);        //初始化渐变色画笔         mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);        mPaint.setShader(s);        mPaint.setStyle(Paint.Style.STROKE);        mPaint.setStrokeWidth(50);        //初始化中心园画笔        mCenterPaint = new Paint(Paint.ANTI_ALIAS_FLAG);        mCenterPaint.setColor(0);        mCenterPaint.setStrokeWidth(5);    }    private boolean mTrackingCenter;//点击了中间的圆形区域    private boolean mHighlightCenter;//从点击了圆环之后，移动    private static final int CENTER_X = 170;    private static final int CENTER_Y = 170;    private static final int CENTER_RADIUS = 40;    @Override    protected void onDraw(Canvas canvas) {        float r = CENTER_X - mPaint.getStrokeWidth() * 0.5f;        //移动中心        canvas.translate(CENTER_X, CENTER_X);        //画出色环和中心园        canvas.drawOval(new RectF(-r, -r, r, r), mPaint);        canvas.drawCircle(0, 0, CENTER_RADIUS, mCenterPaint);        if (mTrackingCenter) {            int c = mCenterPaint.getColor();            mCenterPaint.setStyle(Paint.Style.STROKE);            if (mHighlightCenter) {                mCenterPaint.setAlpha(0xFF);            } else {                mCenterPaint.setAlpha(0x80);            }            canvas.drawCircle(0, 0,                    CENTER_RADIUS + mCenterPaint.getStrokeWidth(), mCenterPaint);            mCenterPaint.setStyle(Paint.Style.FILL);            mCenterPaint.setColor(c);        }    }    @Override    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        // 视图大小设置为直径        setMeasuredDimension(CENTER_X * 2, CENTER_Y * 2);    }    /*private int floatToByte(float x) {        int n = java.lang.Math.round(x);        return n;    }    private int pinToByte(int n) {        if (n < 0) {            n = 0;        } else if (n > 255) {            n = 255;        }        return n;    }*/    //算出两个值之间的指定比例的值公式为：value = p1 + p(p2-p1)    private int ave(int s, int d, float p) {        return s + java.lang.Math.round(p * (d - s));    }    //unit为触发点的到圆形的角度    //一个区域值unit到颜色数组中找到其对应的色值区域    private int interpColor(int colors[], float unit) {        if (unit <= 0) {            return colors[0];        }        if (unit >= 1) {            return colors[colors.length - 1];        }        float p = unit * (colors.length - 1);        int i = (int) p;        p -= i;        // now p is just the fractional part [0...1) and i is the index        int c0 = colors[i];        int c1 = colors[i + 1];        int a = ave(Color.alpha(c0), Color.alpha(c1), p);        int r = ave(Color.red(c0), Color.red(c1), p);        int g = ave(Color.green(c0), Color.green(c1), p);        int b = ave(Color.blue(c0), Color.blue(c1), p);        return Color.argb(a, r, g, b);    }    /*private int rotateColor(int color, float rad) {        float deg = rad * 180 / 3.1415927f;        int r = Color.red(color);        int g = Color.green(color);        int b = Color.blue(color);        ColorMatrix cm = new ColorMatrix();        ColorMatrix tmp = new ColorMatrix();        cm.setRGB2YUV();        tmp.setRotate(0, deg);        cm.postConcat(tmp);        tmp.setYUV2RGB();        cm.postConcat(tmp);        final float[] a = cm.getArray();        int ir = floatToByte(a[0] * r + a[1] * g + a[2] * b);        int ig = floatToByte(a[5] * r + a[6] * g + a[7] * b);        int ib = floatToByte(a[10] * r + a[11] * g + a[12] * b);        return Color.argb(Color.alpha(color), pinToByte(ir), pinToByte(ig),                pinToByte(ib));    }*/    private static final float PI = 3.1415926f;    @Override    public boolean onTouchEvent(MotionEvent event) {        float x = event.getX() - CENTER_X;        float y = event.getY() - CENTER_Y;        //判断当前触摸点的坐标是否在半径为CENTER_RADIUS的圆中        boolean inCenter = java.lang.Math.sqrt(x * x + y * y) <= CENTER_RADIUS;        switch (event.getAction()) {        case MotionEvent.ACTION_DOWN:            mTrackingCenter = inCenter;            if (inCenter) {                flag=true;                mHighlightCenter = true;                invalidate();                break;            }        case MotionEvent.ACTION_MOVE:            if (mTrackingCenter) {                if (mHighlightCenter != inCenter) {                    mHighlightCenter = inCenter;                    invalidate();                }                //触发点的到圆形的角度，然后interpColor(mColors, unit)方法算出颜色            } else {                float angle = (float) java.lang.Math.atan2(y, x);                // need to turn angle [-PI ... PI] into unit [0....1]                float unit = angle / (2 * PI);                if (unit < 0) {                    unit += 1;                }                flag=true;                mCenterPaint.setColor(interpColor(mColors, unit));                mListener.colorChanged(interpColor(mColors, unit));                invalidate();            }            break;        case MotionEvent.ACTION_UP:            flag=false;            if (mTrackingCenter) {                if (inCenter) {                    mListener.colorChanged(mCenterPaint.getColor());                }                mTrackingCenter = false;                 invalidate();            }            break;        }        return true;    }}

1 0