高仿格瓦拉生活預載入頁面環形進度條——我稱之為二龍戲珠。話不多說先上圖。

實現思路:
1、自定義一個view，畫兩個從點變換到半圓的弧形。
需要拓展的功能點:
1、需要展現出一個動畫效果。
2、進度條走滿的時候需要觸發介面的跳轉。
3、繪製的控制元件要有自適應螢幕的能力。

功能點，以及實現方式的說明:
實現螢幕適配的方式

    //獲取螢幕的寬高  重新計算自定義控制元件的大小
   public void reSetViewSize(){
       DisplayMetrics metrics = myApplication.getInstance().getResources().getDisplayMetrics();
       int
 
 dpi = metrics.densityDpi;
       switch (dpi){
           case 480 :
               mStrokeWidth = 10;
               mHalfStrokeWidth = mStrokeWidth / 2;
               mRadius = 80;
               textSize = 45;
               break;
           case 160:
               mStrokeWidth = 4;
               mHalfStrokeWidth = mStrokeWidth / 2
 
;
               mRadius = 30;
               textSize = 15;
               break;
           case 240:
               mStrokeWidth = 5;
               mHalfStrokeWidth = mStrokeWidth / 2;
               mRadius = 40;
               textSize = 22;
               break;
           case 320:
               mStrokeWidth = 8
 
;
               mHalfStrokeWidth = mStrokeWidth / 2;
               mRadius = 60;
               textSize = 30;
               break;
           case 640:
               mStrokeWidth = 16;
               mHalfStrokeWidth = mStrokeWidth / 2;
               mRadius = 120;
               textSize = 60;
               break;
           default:
               break;
       }
       init();
   }

在使用控制元件的介面當中顯示的呼叫reSetViewSize()以實現根據螢幕的寬高按比例重置控制元件的寬高。

2、實現載入進度條的一個動畫效果:

final float alpha = mProgress / (float)mMax * 180;
canvas.drawArc(mRect , 90+alpha , alpha , false , mFrontPaint);
//左邊一半
canvas.drawArc(mRect,  alpha-90,  alpha, false , mFrontPaint);
Rect bounds = new Rect();
mTextPaint.getTextBounds("跳過",0,2,bounds);
canvas.drawText("跳過", (mWidth/2) , (mHeight/2) + (bounds.height()/2), mTextPaint);
if (mProgress < mMax) {
    mProgress += 1;
    invalidate();
}

3、進度條走滿的時候通知介面進行相關操作。(通過定義介面，用介面回撥的方式)

if (mProgress < mMax) {
    mProgress += 1;
    invalidate();
}else {
    //TODO 編寫一個回撥方法 回撥介面
    callBack.handleAty();
}
//供外部進行進行回撥
public void initCallBack(callBackAty callBack){
    this.callBack = callBack;
}
public interface callBackAty{
    public void handleAty();
}

自定義控制元件的原始碼:

public class MyWaitingProgress extends View {
    private Paint mBackPaint;
    private Paint mFrontPaint;
    private Paint mTextPaint;

    private float mStrokeWidth = 10;
    private float mAlphaStrokeWidth = 12;
    private float mHalfStrokeWidth = mStrokeWidth / 2;
    private float mRadius = 60;
    //文字大小
    //文字的筆畫寬度
    private float textSize = 45;
    private RectF mRect;
    private int mProgress = 0;
    //目標值，想改多少就改多少
    private int mMax = 150;
    private int mWidth;
    private int mHeight;
    private callBackAty callBack;
    //獲取螢幕的寬高  重新計算自定義控制元件的大小
    public void reSetViewSize(){
        DisplayMetrics metrics = myApplication.getInstance().getResources().getDisplayMetrics();
        int dpi = metrics.densityDpi;
        switch (dpi){
            case 480 :
                mStrokeWidth = 10;
                mHalfStrokeWidth = mStrokeWidth / 2;
                mRadius = 80;
                textSize = 45;
                break;
            case 160:
                mStrokeWidth = 4;
                mHalfStrokeWidth = mStrokeWidth / 2;
                mRadius = 30;
                textSize = 15;
                break;
            case 240:
                mStrokeWidth = 5;
                mHalfStrokeWidth = mStrokeWidth / 2;
                mRadius = 40;
                textSize = 22;
                break;
            case 320:
                mStrokeWidth = 8;
                mHalfStrokeWidth = mStrokeWidth / 2;
                mRadius = 60;
                textSize = 30;
                break;
            case 640:
                mStrokeWidth = 16;
                mHalfStrokeWidth = mStrokeWidth / 2;
                mRadius = 120;
                textSize = 60;
                break;
            default:
                break;
        }
        init();
    }
    public MyWaitingProgress(Context context) {
        super(context);
        // init();
    }
    public MyWaitingProgress(Context context, AttributeSet attrs) {
        super(context, attrs);
        //  init();
    }
    public MyWaitingProgress(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        //  init();
    }
    //初始化畫筆
    private void init() {
        mBackPaint = new Paint();
        mBackPaint.setColor(getResources().getColor(R.color.load_progress));
        mBackPaint.setAntiAlias(true);
        mBackPaint.setStyle(Paint.Style.STROKE);
        mBackPaint.setStrokeWidth(mStrokeWidth);
        mFrontPaint = new Paint();
        mFrontPaint.setColor(getResources().getColor(R.color.load_progress));
        mFrontPaint.setAntiAlias(true);
        mFrontPaint.setStyle(Paint.Style.STROKE);
        mFrontPaint.setStrokeWidth(mStrokeWidth);
        mTextPaint = new Paint();
        mTextPaint.setColor(getResources().getColor(R.color.load_progress));
        mTextPaint.setAntiAlias(true);
        mTextPaint.setTextSize(textSize);
        mTextPaint.setTextAlign(Paint.Align.CENTER);

    }
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        mWidth = getRealSize(widthMeasureSpec);
        mHeight = getRealSize(heightMeasureSpec);
        //呼叫系統的api設定控制元件的寬高
        setMeasuredDimension(mWidth, mHeight);
    }
    @Override
    protected void onDraw(final Canvas canvas) {
        initRect();
        final float alpha = mProgress / (float)mMax * 180;
        canvas.drawArc(mRect , 90+alpha , alpha , false , mFrontPaint);
        //左邊一半
        canvas.drawArc(mRect,  alpha-90,  alpha, false , mFrontPaint);
        Rect bounds = new Rect();
        mTextPaint.getTextBounds("跳過",0,2,bounds);
        canvas.drawText("跳過", (mWidth/2) , (mHeight/2) + (bounds.height()/2), mTextPaint);
        if (mProgress < mMax) {
            mProgress += 1;
            invalidate();
        }else {
            //TODO 編寫一個回撥方法 回撥介面
            callBack.handleAty();
        }
    }
    public int getRealSize(int measureSpec){
        int result = 1;
        int mode = MeasureSpec.getMode(measureSpec);
        int size = MeasureSpec.getSize(measureSpec);
        //根據數值計算線的寬度和半徑的大小
        if (mode == MeasureSpec.AT_MOST || mode == MeasureSpec.UNSPECIFIED) {
            //自己計算
            result = (int) (mRadius * 2 + mStrokeWidth);
        } else {
            result = size;
        }
        return result;
    }
    private void initRect() {
        if (mRect == null) {
            mRect = new RectF();
            int viewSize = (int) (mRadius * 2);
            int left = (mWidth - viewSize) / 2;
            int top = (mHeight - viewSize) / 2;
            int right = left + viewSize;
            int bottom = top + viewSize;
            mRect.set(left, top, right, bottom);
        }
    }
    //供外部進行進行回撥
    public void initCallBack(callBackAty callBack){
        this.callBack = callBack;
    }
    public interface callBackAty{
        public void handleAty();
    }
}

xml檔案中使用

<com.huaxinzhi.testbeautprogress.MyWaitingProgress
    android:id="@+id/progress"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"/>

介面中呼叫

progress = (MyWaitingProgress) findViewById(R.id.progress);
progress.reSetViewSize();
progress.initCallBack(new MyWaitingProgress.callBackAty() {
    @Override
    public void handleAty() {
        Toast.makeText(MainActivity.this, "進度圓滿", Toast.LENGTH_SHORT).show();
    }
});