旋转的太极图

最新推荐文章于 2021-05-01 23:00:21 发布

Vicent_9920

最新推荐文章于 2021-05-01 23:00:21 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏：工具类文章标签：源码

本文链接：https://blog.youkuaiyun.com/Vicent_9920/article/details/53423235

工具类专栏收录该内容

19 篇文章

订阅专栏

本文分享了一个简单的太极图Loading视图实现方案，通过自定义Android View的方式，结合Canvas绘图API来绘制太极图案，并实现了旋转动画效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

刚刚在网上看见一个太极图做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"/>

布局效果：

这里写图片描述

调用接口：

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

实现效果：