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);    }

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