2. 程式人生 > >自定義View實戰--實現一個清新美觀的載入按鈕

自定義View實戰--實現一個清新美觀的載入按鈕

阿新 • • 發佈：2019-02-14

本篇文章已授權微信公眾號 guolin_blog （郭霖）獨家釋出

在 Dribble 上偶然看到了一組互動如下：
這裡寫圖片描述

當時在心裡問自己能不能做，答案肯定是能做的，不過我比較懶，覺得中間那個伸縮變化要編寫很多程式碼，所以懶得理。後來，為了不讓自己那麼浮躁，也為了鍛鍊自己的耐心程度，還是堅持實現它了。這個過程，覺得自己還是有所收穫，把握了一些想當然的細節，輸理了對於自定義 View 的流程。

我將這個自定義 View，起了一個名字叫做 LoadButton。

這篇文章涉及到的知識點有如下：

1. 自定義 View 時的基本流程，包含 attrs.xml 中屬性的編寫，構造方法中屬性的獲取，onMeasure() 中尺寸的測量。onDraw() 中介面的實現。

2. 可以讓 Android 初學者再次感受一次回撥機制的美妙。

3. 屬性動畫的基本使用。

第一步，先確定尺寸

先觀察 LoadView 的形態。
這裡寫圖片描述

上面的顯示的是兩種形狀，一個是圓角矩形，另外一個就是圓。兩個形態尺寸區別是，高相同，寬度不一致。

我們再進一步分析形態 1。
這裡寫圖片描述

形態 1 可以看成是左右兩個半圓和中間一個矩形。再回顧下示例圖片中的動畫表現。
這裡寫圖片描述

圓角矩形最終變成了一個圓。我們可以用線框圖來漸進表現它。
這裡寫圖片描述

當進行動畫時，中間的矩形部分不停地縮小，當它縮小為 0 時，形態 1 就轉變成了形態 2。

上面的能夠說明什麼呢？說明 LoadButton 由 3 個部分組成，左右的半圓和中間的矩形，即使是形態 2 也可以看做是左右半圓和中間寬度為 0 的矩形組成。
這裡寫圖片描述

細化尺寸

我們進一步討論尺寸相關的情況。

我們知道對於普通開發者而言，自定義一個 View 測量尺寸的時候我們通常要關注的測量模式是 MeasureSpec.EXACTLY 和 MeasureSpec.AT_MOST 兩種。要了解更多詳細的資訊可以閱讀我寫的這篇博文《長談：關於 View Measure 測量機制，讓我一次把話說完》。接下來，我們詳細討論一下這兩種情況。

MeasureSpec.EXACTLY

當一個 View 的 layout_width 或者 layout_height 的取值為 match_parent 或 30dp 這樣具體的數值時，這就表明它的測量模式是 MeasureSpec.EXACTLY。它已經獲得了精確的數值了，按照常理我們是不應該再去幹涉它，parent 給出的建議尺寸是什麼，我們就把尺寸設定成什麼，但是結合開發的實際情況來看，我們有一個底線，為了保證 LoadView 的完整性，也就是再差的情況下，parent 給出來的建議尺寸也不能小於形態 2。否則如下圖情況就不是我們想要的了
這裡寫圖片描述

MeasureSpec.AT_MOST

當一個 View 的 layout_width 或者 layout_height 的取值為 wrap_content 時，它的測量模式就是 MeasureSpec.AT_MOST，這個時候我們需要自己根據內容計算尺寸。而 LoadButton 的內容是什麼呢？它的內容有 text 還有 載入成功或者載入失敗的圖片。因為圖片大小在形態 2 中的圓形內可以確認。所以問題的關鍵就在於 LoadButton 文字內容寬高的尺寸測量。
這裡寫圖片描述

text 內容自然是居中顯示，然後它距離中間的 rect 上下左右間距也要考慮。這個時候的 rect 尺寸就是相對應的文字尺寸加上相對應方向上的 padding 值，這些 padding 值通過在 attrs.xml 中自定義屬性然後在佈局檔案中賦予。

最後整體 LoadButton 尺寸自然是中間 rect 加上左右兩個半圓的半徑，但是這還不是最終的尺寸，最終的尺寸還是要和 parent 給的建議尺寸比較，不能大於它。

上面分析了尺寸測量相關，所以順著思路進行的話，編碼也只是水到渠成的事情了。

public class LoadButton extends View {

 @Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    int widthSize = MeasureSpec.getSize(widthMeasureSpec);
    int widthMode = MeasureSpec.getMode(widthMeasureSpec);

    int heightSize = MeasureSpec.getSize(heightMeasureSpec);
    int heightMode = MeasureSpec.getMode(heightMeasureSpec);
    //用於儲存最終尺寸
    int resultW = widthSize;
    int resultH = heightSize;

    // contentW contentH 用於確定中間矩形的尺寸
    int contentW = 0;
    int contentH = 0;

    if ( widthMode == MeasureSpec.AT_MOST ) {
        mTextWidth = (int) mTextPaint.measureText(mText);
        contentW += mTextWidth + mLeftRightPadding * 2 + mRadiu * 2;

        resultW = contentW < widthSize ? contentW : widthSize;
    }

    if ( heightMode == MeasureSpec.AT_MOST ) {
        contentH += mTopBottomPadding * 2 + mTextSize;
        resultH = contentH < heightSize ? contentH : heightSize;
    }

    resultW = resultW < 2 * mRadiu ? 2 * mRadiu : resultW;
    resultH = resultH < 2 * mRadiu ? 2 * mRadiu : resultH;

    // 修整圓形的半徑
    mRadiu = resultH / 2;
    // 記錄中間矩形的寬度值
    rectWidth = resultW - 2 * mRadiu;
    setMeasuredDimension(resultW,resultH);

    Log.d(TAG,"onMeasure: w:"+resultW+" h:"+resultH);
}

}

第二步，繪製

測量是在 onMeasure() 方法中進行，而繪製就是在 onDraw() 方法中進行的，這是 Android 開發者都知道的事情。所以這一節的重點在於 onDraw() 這個方法。
為了不給讀者造成困擾，我先張貼自定的屬性，及在構造方法中獲取屬性值的程式碼。其它的細節應該看名字就大概知道了。
attrs.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="LoadButton">
        <attr name="android:text" />
        <attr name="android:textSize" />
        <attr name="stroke_color" format="color|reference" />
        <attr name="content_color" format="color|reference" />
        <attr name="radiu" format="dimension|reference" />
        <attr name="rectwidth" format="dimension|reference" />
        <attr name="contentPaddingLR" format="dimension|reference" />
        <attr name="contentPaddingTB" format="dimension|reference" />
        <attr name="progressedWidth" format="dimension|reference" />
        <attr name="backColor" format="color|reference" />
        <attr name="progressColor" format="color|reference" />
        <attr name="progressSecondColor" format="color|reference" />
        <attr name="loadSuccessDrawable" format="reference" />
        <attr name="loadErrorDrawable" format="reference" />
        <attr name="loadPauseDrawable" format="reference" />
    </declare-styleable>
</resources>

然後在 LoadButton 的構造方法中獲取這些值。

public LoadButton(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        mDefaultRadiu = 40;
        mDefaultTextSize = 24;
        TypedArray typedArray = context.obtainStyledAttributes(attrs,R.styleable.LoadButton);
        mTextSize = typedArray.getDimensionPixelSize(R.styleable.LoadButton_android_textSize,
                mDefaultTextSize);
        mStrokeColor = typedArray.getColor(R.styleable.LoadButton_stroke_color, Color.RED);
        mTextColor = typedArray.getColor(R.styleable.LoadButton_content_color, Color.WHITE);
        mText = typedArray.getString(R.styleable.LoadButton_android_text);
        mRadiu = typedArray.getDimensionPixelOffset(R.styleable.LoadButton_radiu,mDefaultRadiu);
        mTopBottomPadding = typedArray.getDimensionPixelOffset(R.styleable.LoadButton_contentPaddingTB,10);
        mLeftRightPadding = typedArray.getDimensionPixelOffset(R.styleable.LoadButton_contentPaddingLR,10);
        mBackgroundColor = typedArray.getColor(R.styleable.LoadButton_backColor,Color.WHITE);
        mProgressColor = typedArray.getColor(R.styleable.LoadButton_progressColor,Color.WHITE);
        mProgressSecondColor = typedArray.getColor(R.styleable.LoadButton_progressSecondColor,Color.parseColor("#c3c3c3"));
        mProgressWidth = typedArray.getDimensionPixelOffset(R.styleable.LoadButton_progressedWidth,2);

        mSuccessedDrawable = typedArray.getDrawable(R.styleable.LoadButton_loadSuccessDrawable);
        mErrorDrawable = typedArray.getDrawable(R.styleable.LoadButton_loadErrorDrawable);
        mPauseDrawable = typedArray.getDrawable(R.styleable.LoadButton_loadPauseDrawable);
        typedArray.recycle();

        ......

}

形態 1 的繪製，藉助於 Path 的力量

Android 繪製圖形離不開 Canvas，Canvas 可以直接繪製 直線、矩形、圓、橢圓，但是 LoadButton 的形態 1 怎麼繪製呢？它是一個不規則的閉合圖形，直接用 Canvas 的話肯定不行，所以得藉助另外一個類 Path，Path 中文譯做路徑，可以專門處理這種情況，而且可以處理比這複雜的情況，具體情況請讀者們自己查閱相應資料與教程。

我們再來觀察 形態 1 到形態 2 的轉變過程。
這裡寫圖片描述

這是個中間矩形從初始值變為 0 的過程，我們用 rectWidth 表示這個矩形的寬度值，因為在 onDraw() 方法中，LoadButton 尺寸確定，所以我們很容易得到它的中心點，所以我們可以中心點座標為參考座標，然後以 rectWidth 為變數建立一個 path，這個 path 實現了 LoadButton 的輪廓。

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);

    int cx = getWidth() / 2;
    int cy = getHeight() / 2;

    drawPath(canvas,cx,cy);

    .....

}


private void drawPath(Canvas canvas,int cx,int cy) {
    if (mPath == null) {
        mPath = new Path();
    }

    mPath.reset();

    left = cx - rectWidth / 2 - mRadiu;
    top = 0;
    right = cx + rectWidth / 2 + mRadiu;
    bottom = getHeight();

    leftRect.set(left,top,left + mRadiu * 2,bottom);
    rightRect.set(right - mRadiu * 2,top,right,bottom);
    contentRect.set(cx-rectWidth/2,top,cx + rectWidth/2,bottom);
    //path 起始位置
    mPath.moveTo(cx - rectWidth /2,bottom);
    // 左邊半圓
    mPath.arcTo(leftRect,
            90.0f,180f);
    //連線到右邊半圓
    mPath.lineTo(cx + rectWidth/2,top);
    // 右邊半圓
    mPath.arcTo(rightRect,
            270.0f,180f);
    // path 閉合
    mPath.close();

    // 以填充的方向將圖形填充為指定的背景色
    mPaint.setStyle(Paint.Style.FILL);
    mPaint.setColor(mBackgroundColor);
    canvas.drawPath(mPath,mPaint);
    mPaint.setStyle(Paint.Style.STROKE);
    mPaint.setColor(mStrokeColor);
}

以 rectWidth 為變數建立 path 的好處時，當從形態 1 到 形態 2 轉變的過程，肯定是 rectWidth 數值變化的過程，而對於其它數值是不變的，所以重繪的時候 LoadButton 能夠很輕鬆地處理這種情況。

我們到這一步的時候已經能夠準確地繪製了 LoadButton 的輪廓。現在需要精確地繪製它的內容，只有這樣才是完整的 LoadButton。

我們先需要給 LoadButton 定義一些狀態。

LoadButton 的狀態

enum State {
    INITIAL,// 初始狀態
    FOLDING,// 正在伸縮
    LOADING, // 正在載入
    ERROR,// 載入失敗
    SUCCESSED,// 載入成功
    PAUSED // 載入暫停
}

這裡寫圖片描述

它們的狀態轉換如下：
這裡寫圖片描述

LoadButton 的狀態轉換由使用者點選按鈕觸發。所以 LoadButton 需要在內部設定一個 OnClickListenner。
1. 當在 Initial 狀態下點選時，它會轉換到 Folding 狀態下。
2. Foding 狀態結束後，由形態 1 轉變成形態 2。自然就進入了 Loading 狀態。
3. Loading 狀態有 3 個走向，載入成功後，使用者通過相應 API 設定狀態為 Successed。載入失敗後，使用者可以設定狀態為 Error。如果在 Loading 狀態下點選按鈕，會進入 Paused 狀態。
4. 在 Paused 狀態下點選按鈕，LoadButton 重新進入 Loading 狀態。
5. 在 Successed 或者 Error 狀態下點選按鈕，將通過回撥物件，通知呼叫者點選事件的發生。

我們在 LoadButton 的構造方法中設定這樣的內部的 OnClickListenner。

public LoadButton(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);

    ......

    isUnfold = true;

    mListenner = new OnClickListener() {
        @Override
        public void onClick(View v) {
            if ( mCurrentState == State.FODDING) {
                return;
            }

            if ( mCurrentState == State.INITIAL ) {
                if ( isUnfold ) {
                    shringk();
                }
            } else if ( mCurrentState == State.ERROR) {

                if (mLoadListenner != null ) {
                    mLoadListenner.onClick(false);
                }


            } else if ( mCurrentState == State.SUCCESSED ) {
                if (mLoadListenner != null ) {
                    mLoadListenner.onClick(true);
                }
            } else if ( mCurrentState == State.PAUSED) {
                if (mLoadListenner != null ) {
                    mLoadListenner.needLoading();
                    load();
                }
            } else if ( mCurrentState == State.LOADDING) {
                mCurrentState = State.PAUSED;
                cancelAnimation();
                invaidateSelft();
            }

        }
    };

    setOnClickListener(mListenner);

    mCurrentState = State.INITIAL;


    ......
}

狀態的繪製

Initial 狀態下其實就是中間一個 text 文字居中顯示,相關程式碼如下：

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    ......

    int textDescent = (int) mTextPaint.getFontMetrics().descent;
    int textAscent = (int) mTextPaint.getFontMetrics().ascent;
    int delta = Math.abs(textAscent) - textDescent;

    if ( mCurrentState == State.INITIAL) {

        canvas.drawText(mText,cx,cy + delta / 2,mTextPaint);

    } 

    .....
}

Folding 狀態其實就是不顯示文字的 Inital 狀態，不同的還有它的 rectwidth 每次重繪時會變小，最終會由 Initial 的形態 1 過渡到 Loading 狀態下的形態 2。在 Initial 狀態下點選按鈕會呼叫一個動畫，這個動畫用於展示形態 1 到形態 2 的過程。

if ( mCurrentState == State.INITIAL ) {
    if ( isUnfold ) {
        shringk();
    }
}


public void shringk() {
    if (shrinkAnim == null) {
        shrinkAnim = ObjectAnimator.ofInt(this,"rectWidth", rectWidth,0);
    }
    shrinkAnim.addListener(this);

    shrinkAnim.setDuration(500);
    shrinkAnim.start();
    mCurrentState = State.FOLDING;
}

public void setRectWidth (int width) {
    rectWidth = width;
    invaidateSelft();
}

private void invaidateSelft() {
    if (Looper.myLooper() == Looper.getMainLooper()) {
        invalidate();
    } else {
        postInvalidate();
    }
}

這裡是一個典型的屬性動畫應用場景，通過不斷改變屬性 rectWidth 的值來進行重繪，而對於繪製這一方面，文章前面部分有說過 LoadButton 通過以中心座標為參考，以 mRectWidth 為變數建立了一個 Path 來繪製輪廓。

另外，大家可以注意到，shrinkAnim 有一個監聽器，我設定為了 LoadButton 本身。

public class LoadButton extends View implements Animator.AnimatorListener {
@Override
    public void onAnimationStart(Animator animation) {

    }

    @Override
    public void onAnimationEnd(Animator animation) {
        isUnfold = false;
        load();
    }

    @Override
    public void onAnimationCancel(Animator animation) {

    }

    @Override
    public void onAnimationRepeat(Animator animation) {

    }   

}

在收縮動畫結束的時候，我呼叫了 load() 方法用來將狀態設定為 Loading，並進行載入動畫。

我們先看看 Loading 狀態下的繪製，它是形態 2 ,也就是在一個圓形內有一個正在載入無限迴圈的動畫。思路也很簡單，用進度條的背景色畫一個圓圈，然後用進度條的前景色繪製相應角度的弧，並且這個弧的半徑和進度條的半徑一樣。

if ( mCurrentState == State.LOADING) {

    if ( progressRect == null ) {
        progressRect = new RectF();
    }
    progressRect.set(cx - circleR,cy - circleR,cx + circleR,cy + circleR);

    mPaint.setColor(mProgressSecondColor);
    //先繪製背景圓
    canvas.drawCircle(cx,cy,circleR,mPaint);
    mPaint.setColor(mProgressColor);
    Log.d(TAG,"onDraw() pro:"+progressReverse+" swpeep:"+circleSweep);
    if ( circleSweep != 360 ) {
        mProgressStartAngel = progressReverse ? 270 : (int) (270 + circleSweep);
        //繪製弧線
        canvas.drawArc(progressRect
        ,mProgressStartAngel,progressReverse ? circleSweep : (int) (360 - circleSweep),
                false,mPaint);
    }

    mPaint.setColor(mBackgroundColor);
}

上面有兩個關鍵的變數 progressReverse 和 circleSweep。progressReverse 用來表示動畫是否需要翻轉，circleSweep 表示每次繪製的時候從起始角度掃描的角度。
正常情況下，起始角度是 270 度不變，如果動畫翻轉時，它是 270 + circleSweep 的值，具體為什麼這樣做，大家可以觀看之前的影象來思考一下。
載入的動畫自然也是屬性動畫控制的，這個動畫讓 circleSweep 從 0 到 360 之間不停地變化。並且在每次迴圈的時候，將 progressReverse 變數置反。

public void load() {
    if (loadAnimator == null) {
        loadAnimator = ObjectAnimator.ofFloat(this,"circleSweep",0,360);
    }

    loadAnimator.setDuration(1000);
    loadAnimator.setRepeatMode(ValueAnimator.RESTART);
    loadAnimator.setRepeatCount(ValueAnimator.INFINITE);

    loadAnimator.removeAllListeners();

    loadAnimator.addListener(new Animator.AnimatorListener() {
        @Override
        public void onAnimationStart(Animator animation) {

        }

        @Override
        public void onAnimationEnd(Animator animation) {

        }

        @Override
        public void onAnimationCancel(Animator animation) {

        }

        @Override
        public void onAnimationRepeat(Animator animation) {
//                Log.d(TAG,"onAnimationRepeat:"+progressReverse);
            progressReverse = !progressReverse;
        }
    });
    loadAnimator.start();
    mCurrentState = State.LOADING;
}

Paused 狀態是當 LoadButton 在 Loading 狀態下，使用者點選了按鈕，這個時候按鈕會顯示一個暫停圖示。

if ( mCurrentState == State.LOADING) {
    mCurrentState = State.PAUSED;
    cancelAnimation();
    invaidateSelft();
}

至於顯示方面，非常簡單就是給一個 drawable 設定好 bound 範圍然後顯示。稍後我會給出程式碼。

Successed 狀態和 Error 狀態實現過程基本上是一致的。但是它們被點選的時候，需要通知點選者。所以我們需要定義一個回撥介面。

if ( mCurrentState == State.ERROR) {

    if (mLoadListenner != null ) {
        mLoadListenner.onClick(false);
    }


} else if ( mCurrentState == State.SUCCESSED ) {
    if (mLoadListenner != null ) {
        mLoadListenner.onClick(true);
    }
} else if ( mCurrentState == State.PAUSED) {
    if (mLoadListenner != null ) {
        mLoadListenner.needLoading();
        load();
    }
}else if ( mCurrentState == State.PAUSED) {
    if (mLoadListenner != null ) {
        mLoadListenner.needLoading();
        load();
    }
} 

public interface LoadListenner {

    void onClick(boolean isSuccessed);

    void needLoading();
}

LoadListenner.onClick() 方法中的引數，isSuccessed 為真告訴點選者載入成功了的資訊。否則提示載入失敗。needLoading() 方法用來告訴點選者當在 Paused 狀態下點選按鈕時，呼叫者應該重新載入了。

它們的顯示程式碼如下：

if ( mCurrentState == State.ERROR) {
    mErrorDrawable.setBounds(cx - circleR,cy - circleR,cx + circleR,cy + circleR);
    mErrorDrawable.draw(canvas);
} else if (mCurrentState == State.SUCCESSED) {
    mSuccessedDrawable.setBounds(cx - circleR,cy - circleR,cx + circleR,cy + circleR);
    mSuccessedDrawable.draw(canvas);
} else if (mCurrentState == State.PAUSED) {
    mPauseDrawable.setBounds(cx - circleR,cy - circleR,cx + circleR,cy + circleR);
    mPauseDrawable.draw(canvas);
}

另外，需要注意的是 Successed 和 Error 狀態，需要開發者根據實際情況決定呼叫。

public void loadSuccessed() {
    mCurrentState = State.SUCCESSED;
    cancelAnimation();
    invaidateSelft();
}

public void loadFailed() {
    mCurrentState = State.ERROR;
    cancelAnimation();
    invaidateSelft();
}

將 LoadButton 重置為 Initial 狀態用 reset() 方法。

public void reset(){
    mCurrentState = State.INITIAL;
    rectWidth = getWidth() - mRadiu * 2;
    isUnfold = true;
    cancelAnimation();
    invaidateSelft();
}

到此，整個 LoadButton 實現邏輯已經完成。接下來我們可以編寫程式碼測試。

測試

我們新增一個 LoadButton 到佈局檔案，然後用 3 個 Button 來測試它成功、失敗、重置的情況。
佈局檔案

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="20dp"
    android:orientation="vertical"
    tools:context="com.frank.statusbuttondemo.MainActivity">


    <com.frank.statusbuttondemo.LoadButton
        android:id="@+id/btn_status"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:backColor="#009966"
        app:contentPaddingLR="20dp"
        app:contentPaddingTB="20dp"
        app:content_color="@android:color/white"
        app:progressedWidth="4dp"
        android:textSize="36sp"
        android:text="點選載入" />
    <Button
        android:id="@+id/btn_test_successed"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:text="載入成功"/>
    <Button
        android:id="@+id/btn_test_error"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="載入失敗"/>
    <Button
        android:id="@+id/btn_reset"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="重置按鈕"/>
</LinearLayout>

MainActivity.java

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    LoadButton mLoadButton;
    Button mBtnSuccessed,mBtnError,mBtnReset;

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

        mLoadButton = (LoadButton) findViewById(R.id.btn_status);
        mBtnSuccessed = (Button) findViewById(R.id.btn_test_successed);
        mBtnError = (Button) findViewById(R.id.btn_test_error);
        mBtnReset = (Button) findViewById(R.id.btn_reset);
        mBtnError.setOnClickListener(this);
        mBtnSuccessed.setOnClickListener(this);
        mBtnReset.setOnClickListener(this);

        mLoadButton.setListenner(new LoadButton.LoadListenner() {
            @Override
            public void onClick(boolean isSuccessed) {
                if ( isSuccessed ) {
                    Toast.makeText(MainActivity.this,"載入成功",Toast.LENGTH_LONG).show();
                } else {
                    Toast.makeText(MainActivity.this,"載入失敗",Toast.LENGTH_LONG).show();
                }
            }

            @Override
            public void needLoading() {
                Toast.makeText(MainActivity.this,"重新下載",Toast.LENGTH_LONG).show();
            }
        });


    }

    @Override
    public void onClick(View v) {
        switch (v.getId())
        {
            case R.id.btn_test_successed:
                mLoadButton.loadSuccessed();
                break;

            case R.id.btn_test_error:
                mLoadButton.loadFailed();
                break;
            case R.id.btn_reset:
                mLoadButton.reset();
                break;

            default:
                break;
        }
    }
}

測試結果：
這裡寫圖片描述

總結

本文的主題並不難，但是如果要實現它也需要細心。關鍵是編碼的時候，要先設計分析，之後就是一氣呵成、水到渠成的事情了。

通過演練這個專案，我覺得自己還是有些收穫。

  • 複習了自定義 View 的基本流程。特別是對 onMeasure() 這一塊有更深的理解。
  • 複習了屬性動畫的使用。
  • 複習了 Canvas 和 Path 的基本用法。
  • 演練了狀態模式下的程式設計。
  • 享受回撥機制帶來的美妙感受。

如果有人認為好用，我想把它上傳到 jcenter 倉庫，目的也是為了演練怎麼上傳 Android 模組到開源庫。喜歡這篇文章就給我一個贊吧，需要你們的鼓勵。哈哈。

相關推薦

自定義View實戰--實現一個清新美觀的載入按鈕

本篇文章已授權微信公眾號 guolin_blog （郭霖）獨家釋出 在 Dribble 上偶然看到了一組互動如下： 當時在心裡問自己能不能做，答案肯定是能做的，不過我比較懶，覺得中間那個伸縮變化要編寫很多程式碼，所以懶得理。後來，為了不讓自己那麼

Android進階之自定義View實戰(一)仿iOS UISwitch控制元件實現

一.引言 個人覺得，自定義View一直是Android開發最變換莫測、最難掌握、最具吸引力的地方。因為它涉及到的知識點比較多，想在實際應用中駕輕就熟，由淺入深，你需要掌握以下知識點: 1. View的繪製機制以及Canvas、Paint、Rect等的常用方

自定義View實戰之漸變,可撥動，帶動畫圓環控制元件實現

效果圖預覽 1. 分析 1. 繪製中間數字 2. 繪製帶刻度的圓環 考慮分成若干等份 3. 繪製漸變圓環 需要用到漸變相關屬性 4. 動畫處理的同時需要考慮時時計算角度 5. 圓環開關控制

Android從零擼美團(三) - Android多標籤tab滑動切換 - 自定義View快速實現高度定製封裝

這是【從零擼美團】系列文章第三篇 【從零擼美團】是一個高仿美團的開源專案，旨在鞏固 Android 相關知識的同時，幫助到有需要的小夥伴。 GitHub 原始碼地址：github.com/cachecats/L… Android從零擼美團(一) - 統一管理 Gradle 依賴 提取到單獨檔案中 Andr

Android自定義View——canvas 繪製一個會動的時鐘

文章目錄 ####1、功能例項 用canvas 繪製一個 會動的 指標式 時鐘 ####2、程式碼架構 ####3、主要功能程式碼 activity_main.xml 檔案 <?xml version="1.0" encodin

全程自定義view繪製的一個開關器

我們在生活中總會用到一些東西，有一個東西來管理的 那就是開關 下面我們就寫一個自定義view繪製的開關了 下面就直接上程式碼了 public class KaiGuan extends View { boolean flag=true; priv

Android自定義View的實現方法，帶你一步步深入瞭解View(四)

不知不覺中，帶你一步步深入瞭解View系列的文章已經寫到第四篇了，回顧一下，我們一共學習了LayoutInflater的原理分析、檢視的繪製流程、檢視的狀態及重繪等知識，算是把View中很多重要的知識點都涉及到了。如果你還沒有看過我前面的幾篇文章，建議先去閱讀一下，多瞭解一些

Android自定義View的實現方法 帶你一步步深入瞭解View 四

                不知不覺中，帶你一步步深入瞭解View系列的文章已經寫到第四篇了，回顧一下，我們一共學習了LayoutInflater的原理分析、檢視的繪製流程、檢視的狀態及重繪等知識，算是把View中很多重要的知識點都涉及到了。如果你還沒有看過我前面的幾篇文章，建議先去閱讀一下，多瞭解一些原

自定義View：實現RecyclerView的item新增懸浮層的效果

前言 20天后，終於良心發現更新部落格了，又到了年底，好多的事情都要收尾，今天分享一個RecyclerView的容器類，幫助大家實現新增Item的浮層的效果。 首先看一下效果圖： 有人會問我：老鐵，你實現的這個東西有個卵用？如果你沒看明白，我們再看一張非常熟悉

【Android自定義View實戰】之自定義評價打分控制元件RatingBar，可以自定義星星大小和間距

在Android開發中，我們經常會用到對商家或者商品的評價，運用星星進行打分。然而在Android系統中自帶的打分控制元件，RatingBar特別不好用，間距和大小無法改變。所以，我就自定義了一個特別好用的打分控制元件。在專案中可以直接使用，特別簡

Android自定義View繪圖實現拖影動畫

前幾天在“Android繪圖之漸隱動畫”一文中通過畫線實現了漸隱動畫，但裡面有個問題，畫筆較粗（大於1）時線段之間會有裂隙，我又改進了一下。這次效果好多了。 先看效果吧： 然後我們來說說基本的做法： 根據畫筆寬度，計算每一條線段兩個頂點對應的四個點，

我的Android進階之旅------>Android自定義View來實現解析lrc歌詞並同步滾動、上下拖動、縮放歌詞的功能

前言 最近有個專案有關於播放音樂時候，關於歌詞有以下幾個功能： 1、實現歌詞同步滾動的功能，即歌曲播放到哪句歌詞，就高亮地顯示出正在播放的這個歌詞； 2、實現上下拖動歌詞時候，可以拖動播放器的進度。即可以不停地上下拖動歌詞，

Android自定義view之實現帶checkbox的Snackbar

前言 最近專案要求實現一個類似於snackbar功能，但是又不完全是snackbar的外掛，本來想在Google提供的snackbar裡面進行更改，但是這樣太麻煩了，於是自己動手實現了一個snackbar。先看下效果圖： 1.要解決的問題 1.彈框裡面除了文字提示之外還有一個按鈕，這個按

Android自定義View畫出一個時鐘(時針、分針、秒針)完美搭配當前時間走動

1、獲取時間值 private void getDatas() { SimpleDateFormat format = new SimpleDateFormat("HH,mm,ss"); String time = format

【Android自定義View實戰】之自定義超簡單SearchView搜尋框

package cn.bluemobi.dylan.searchview; import android.content.Context; import android.text.Editable; import android.text.TextWatcher; import android.util.A

Android自定義View之實現簡單炫酷的球體進度球

前言 最近一直在研究自定義view，正好專案中有一個根據下載進度來實現球體進度的需求，所以自己寫了個進度球，程式碼非常簡單。先看下效果： 效果還是非常不錯的。 準備知識 要實現上面的效果我們只要掌握兩個知識點就好了，一個是Handler機制，用於發訊息重新整理我們的進度球，一個是clip

Android自定義view之實現仿抖音雙擊點贊單擊暫停特效

       2018年抖音、快手、火山等短視訊App比較火，最近自己做短視訊專案時有個需求，就是類似抖音的點贊特效，單擊螢幕時視訊暫停，再次點選時視訊恢復播放，雙擊或者連續多次點選時出現點贊特效(飄小心心特效)，而且是全屏可以隨意點選，都

自定義View之實現日出日落太陽動效

    以前也很羨慕網上大神隨手寫寫就是一個很漂亮的自定義控制元件，所以我下決心也要學著去寫，剛好最近複習了Android View的繪製流程知識，看來看去就是那些個知識點，沒點產出總感覺很迷。現在個人呢用的是華為榮耀8手機，碰巧在看自帶的天氣APP時，滑到最下面看到那個動

Android自定義View實戰（會波動的View）

今天寫這篇部落格的目的，主要是幫助自己總結一下今天學習到的自定義View的相關知識，如果順便能夠幫助大家一點點，那我也感覺很開心。 首先，自定義的一般步驟是： 1.建立自定義View，繼承系統自帶的View，並重寫其相關構造方法； 2.在Values下面新

Android自定義View完美實現指示器位置隨進度變化的IndicateProgressView

該文章同步釋出在公眾號”LinminTech”上，請在本文最後掃碼關注，獲取更多精彩Android開發文章。 效果圖 需求 在平時開發過程中，UI經常要求實現如上圖所示的ProgressBar，但是Android系統自帶的ProgressBar