目前IOS和Android兩個系統(tǒng)的交互設計都在相互的借鑒，所以有的時候我們需要在Android系統(tǒng)中實現(xiàn)IOS的一些UI效果，那我們就必須自己實現(xiàn)啦（沒有現(xiàn)成的控件）。現(xiàn)在也看到很多公司也把能夠自定義UI放到招聘要求中，可見我們還是要學習如何去自定義。當然我們自定義UI的過程中，可以讓我們對Android系統(tǒng)的一些機制理解的更加透徹。那么自定義UI真的很難嗎，我感覺沒有那么難，只要多練習，自然就可以了。按照我的理解，其實我們自定義UI是可以通過這三種方法實現(xiàn)：
1.繼承View，直接在Canvas上面繪制。
2.繼承ViewGroup，根據(jù)ViewGroup的繪制流程實現(xiàn)自己需要的效果。
3.利用已有的UI控件(RelativeLayout,LinearLayout,FrameLayout....)，繼承改造或者組合使用等。
接下來就以上的方法，一個一個實踐來練習吧！
自定義UI（利用View）
利用View實現(xiàn)自定義主要是繼承View并利用OnDraw(Canvas canvas)方法繪制自己需要的UI，利用canvas主要可以繪制矩形(包括圓角矩形)、圓、點、線、扇形等，同時還可以根據(jù)類Path設置需要的路徑，利用Canvas將Path繪制出來。具體的使用通過實踐學習吧。這里我們還要關心View中的OnMeasure（）方法，這個方法主要是設定我們當前這個View的大小。關于View中的這些方法的分析可以看看這篇文章，分析的比較詳細。好了，還是實戰(zhàn)吧（在實戰(zhàn)中遇到問題不斷的解決，自然對很多東西就了解了，總是看理論的東西還是理解的不透徹哦），今天利用View實現(xiàn)如下的效果(gif 效果不是很好0_0，這里我們只分析第二個效果圖，其他的讀者可以自己擴展實現(xiàn))：
分解效果圖
任何復雜的事情都要學會分解成多個簡單的事情去處理。動畫效果的某個瞬間的靜態(tài)UI如下所示：
通過這個靜態(tài)的UI，可以看出它的組成很簡單：一個大圓，一個實心的小圓————這個小圓的中心點是在大圓的圓環(huán)上。這樣就把這個靜態(tài)的UI分解為：一個大圓和一個小圓。
接下來想想怎么讓實心小圓動起來呢？前面說了，小圓的中心在大圓的圓環(huán)上，如果這個中心不停的沿著大圓的圓環(huán)上走，不就動起來的。怎么沿著走呢，看看下面的圖！
上圖我們繪制了小球（實心小圓）的中心位置，這里我們選取的順時針方向為正方向，并且0度角為X軸正方向。這里選取了45度角的一個靜態(tài)分析，假設定義一個變量為angle，當這個angle不斷的從0到360變化時，小球就是沿著大圓跑了。根據(jù)上面的圖和前面的分析，應該比較清晰的知道原理了吧_！
實現(xiàn)分解效果圖
這里將實現(xiàn)上面分解的結果啦，應該很簡單的！
1.繪制圓環(huán)
在onDraw(Canvas canvas)這個方法中利用canvas繪制，直接上代碼：
private void drawBigCircle(Canvas canvas){
canvas.drawCircle(rectF.centerX(), rectF.centerY(), getBigCircleRadius(), mCirclePaint);
}
（這里的rect變量主要是利用Rect累框定繪制圓的范圍）這里主要是利用了canvas的方法(當然，繪制circle的方法還有其他幾個方法可以調(diào)用，根據(jù)自己的需求):
drawCircle(float cx, float cy, float radius, @NonNull Paint paint)
簡單介紹一下參數(shù)，這里cx,cy表示的是圓心位置；radius表示圓半徑的大小，paint主要是畫筆,可以設置顏色等。這個應該比較簡單吧+_+
2.繪制實心小圓——小球
還是直接看代碼，然后分析_
double sweepAngle = Math.PI/180 * 45;
//caculate the circle's center(x, y)
float y = (float)Math.sin(sweepAngle)*(getBigCircleRadius());
float x = (float)Math.cos(sweepAngle)*(getBigCircleRadius());
int restoreCount = canvas.save();
//change aix center position
canvas.translate(rectF.centerX(), rectF.centerY());
canvas.drawCircle(x, y, mAccBallRadius, mAccBallPaint);
canvas.restoreToCount(restoreCount);
這里的第一步是計算角度，第二是計算實心小圓的中心位置，這兩步根據(jù)上面分解章節(jié)的數(shù)學計算應該很好理解的。第三步是繪制實心小球，這里實現(xiàn)實心是通過Paint的方法setStyle(Paint.Style.FILL)設置充滿整個圓;
接下來就是繪制這個“小球”啦。首先移動畫布(改變坐標系的中心位置):在計算小球的中心位置(cx,cy)的時候，是根據(jù)大圓的半徑計算的，所以這里的(cx,cy)是到大圓中心點的距離。因此，Canvas的起始位置應該移動到大圓的中心位置。
這里首先要保存一下畫布，在繪制結束了還要恢復到原來的狀態(tài)，為什么？因為在繪制之前我們需要對畫布進行移動，當繪制結束的時候如果不恢復到原來的狀態(tài)，Canvas將一直保持在目前的狀態(tài)，而后面的有可能是需要在沒有移動的畫布上繪制其他圖案，這時候的中心位置改變了，就會存在問題。
3.讓小球動起來
上面的兩步我們已經(jīng)把靜態(tài)的狀態(tài)繪制完成了，但是還需要讓這個小球動起來(順著大圓環(huán)跑Y(_)Y)。其實在繪制第二步繪制小球的時候我們是固定了一個45度角，如果我們讓這個角度變化(0-360)，那么不就OK了。那么怎么才能做到呢？那就想啊..........，這里想到了利用ValueAimator來實現(xiàn)，關于這個類的使用這里就不做介紹。大家可以另外尋找相應的文章自行補腦！
AccTypeEvaluator accCore = new AccTypeEvaluator();
ValueAnimator animator = ValueAnimator.ofObject(accCore, 0.0f, 360.0f);
animator.setDuration(mDuration);
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
Float value = (Float) animation.getAnimatedValue();
sweepAngle = value;
invalidate();
}
});
animator.setRepeatCount(ValueAnimator.INFINITE);
animator.start();
這里的AccTypeEvaluator定義如下：
public class AccTypeEvaluator implements TypeEvaluator<Float>{
@Override
public Float evaluate(float fraction, Float startValue, Float endValue) {
Log.d("", " current fraction == " + fraction);
return fraction * (endValue - startValue);
}
}
根據(jù)上面的代碼，我們就可以獲得0-360變化了，并且是隨著時間的變化。當我們獲取到角度時通過調(diào)用invalidate()方法，觸發(fā)View重新繪制界面。這樣就可以達到我們需要的動畫效果啦。
總結
上面一步一步介紹了自定義UI的過程，現(xiàn)在應該對這個過程有所了解了——其實主要還是一個模型的建立過程。這里簡單總結一下：
1.一點一點的分解UI，把復雜的界面分解成一個一個靜態(tài)、簡單的界面，并實現(xiàn)它們。
2.當靜態(tài)界面繪制完了，需要動畫的——觀察需要改變哪些參數(shù)，并且不斷的觸發(fā)View繪制，不就動起來了_。
3.一些比較復雜的動畫或者效果就需要一些物理、數(shù)學方面的知識來輔助了——塞貝爾曲線等，其實這些就需要花費你一些時間去研究了（但是，還是那句話，從簡單到復雜）。
4.多多的練習，只有練習你才能對自定義有更深的理解。
這里放一個簡單的自定義UI，讓大家自己實現(xiàn)吧(這里是靜態(tài)的，大家也可以讓它動起來0_0)！
附上這個自定義UI的源碼吧——github地址
如何利用ViewGroup自定義UI請閱讀實踐自定義UI－ViewGroup
如何利用RLF...(RelativeLayout、LinearLayout、FrameLayout...)自定義UI請閱讀實踐自定義UI—RLF...(RelativeLayout LinearLayout FrameLayout....)
希望在Android學習的路上，大家共同成長！
