自定义控件——通过持续绘制实现简单动画——重新绘制视图界面

- 日理万妓 2024-04-07 12:47 83阅读 0赞

**重新绘制视图界面**

**不管是setText方法还是setImageBitmap方法，它们内部都调用了invalidate方法，该方法用来刷新控件界面。**

**类似的方法说明如下：**

**(1)invalidate方法，它不是线程安全的，只保证在主线程(UI线程)中能够正常刷新视图。**

**(2)postInvalidate方法，它是线程安全的，即使在分线程中调用也能正常刷新视图。**

**(3)postInvalidateDelayed方法，允许延迟一段时间后再刷新视图。**

======================================================================================================================

布局：

![eb0ed3715cbaad1e68d34779187877f3.png][]

![f7e66b47fda74dbd6653901d238f6def.png][]

主代码：

package com.example.myapplication;
    
    import androidx.appcompat.app.AppCompatActivity;
    import android.annotation.SuppressLint;
    import android.os.Bundle;
    import android.view.View;
    import android.widget.AdapterView;
    import android.widget.ArrayAdapter;
    import android.widget.Spinner;
    import com.example.myapplication.widget.OvalView;
    
    @SuppressLint("SetTextI18n")
    public class MainActivity extends AppCompatActivity
    {
    
        private OvalView ov_validate; // 声明一个椭圆视图对象
    
        @Override
        protected void onCreate(Bundle savedInstanceState)
        {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
    
            ov_validate = findViewById(R.id.ov_validate);
    
    
            initRefreshSpinner(); // 初始化刷新方式的下拉框
        }
    
        // 初始化刷新方式的下拉框
        private void initRefreshSpinner()
        {
            ArrayAdapter<String> refreshAdapter = new ArrayAdapter<String>(this, R.layout.item_select, refreshArray);
    
            Spinner sp_refresh = findViewById(R.id.sp_refresh);
            sp_refresh.setPrompt("请选择刷新方式"); // 设置下拉框的标题
            sp_refresh.setAdapter(refreshAdapter); // 设置下拉框的数组适配器
            sp_refresh.setSelection(0); // 设置下拉框默认显示第一项
            // 给下拉框设置选择监听器，一旦用户选中某一项，就触发监听器的onItemSelected方法
            sp_refresh.setOnItemSelectedListener(new RefreshSelectedListener());
        }
    
        private String[] refreshArray = {
                "主线程调用invalidate",
                "主线程调用postInvalidate",
                "延迟3秒后刷新",
                "分线程调用invalidate",
                "分线程调用postInvalidate"
        };
        
        class RefreshSelectedListener implements AdapterView.OnItemSelectedListener 
        {
            public void onItemSelected(AdapterView<?> arg0, View arg1, int arg2, long arg3) 
            {
                
                if (arg2 == 0) {  // 主线程调用invalidate
                    ov_validate.invalidate(); // 刷新视图(用于主线程)
                } 
                else if (arg2 == 1) {  // 主线程调用postInvalidate
                    ov_validate.postInvalidate(); // 刷新视图(主线程和分线程均可使用)
                } 
                else if (arg2 == 2) {  // 延迟3秒后刷新
                    ov_validate.postInvalidateDelayed(3000); // 延迟若干时间后再刷新视图
                }
                else if (arg2 == 3) {  // 分线程调用invalidate
                    // invalidate不是线程安全的，虽然下面代码在分线程中调用invalidate方法也没报错，但在复杂场合可能出错
                    new Thread(new Runnable() {
                        @Override
                        public void run() {
                            ov_validate.invalidate(); // 刷新视图(用于主线程)
                        }
                    }).start();
                }
                else if (arg2 == 4) {  // 分线程调用postInvalidate
                    // postInvalidate是线程安全的，分线程中建议调用postInvalidate方法来刷新视图
                    new Thread(new Runnable() {
                        @Override
                        public void run() {
                            ov_validate.postInvalidate(); // 刷新视图(主线程和分线程均可使用)
                        }
                    }).start();
                }
            }
    
            public void onNothingSelected(AdapterView<?> arg0) {}
        }
    
    }

![a4e8bf2b68a425c5aebad231beee94dc.png][]

![0ac49359c7f1f9b6d00ad60b1aa83cfc.png][]

![b0de29c1fb0eb4ab241b7fd5a1dc6d58.png][]

OvalView

package com.example.myapplication.widget;
    
    import android.content.Context;
    import android.graphics.Canvas;
    import android.graphics.Color;
    import android.graphics.Paint;
    import android.graphics.RectF;
    import android.util.AttributeSet;
    import android.view.View;
    
    public class OvalView extends View
    {
        private Paint mPaint = new Paint(); // 创建一个画笔对象
    
        private int mDrawingAngle = 0; // 当前绘制的角度
    
        public OvalView(Context context)
        {
    
            this(context, null);
        }
    
        public OvalView(Context context, AttributeSet attrs)
        {
    
            super(context, attrs);
            mPaint.setColor(Color.RED); // 设置画笔的颜色
        }
    
        @Override
        protected void onDraw(Canvas canvas)
        {
            super.onDraw(canvas);
    
            mDrawingAngle += 30; // 绘制角度增加30度
    
            int width = getMeasuredWidth(); // 获得布局的实际宽度
    
            int height = getMeasuredHeight(); // 获得布局的实际高度
    
            RectF rectf = new RectF(0, 0, width, height); // 创建扇形的矩形边界
    
            // 在画布上绘制指定角度的扇形。第四个参数为true表示绘制扇形，为false表示绘制圆弧
            canvas.drawArc(rectf, 0, mDrawingAngle, true, mPaint);
        }
    
    }

![5d6f32e173d78d358cee700332d34db7.png][]

![566534be5dcbb851f35326ad3636e911.png][]

![5de913c597937399c8edf241f5954a72.png][]

![0e54dcf0322c4557f66811984940d47a.png][]

![09bf39c390bfc8460852efec92fd6a50.png][]

![8e478c0ea4d5183d3498afcbdcaedefd.png][]

![139bdd56701097cd314e3b5b876ce752.png][]

![1b9ef330453b4a3e8c27a3532a16a5a6.png][]

![cce060f7e6060400b2c2520d1fa37182.png][]

![b327d08bc30535b725682bf703a0cac1.png][]

![ee28902999c447ab3c512401b4047224.png][]

![5696c89d1ad5f1f6e55f31788b6736e6.png][]

![6acd83a9627bb66d6d625c0bdf7d5092.png][]

![96c1ffcbbe7b3da00e4557bfb7409f29.png][]

[eb0ed3715cbaad1e68d34779187877f3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/f74f233283934dafa6514d544813c848.png
[f7e66b47fda74dbd6653901d238f6def.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/87b63ef4f28e455ab51ab1948712d4ec.png
[a4e8bf2b68a425c5aebad231beee94dc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/7af52412dfea4725a5d2bdbdf167a059.png
[0ac49359c7f1f9b6d00ad60b1aa83cfc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/0e340fc2dcb54e529869f48b955e3876.png
[b0de29c1fb0eb4ab241b7fd5a1dc6d58.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/58f83377481646d68a2899094c22edeb.png
[5d6f32e173d78d358cee700332d34db7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/d8dcbe4c34aa4c35860883cdafe710df.png
[566534be5dcbb851f35326ad3636e911.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/3492e4f72d6e4c308a88ae95fd75d781.png
[5de913c597937399c8edf241f5954a72.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/536fef23dbea451d92a80cb2d8810614.png
[0e54dcf0322c4557f66811984940d47a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/c4d4457ff9604370a21430c870773f95.png
[09bf39c390bfc8460852efec92fd6a50.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/aead7a004d624ad392cab9d088cfde7b.png
[8e478c0ea4d5183d3498afcbdcaedefd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/1e4fc451e32e4e208fc177fe10f2fa84.png
[139bdd56701097cd314e3b5b876ce752.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/d1539e1937884d849e74475c12cd0aaa.png
[1b9ef330453b4a3e8c27a3532a16a5a6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/4284c88bf8104dc5a04d96912b01f80a.png
[cce060f7e6060400b2c2520d1fa37182.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/0337dd04e6294aaa9dc0459fdd34babb.png
[b327d08bc30535b725682bf703a0cac1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/69e6e0146b414b8982ab6b5005385de2.png
[ee28902999c447ab3c512401b4047224.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/9ed88804c379498d90f8cc5e89cbcb42.png
[5696c89d1ad5f1f6e55f31788b6736e6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/3188ceeb41804a618df67ffb1ca214a6.png
[6acd83a9627bb66d6d625c0bdf7d5092.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/08d7bf25359b4feea56eaaefdbecc3ec.png
[96c1ffcbbe7b3da00e4557bfb7409f29.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/0b359e7c5a6747d6ada51d0b10f1333d.png