Android自定义扇形倒计时

一.概述

• 严格来说,我是Android小白,写博客的目的只是想作为知识储备而已….但是想到别人或许会不小心搜到我的这篇博客,如果我只是简单的描述,别人有可能看不懂,说不定还被吐槽,那岂不是很冤吗?
• 所以,我还是把问题及过程描述清楚,这也是对自己的一个交代,同时,这也是我的第一篇博客,我应该做好它;
• 先说一下需求: 最近工作中需要做一个倒计时,是那种一个圆,慢慢的被吃掉的动画倒计时,由于自己知识不是很足,只知道要用Canvas来画,在网上搜了一圈,发现要么是静态的画了一个扇形,要么是不能控制控件的位置大小….总之,找了一圈感觉学了不少Canvas的知识,但是由于自己也是Android小白,所以并不能从中总结出我想要的那种动画的扇形倒计时(这里说一下,因为我是第一次用这玩意,对一些编辑不熟,所以就不上效果图了,但是这里的代码非常简单,需要的朋友可以直接拿过去运行一下看看是否是你需要的效果);
  最后我不得不请教我的一个朋友,现在他倒是也谈不上大神,但是比我厉害多了…..这里说白了我只是把他的逻辑更多的挪过来…好惭愧…因为我更多的只是想作为一个知识储备…

二.正文

• 刚才也说到用到Canvas,所以我们先来自定义一个控件,直接继承View的自定义控件;
  SweepView.java:

public class SweepView extends View {
    private static final int DEFAULT_WIDTH = 100;
    private static final int DEFAULT_HEIGHT = 100;
    private int mWidth;     //这里并没卵用
    private int mHeight;    //这个也没卵用
    private RectF rectF;
    private Paint paint;
    private int mColor = Color.RED;//默认颜色为红色
    private float mSweep = 0;   //扇形角度

    public SweepView(Context context) {
        super(context);
        init();
    }



    public SweepView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public SweepView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        paint = new Paint();
        paint.setColor(mColor); //画笔颜色
        paint.setStyle(Paint.Style.FILL);   //填充
        paint.setAntiAlias(true);   //是否抗锯齿
    }

    /**
     * 设置扇形颜色
     * UIThred
     */
    public void setColor(int color) {
        this.mColor = color;
        paint.setColor(mColor);
        //调用onDraw重绘
        invalidate();
    }

    /**
     * 设置扇形的区域0-360
     * UIThred
     */
    public void setSweep(float mSweep) {
        this.mSweep = mSweep;
        //调用onDraw重绘
        invalidate();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int resultWidth = measureWidth(widthMeasureSpec);
        int resultHeight = measureHeight(heightMeasureSpec);
        setMeasuredDimension(resultWidth, resultHeight);
    }

    /**
     * 绘制的宽
     * 其实里面的内容我不懂,好惭愧...我以后会弄懂的.....0.0
     */
    private int measureWidth(int widthMeasureSpec) {
        int size = MeasureSpec.getSize(widthMeasureSpec);
        int mode = MeasureSpec.getMode(widthMeasureSpec);
        int result;
        if (mode == MeasureSpec.EXACTLY) {
            result = size;
        } else {
            result = DEFAULT_WIDTH;
            if (mode == MeasureSpec.AT_MOST) {
                result = Math.min(size, DEFAULT_WIDTH);
            }

        }
        return result;
    }

    /**
     * 绘制的高
     * 这里面的内容我也不懂,好惭愧...我以后会弄懂的.....0.0
     */
    private int measureHeight(int heightMeasureSpec) {
        int size = MeasureSpec.getSize(heightMeasureSpec);
        int mode = MeasureSpec.getMode(heightMeasureSpec);
        int result;
        if (mode == MeasureSpec.EXACTLY) {
            result = size;
        } else {
            result = DEFAULT_HEIGHT;
            if (mode == MeasureSpec.AT_MOST) {
                result = Math.min(size, DEFAULT_HEIGHT);
            }

        }
        return result;
    }


    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        this.mHeight = h;
        this.mWidth = w;
        rectF = new RectF(0, 0, w, h);
        super.onSizeChanged(w, h, oldw, oldh);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        //画扇形
        canvas.drawArc(rectF, -90, mSweep, true, paint);
    }
}

• 写好自定义的View,显然我们要用它,所以布局文件中声明:(不过有一点要注意的是,如果想要控制它的位置及大小,这里要用ViewGroup来包裹,通过设置ViewGroup的位置及大小来控制它,至于为什么,我也很想知道0.0)
  MainActivity.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.meijun.myapplication.MainActivity">

    <RelativeLayout
        android:layout_centerInParent="true"
        android:layout_width="20dp"
        android:background="#00f"
        android:layout_height="20dp">
        <com.example.meijun.myapplication.SweepView
            android:layout_width="wrap_content"
            android:id="@+id/sweepView"
            android:layout_height="wrap_content" />
    </RelativeLayout>

</RelativeLayout>

• 最后就是在代码里来绘制动画形态的,圆形扇形倒计时了:
  MainActivity.java:

public class MainActivity extends AppCompatActivity {

    private SweepView sweepView;
    float angle = 0;//绘制的角度

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        sweepView = (SweepView) findViewById(R.id.sweepView);
        sweepView.setColor(Color.WHITE);    //设置画笔颜色
        sweepView.setSweep(0);  //初始绘制0度

        new Thread(new Runnable() {
            @Override
            public void run() {
                while (angle <= 360) {  //这里相当于绘制一个完整的圆,结合下面的3.6及50,也就是5秒钟的倒计时
                    angle += 3.6;
                    runOnUiThread(new Runnable() {
                        @Override
                        public void run() {
                            sweepView.setSweep(angle);
                        }
                    });

                    try {
                        Thread.sleep(50);
                    } catch (InterruptedException e) {
                        e.printStackTrace();
                    }
                }
            }
        }).start();

    }
}

三.总结

• 在自定义view中,我有很多地方还不是很明白的,因为自己本身对自定义的一些方法认知是缺乏的,不过我想我以后会慢慢弄懂其中一些方法的含义;当然如果朋友你不小心能看到这篇文章,还望你能对我解惑,不胜感激.