自定义控件——视图的构建过程——视图的绘制方法

一时失言乱红尘 2024-04-07 12:37 108阅读 0赞

视图绘制有两种方法，分别是onDraw和dispatchDraw，它们的区别主要有下列两点：

(1)onDraw既可用于普通控件，也可用于布局类视图；而dispatchDraw专门用于布局类视图，像线性布局LinearLayout、相对布局RelativeLayout都属于布局类视图。

(2)onDraw方法先执行，dispatchDraw方法后执行，这两个方法中间再执行下级视图的绘制方法。

![dd7e17fd1da26f51a83cb3d361f73408.png][]

![8a740fa538d77489b6c3409c79d1ec46.png][]

![fcb4a8bc1aa7206f038a728e8513439c.png][]

![a4e49c251488d66c31897815d57824e3.png][]

xml布局：

![52ebbbc55afa949043b8585b1895a8eb.png][]

代码：

package com.example.myapplication;
    
    import androidx.appcompat.app.AppCompatActivity;
    import android.os.Bundle;
    import android.view.View;
    import android.widget.AdapterView;
    import android.widget.ArrayAdapter;
    import android.widget.Button;
    import android.widget.Spinner;
    import com.example.myapplication.widget.DrawRelativeLayout;
    
    public class MainActivity extends AppCompatActivity
    {
    
        private DrawRelativeLayout drl_content; // 声明一个绘画布局对象
        private Button btn_center;
    
        @Override
        protected void onCreate(Bundle savedInstanceState)
        {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
    
            // 从布局文件中获取名叫drl_content的绘画布局
            drl_content = findViewById(R.id.drl_content);
            btn_center = findViewById(R.id.btn_center);
    
            initTypeSpinner(); // 初始化绘图方式的下拉框
        }
    
        // 初始化绘图方式的下拉框
        private void initTypeSpinner()
        {
            ArrayAdapter<String> drawAdapter = new ArrayAdapter<String>(this, R.layout.item_select, descArray);
    
            Spinner sp_draw = findViewById(R.id.sp_draw);
    
            sp_draw.setPrompt("请选择绘图方式");
            sp_draw.setAdapter(drawAdapter);
            sp_draw.setOnItemSelectedListener(new DrawSelectedListener());
            sp_draw.setSelection(0);
        }
    
        private String[] descArray = {"不画图", "画矩形", "画圆角矩形", "画圆圈", "画椭圆", "onDraw画叉叉", "dispatchDraw画叉叉"};
    
        private int[] typeArray = {0, 1, 2, 3, 4, 5, 6};
    
        class DrawSelectedListener implements AdapterView.OnItemSelectedListener
        {
    
            public void onItemSelected(AdapterView<?> arg0, View arg1, int arg2, long arg3)
            {
                int type = typeArray[arg2];
    
                if (type == 5 || type == 6)
                {
                    btn_center.setVisibility(View.VISIBLE);
                }
                else
                {
                    btn_center.setVisibility(View.GONE);
                }
    
                drl_content.setDrawType(type); // 设置绘图布局的绘制类型
            }
    
            public void onNothingSelected(AdapterView<?> arg0) {}
        }
    
    }

![b5f5181c35c879fc9089a15f15a07dee.png][]

![3bd0a05fbd6ed4f19bc46263ba1ac647.png][]

DrawRelativeLayout

package com.example.myapplication.widget;
    
    import android.content.Context;
    import android.graphics.Canvas;
    import android.graphics.Color;
    import android.graphics.Paint;
    import android.graphics.Paint.Style;
    import android.graphics.Rect;
    import android.graphics.RectF;
    import android.util.AttributeSet;
    import android.widget.RelativeLayout;
    
    public class DrawRelativeLayout extends RelativeLayout
    {
        private int mDrawType = 0; // 绘制类型
    
        private Paint mPaint = new Paint(); // 创建一个画笔对象
    
        private int mStrokeWidth = 3; // 线宽
    
        public DrawRelativeLayout(Context context)
        {
    
            this(context, null);
        }
    
        public DrawRelativeLayout(Context context, AttributeSet attrs)
        {
    
            super(context, attrs);
            mPaint.setAntiAlias(true); // 设置画笔为无锯齿
            mPaint.setDither(true); // 设置画笔为防抖动
            mPaint.setColor(Color.BLACK); // 设置画笔的颜色
            mPaint.setStrokeWidth(mStrokeWidth); // 设置画笔的线宽
            mPaint.setStyle(Style.STROKE); // 设置画笔的类型。STROKE表示空心，FILL表示实心
        }
    
        // onDraw方法在绘制下级视图之前调用
        @Override
        protected void onDraw(Canvas canvas)
        {
    
            super.onDraw(canvas);
    
            int width = getMeasuredWidth(); // 获得布局的实际宽度
            int height = getMeasuredHeight(); // 获得布局的实际高度
    
            if (width > 0 && height > 0) {
                if (mDrawType == 1) { // 绘制矩形
                    Rect rect = new Rect(0, 0, width, height);
                    canvas.drawRect(rect, mPaint); // 在画布上绘制矩形
                } else if (mDrawType == 2) { // 绘制圆角矩形
                    RectF rectF = new RectF(0, 0, width, height);
                    canvas.drawRoundRect(rectF, 30, 30, mPaint); // 在画布上绘制圆角矩形
                } else if (mDrawType == 3) { // 绘制圆圈
                    int radius = Math.min(width, height) / 2 - mStrokeWidth;
                    canvas.drawCircle(width / 2, height / 2, radius, mPaint); // 在画布上绘制圆圈
                } else if (mDrawType == 4) { // 绘制椭圆
                    RectF oval = new RectF(0, 0, width, height);
                    canvas.drawOval(oval, mPaint); // 在画布上绘制椭圆
                } else if (mDrawType == 5) { // 绘制矩形及其对角线
                    Rect rect = new Rect(0, 0, width, height);
                    canvas.drawRect(rect, mPaint); // 绘制矩形
                    canvas.drawLine(0, 0, width, height, mPaint); // 绘制左上角到右下角的线段
                    canvas.drawLine(0, height, width, 0, mPaint); // 绘制左下角到右上角的线段
                }
            }
        }
    
        // dispatchDraw方法在绘制下级视图之前调用
        @Override
        protected void dispatchDraw(Canvas canvas)
        {
            super.dispatchDraw(canvas);
    
            int width = getMeasuredWidth(); // 获得布局的实际宽度
            int height = getMeasuredHeight(); // 获得布局的实际高度
    
            if (width > 0 && height > 0)
            {
                if (mDrawType == 6) { // 绘制矩形及其对角线
                    Rect rect = new Rect(0, 0, width, height);
                    canvas.drawRect(rect, mPaint); // 绘制矩形
                    canvas.drawLine(0, 0, width, height, mPaint); // 绘制左上角到右下角的线段
                    canvas.drawLine(0, height, width, 0, mPaint); // 绘制左下角到右上角的线段
                }
            }
        }
    
        // 设置绘制类型
        public void setDrawType(int type)
        {
            setBackgroundColor(Color.WHITE); // 背景置为白色，目的是把画布擦干净
    
            mDrawType = type;
    
            invalidate(); // 立即重新绘图，此时会触发onDraw方法和dispatchDraw方法
        }
    }

![391ef45a2cdd58206a363eee14af3b89.png][]

![8f094f5fcf329e51c06a1f9df4fd7905.png][]

![c85a896a97a0103d029f02672ee97bc8.png][]

![360a2f25906917e0072bf30d336b5e5e.png][]

![935743c6d8ecb091ac5e33fe6e9862d1.png][]

![c77a2571293f80b924f414a94b45814f.png][]

![6699dd175df4fa5e9eda3ccdd9dc5175.png][]

![2e5675be1cf256bd8441b0fcabb9faf4.png][]

![95de72400a61f151fa7313b9da78c876.png][]

![4e13b7085b05af5cd27a7ea4b2145a90.png][]

![8b37a911d646e6267bd529f8f73d4009.png][]

![b31163755e284de7ffb490831f93fac1.png][]

![29b729ca01672735195aa8750d687bac.png][]

![e010e1cb6b8bf38d09cde22af7811318.png][]

![3a726de181f9e7a7a7da9e06dfc6dfee.png][]

![524fc580e99651071a8513e7e5e6d391.png][]

![d1ac0693baade59fd5e21fc3126d43b8.png][]

![c2dcdc612279ab516021219784253e5a.png][]

[dd7e17fd1da26f51a83cb3d361f73408.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/2c6481b71ee04120b0a32c90bb11f00d.png
[8a740fa538d77489b6c3409c79d1ec46.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/01bc2867fa6f4b1da8bdb37a03b151e5.png
[fcb4a8bc1aa7206f038a728e8513439c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/7802ac912f7645f987a2a2763715d8e0.png
[a4e49c251488d66c31897815d57824e3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/a5fc44d775e14d919999e2d9e94edc95.png
[52ebbbc55afa949043b8585b1895a8eb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/8c40190117654fc0bedd77075691484b.png
[b5f5181c35c879fc9089a15f15a07dee.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/f186b700593f4538832dbe56ae98f0f7.png
[3bd0a05fbd6ed4f19bc46263ba1ac647.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/f0890074187949e0957bb601492f3eb4.png
[391ef45a2cdd58206a363eee14af3b89.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/0753877f42d1404885add26206a476c4.png
[8f094f5fcf329e51c06a1f9df4fd7905.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/2e6908d981d847d2b0d781bf34c25ce0.png
[c85a896a97a0103d029f02672ee97bc8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/72e0216a59f748fcb9cadf5fe0f5ab35.png
[360a2f25906917e0072bf30d336b5e5e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/d04e50a520bb48c48d8ae9d16fb71c5b.png
[935743c6d8ecb091ac5e33fe6e9862d1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/f607a1b859f249be81966eb15afd5700.png
[c77a2571293f80b924f414a94b45814f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/d013961a365f4c1489cfbf166030d664.png
[6699dd175df4fa5e9eda3ccdd9dc5175.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/f00847e7ade045ef880eb1aa6b16d1c4.png
[2e5675be1cf256bd8441b0fcabb9faf4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/7ecf14cd14c942d6950134cd3d6f180a.png
[95de72400a61f151fa7313b9da78c876.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/5d5302baf1ec41c6aace28dc9c9e666f.png
[4e13b7085b05af5cd27a7ea4b2145a90.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/72b87ecb1e8540dfa122d414df8e0aa7.png
[8b37a911d646e6267bd529f8f73d4009.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/c3291c42548c4b26a3d2b03a0f065af0.png
[b31163755e284de7ffb490831f93fac1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/20867680dcd343519ffca6ec911ead2d.png
[29b729ca01672735195aa8750d687bac.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/3053f0e1978d4583a6efa62ddd0b09a2.png
[e010e1cb6b8bf38d09cde22af7811318.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/0714de22a41146e5bbe1bfef75bea46e.png
[3a726de181f9e7a7a7da9e06dfc6dfee.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/1d25a000ccf74bebadc928a420b634aa.png
[524fc580e99651071a8513e7e5e6d391.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/57fc721581f045fd8d28197994cecaf8.png
[d1ac0693baade59fd5e21fc3126d43b8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/c0f67ebc7fee494881071d1928303ce2.png
[c2dcdc612279ab516021219784253e5a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/e7e7ff95efcd4c7882c33c3e8f1e86b0.png