嗯。。再差1篇就可以獲得持之以恆徽章了，今天帶大家畫一個比較簡單的view。

轉載請註明出處：http://blog.csdn.net/wingichoy/article/details/50477108

廢話不多說，看效果圖：

首先 建構函式 測量... 這裡就一筆帶過了。 

 public ErrorView(Context context) {
        this(context, null);
    }

    public ErrorView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

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

    @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);
        if (widthMode == MeasureSpec.EXACTLY) {
            mWidth = widthSize;
        } else {
            mWidth = 200;
        }


        if (heightMode == MeasureSpec.EXACTLY) {
            mHeight = heightSize;
        } else {
            mHeight = 200;
        }
        setMeasuredDimension(mWidth, mHeight);
    }
 

如果你看不懂上面這些，翻翻我的這一篇部落格，有一些補充的知識點。圓形百分比view

接下來draw，如果讓你繪製一個靜態的這個突然，你一定閉著眼也能畫出來。。那麼怎麼才能實現動態的效果呢。。

其實就是模仿手繪的過程，我們是一點一點畫出來的，一條線的逐漸延遲。  那我們就來模仿這個自然的過程。

首先畫一個圓形。

Paint p = new Paint();
        p.setStrokeWidth(10);
        p.setAntiAlias(true);
        p.setColor(Color.RED);
        p.setStyle(Paint.Style.STROKE);
        RectF rectF = new RectF(0 + 10, 0 + 10, mWidth - 10, mHeight - 10);
        canvas.drawArc(rectF, 180, 360 * mProgress / 100, false, p);
        mProgress+=5;
 

可以看到drawArc的第三個引數 是變化的 ， 其中mProgress的初值是零，這裡讓他自增,也就是說，每次呼叫onDraw方法，他就會增加。所以每次的弧都會比原來長一點點，直到最後畫完。  所以在程式的最後 一定有 postInvalidateDelayed(10); 方法。

接下來來繪製兩條線，這裡的座標我直接取半徑的4分之一啦，唯一注意一點就是，只有在progress大於100的時候 我們才繪製兩條線，兩條線段也是根據一個變數自增的，原理同上。  這裡mLineOneX等引數均表示畫線的時候兩點的座標。 當mLineOneX = mWidth * 0.5的時候  mWidth /4 + mLineOneX 就等於我們要畫線段的最終點。

if (mProgress > 100) {
            //畫左邊的線
            if (mLineOneX < mWidth * 0.5) {
                mLineOneX+=20;
                mLineOneY+=20;
            }
            canvas.drawLine(mWidth / 4, mHeight / 4, mWidth / 4 + mLineOneX, mHeight / 4 + mLineOneY, p);


            if (mLineOneX == mWidth * 0.5) {
                if (mLineTwoX < mWidth * 0.5) {
                    mLineTwoX+=20;
                    mLineTwoY+=20;
                }else {
                    //判斷全部繪製完成
                    isLineDrawDone = true;
                }
                canvas.drawLine(mWidth / 4, (float) (mHeight * 0.75), mWidth / 4 + mLineTwoX, (float) (mHeight * 0.75) - mLineTwoY, p);


            }


        }

之後 新增一個標記位   isLineDrawDone  判斷一下 如果沒有畫完 則 :

 if(isLineDrawDone){
            Log.e("wing","draw done");
           
        }else{

            postInvalidateDelayed(10);
        }

現在 基本上完成了繪製，  別急 還沒加震動，震動效果是怎麼實現的呢，大家還記得嗎，如果忘了，可以看看我這篇部落格：自定義動畫 實現抖一抖效果

所以我們要寫一個介面，來回調onStop

public interface OnStopListener{
        void onStop(View v);
    }

把最後的繪製完成完善，繼續增加一個標誌位，代表全部繪製完成

 if(isLineDrawDone){
            Log.e("wing","draw done");
            if(!isDrawDone) {
                if (mOnStopListener != null) {
                    mOnStopListener.onStop(this);
                }
                isDrawDone = true;
            }

        }else{

            postInvalidateDelayed(10);
        }

提供一個reset()方法 讓使用者可以手動控制重繪

 public void reset() {
        mProgress = 0;
        mLineOneX = 0;
        mLineOneY = 0;
        mLineTwoX = 0;
        mLineTwoY = 0;
        isLineDrawDone = false;
        isDrawDone = false;
        invalidate();
    }

在提供一個新增監聽器的方法

 public void setOnStopListener(OnStopListener onStopListener){
        mOnStopListener = onStopListener;
    }

最後 在Activity中 為這個View新增 震動效果

protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mErrorView = (ErrorView) findViewById(R.id.errorView);

        mErrorView.setOnStopListener(new ErrorView.OnStopListener() {
            @Override
            public void onStop(View v) {
                ShakeAnimation sa = new ShakeAnimation();
                sa.setDuration(1000);
                v.startAnimation(sa);
            }
        });

        mErrorView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                mErrorView.reset();
            }
        });

嘿嘿嘿。。。這樣就騙到了持之以恆勳章。

原始碼地址:http://download.csdn.net/detail/wingichoy/9394685