Android 自定义View基础(一)

怼烎@ 2022-09-27 07:07 230阅读 0赞

该博客主要时记录简单的自定义的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);
        }
    }

实现的效果如下：

![还在路上，稍等...][... 1]

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

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

![还在路上，稍等...][... 2]

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

[...]: /images/20220708/4d696e2643294fd89476b01e680c8417.png
[... 1]: /images/20220708/266cbe6aed98422da536be34219507be.png
[... 2]: /images/20220708/6f19df064df945149da6ed124336f176.png