Android 自定义View基础(一)

该博客主要时记录简单的自定义的View的使用：

---

学习Android的童鞋都知道，View这是最基本也是最重要的部分，在开发过程中，我们会创建许多需要实现特定功能的控件，这时我们就需要自己来实现自定义的控件。

首先，我们的控件需要继承自View和ViewGroup,当然也可以继承自Button，LinearLayout，该文章从最基础的讲起，就继承自View.

画圆圈

首先我们，实现一个控件，画出一圆。

代码就很简单了，如下：

public class SelfView extends View {
    private static final String TAG = "SelfView";
    Paint redpaint;
    Paint bluepaint;

    public SelfView(Context context) {
        super(context);
        initPaint();
    }

    public SelfView(Context context, AttributeSet attrs) {
        super(context, attrs);
        initPaint();
    }

    public SelfView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initPaint();
    }


    @Override
    protected void onDraw(Canvas canvas) {
        //参数一,二,是画的圆的圆心位置,参数三是圆的半径,参数四是画笔
        canvas.drawCircle(500,500,300,bluepaint);
        canvas.drawCircle(500,500,100,redpaint);


    }

    public void initPaint() {
        redpaint = new Paint();
        bluepaint = new Paint();
        //设置画笔
        redpaint.setColor(Color.RED);//绿色画笔
        redpaint.setAntiAlias(true);//抗锯齿
        bluepaint.setColor(Color.BLUE);
         bluepaint.setAntiAlias(true);
    }
    ｝

以上代码中的构造方法，SelfView(Context context)是动态创建时的构造方法， SelfView(Context context, AttributeSet attrs)就是我们xml中使用这个控件时的构造方法，

在onDraw(Canvas canvas)方法里面，执行画操作，其中(100,100)是圆心坐标，30是半径，circlePaint是画笔。

画文字

画文字，我们需要一个文字区域，这样我们就需要两个画笔，分别画文字和矩形，代码如下：

public class SelfTextView extends View {

    Paint rectPaint;//矩形画笔
    Paint textPaint;//文字画笔
    Rect textBound;
    public SelfTextView(Context context) {
        super(context);
        initPaint();
    }

    public SelfTextView(Context context, AttributeSet attrs) {
        super(context, attrs);
        initPaint();
    }

    private void initPaint() {
        rectPaint = new Paint();
        rectPaint.setColor(Color.GRAY);

        textPaint = new Paint();
        textPaint.setColor(Color.BLUE);
        textPaint.setAntiAlias(true);
        textPaint.setTextSize(20);//设置文字大小
        //在初始化画笔的时候初始化Rect
        textBound=new Rect();//文字边界
    }

    @Override
    protected void onDraw(Canvas canvas) {
//        super.onDraw(canvas);
        canvas.drawRect(100, 100, 400, 300, rectPaint);//画放置文字的矩形区域
        String str = "我是要画的文字";
        textPaint.getTextBounds(str,0,str.length(),textBound);//要获取文字的边界
        canvas.drawText(str,250-textBound.width()/2,200+textBound.height()/6,textPaint);
    }
}

实现的效果如下：

解释一下是怎么计算的，首先我已经画了一个矩形，

  canvas.drawRect(100, 100, 400, 300, rectPaint);//画放置文字的矩形区域

然后我就知道矩形的中心点x坐标是(400+100)/2=250，这时文字的宽是通过textBound得到为textBound.width()，所以文字的开始文字x坐标就是250-textBound.width()/2，然后再说y坐标，矩形中心的y坐标是(300+100)/2=200;文字的高是textBound.height()，按道理说，这时文字的中心点坐标应该是200-textBound.height()/2，但是请看下面drawText()的方法源码，这个y让传递的是@param y The y-coordinate of the baseline of the text being drawn，这里的baseline就是相当于汉语拼音本上写四条线的第三条线。所以这个y参数应该传递的是200+textBound.height()/6。

/**
     * Draw the text, with origin at (x,y), using the specified paint. The
     * origin is interpreted based on the Align setting in the paint.
     *
     * @param text  The text to be drawn
     * @param x     The x-coordinate of the origin of the text being drawn
     * @param y     The y-coordinate of the baseline of the text being drawn
     * @param paint The paint used for the text (e.g. color, size, style)
     */
    public void drawText(@NonNull String text, float x, float y, @NonNull Paint paint) {
        native_drawText(mNativeCanvasWrapper, text, 0, text.length(), x, y, paint.mBidiFlags,
                paint.getNativeInstance(), paint.mNativeTypeface);
    }

上面都是一些基础的实例，实际开发中肯定不会这么简单。但是原理都是相通的，只不过也许你要多定义几个画笔，计算上更加复杂，有的甚至计算过于复杂要关心对性能的影响等等。