Android 自訂View (三) 圓環交替 等待效果

 

一個朋友今天有這麼個需求（），我覺得那自訂View來做還是很適合的，就做了下，順便和大家分享下，對於自訂View多練沒壞處麼。如果你看了前兩篇，那麼這篇一定so easy 。

效果就這樣，分析了一下，大概有這幾個屬性，兩個顏色，一個速度，一個圓環的寬度。

還是我們自定View的那幾個步驟：

 

1、自訂View的屬性

2、在View的構造方法中獲得我們自訂的屬性

[ 3、重寫onMesure ]

4、重寫onDraw

-------------------------------------------------------------------------------------------------------------------

1、自訂屬性：

 

2、在View的構造方法中獲得我們自訂的屬性

 

 

/** * 第一圈的顏色 */private int mFirstColor;/** * 第二圈的顏色 */private int mSecondColor;/** * 圈的寬度 */private int mCircleWidth;/** * 畫筆 */private Paint mPaint;/** * 當前進度 */private int mProgress;/** * 速度 */private int mSpeed;/** * 是否應該開始下一個 */private boolean isNext = false;public CustomProgressBar(Context context, AttributeSet attrs){this(context, attrs, 0);}public CustomProgressBar(Context context){this(context, null);}/** * 必要的初始化，獲得一些自訂的值 *  * @param context * @param attrs * @param defStyle */public CustomProgressBar(Context context, AttributeSet attrs, int defStyle){super(context, attrs, defStyle);TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CustomProgressBar, defStyle, 0);int n = a.getIndexCount();for (int i = 0; i < n; i++){int attr = a.getIndex(i);switch (attr){case R.styleable.CustomProgressBar_firstColor:mFirstColor = a.getColor(attr, Color.GREEN);break;case R.styleable.CustomProgressBar_secondColor:mSecondColor = a.getColor(attr, Color.RED);break;case R.styleable.CustomProgressBar_circleWidth:mCircleWidth = a.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_PX, 20, getResources().getDisplayMetrics()));break;case R.styleable.CustomProgressBar_speed:mSpeed = a.getInt(attr, 20);// 預設20break;}}a.recycle();mPaint = new Paint();// 繪圖線程new Thread(){public void run(){while (true){mProgress++;if (mProgress == 360){mProgress = 0;if (!isNext)isNext = true;elseisNext = false;}postInvalidate();try{Thread.sleep(mSpeed);} catch (InterruptedException e){e.printStackTrace();}}};}.start();}

3、直接重寫onDraw，這不需要重寫onMeasure

 

 

@Overrideprotected void onDraw(Canvas canvas){int centre = getWidth() / 2; // 擷取圓心的x座標int radius = centre - mCircleWidth / 2;// 半徑mPaint.setStrokeWidth(mCircleWidth); // 設定圓環的寬度mPaint.setAntiAlias(true); // 消除鋸齒mPaint.setStyle(Paint.Style.STROKE); // 設定空心RectF oval = new RectF(centre - radius, centre - radius, centre + radius, centre + radius); // 用於定義的圓弧的形狀和大小的界限if (!isNext){// 第一顏色的圈完整，第二顏色跑mPaint.setColor(mFirstColor); // 設定圓環的顏色canvas.drawCircle(centre, centre, radius, mPaint); // 畫出圓環mPaint.setColor(mSecondColor); // 設定圓環的顏色canvas.drawArc(oval, -90, mProgress, false, mPaint); // 根據進度畫圓弧} else{mPaint.setColor(mSecondColor); // 設定圓環的顏色canvas.drawCircle(centre, centre, radius, mPaint); // 畫出圓環mPaint.setColor(mFirstColor); // 設定圓環的顏色canvas.drawArc(oval, -90, mProgress, false, mPaint); // 根據進度畫圓弧}}

大功完成了，當然了，唯一比較糾結的地方就是兩個顏色何時切換，如何切換，我採用上面的辦法，你也可以自己想想怎麼實現。

 

 

好了，各位看官留個言，頂一個吧~