旋转的太极图

蔚落 2022-07-14 07:13 162阅读 0赞

刚刚在网上看见一个太极图做loading，但是作者居然无良的不给效果图，于是我就气愤的给它实现了。果然是丑啊！

希望不要丑哭！！

源码非常简单，已经全部注释好了！

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 CustomLoadView extends View{ /** * 太极图案的黑白画笔 */ private Paint whitePaint,blackPaint; /** * View的宽高 */ private int width,height; /** * 旋转角度 */ private int angle; /** * 是否开始旋转 */ private boolean load = false; /** * 控制旋转的计时器 */ public CustomLoadView(Context context) { super(context); inital(); } public CustomLoadView(Context context, AttributeSet attrs) { super(context, attrs); inital(); } public CustomLoadView(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); inital(); } /** * 初始化 */ private void inital() { whitePaint = new Paint(); whitePaint.setAntiAlias(true); whitePaint.setColor(Color.WHITE); blackPaint = new Paint(); blackPaint.setAntiAlias(true); blackPaint.setColor(Color.BLACK); } //获取View的宽高 @Override protected void onLayout(boolean changed, int left, int top, int right, int bottom) { super.onLayout(changed, left, top, right, bottom); if(changed){ width = Math.abs(right-left); height = Math.abs(bottom-top); } } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); //画布由默认的（0,0）位置移动到中心位置 canvas.translate(width / 2, height / 2); //旋转角度 canvas.rotate(angle); //太极图案的半径——默认小于实际最小边20px int radius = Math.min(width, height) / 2-10; RectF rect = new RectF(-radius, -radius, radius, radius); //绘制区域 canvas.drawArc(rect, 90, 180, true, blackPaint); //绘制黑色半圆 canvas.drawArc(rect, -90, 180, true, whitePaint); //绘制白色半圆 //绘制太极图小圆 趋势部分 int smallRadius = radius / 2; canvas.drawCircle(0, -smallRadius, smallRadius, blackPaint);//绘制黑色趋势 canvas.drawCircle(0, smallRadius, smallRadius, whitePaint);//绘制白色趋势 //绘制鱼眼 canvas.drawCircle(0, -smallRadius, smallRadius / 4, whitePaint); canvas.drawCircle(0, smallRadius, smallRadius / 4, blackPaint); //是否加载完成 if (load) { angle += 30; if (angle >= 360) { angle = 0; } postInvalidateDelayed(300); } } //提供给外部使用的函数，开始旋转 public void startLoad(){ load = true; invalidate(); } //提供给外部使用的函数，停止旋转 public void stopLoad(){ load = false; invalidate(); } }

布局使用：

<com.example.demos.view.CustomLoadView 
            android:id="@+id/load_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="center"/>

布局效果：

![这里写图片描述][20161201163152739]

调用接口：

public class MainActivity extends Activity implements OnClickListener { 
    
        private boolean isLoad = true;
        private CustomLoadView loadview;
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            getActionBar().hide();
            loadview = (CustomLoadView)findViewById(R.id.load_view);
            Button btn = (Button) findViewById(R.id.btn);
            btn.setOnClickListener(this);
        }
        @Override
        public void onClick(View v) {
            if(isLoad){
                loadview.startLoad();
            }else{
                loadview.stopLoad();
            }
            isLoad = !isLoad;
        }

实现效果：

[20161201163152739]: /images/20220714/1916cc23d045415eb898ae2ad90f93d1.png