?目前IOS和Android兩個系統的交互設計都在相互的借鑒，所以有的時候我們需要在Android系統中實現IOS的一些UI效果，那我們就必須自己實現啦（沒有現成的控件）。現在也看到很多公司也把能夠自定義UI放到招聘要求中，可見我們還是要學習如何去自定義。當然我們自定義UI的過程中，可以讓我們對Android系統的一些機制理解的更加透徹。那么自定義UI真的很難嗎，我感覺沒有那么難，只要多練習，自然就可以了。按照我的理解，其實我們自定義UI是可以通過這三種方法實現：

1.繼承View，直接在Canvas上面繪制。

2.繼承ViewGroup，根據ViewGroup的繪制流程實現自己需要的效果。

3.利用已有的UI控件(RelativeLayout,LinearLayout,FrameLayout....)，繼承改造或者組合使用等。

接下來就以上的方法，一個一個實踐來練習吧！

自定義UI（利用View）

?利用View實現自定義主要是繼承View并利用OnDraw(Canvas canvas)方法繪制自己需要的UI，利用canvas主要可以繪制矩形(包括圓角矩形)、圓、點、線、扇形等，同時還可以根據類Path設置需要的路徑，利用Canvas將Path繪制出來。具體的使用通過實踐學習吧。這里我們還要關心View中的OnMeasure（）方法，這個方法主要是設定我們當前這個View的大小。關于View中的這些方法的分析可以看看這篇文章，分析的比較詳細。好了，還是實戰吧（在實戰中遇到問題不斷的解決，自然對很多東西就了解了，總是看理論的東西還是理解的不透徹哦），今天利用View實現如下的效果(gif 效果不是很好0_0，這里我們只分析第二個效果圖，其他的讀者可以自己擴展實現)：

效果圖

分解效果圖

?任何復雜的事情都要學會分解成多個簡單的事情去處理。動畫效果的某個瞬間的靜態UI如下所示：

運動的某個瞬間

通過這個靜態的UI，可以看出它的組成很簡單：一個大圓，一個實心的小圓————這個小圓的中心點是在大圓的圓環上。這樣就把這個靜態的UI分解為：一個大圓和一個小圓。

接下來想想怎么讓實心小圓動起來呢？前面說了，小圓的中心在大圓的圓環上，如果這個中心不停的沿著大圓的圓環上走，不就動起來的。怎么沿著走呢，看看下面的圖！

坐標圖

上圖我們繪制了小球（實心小圓）的中心位置，這里我們選取的順時針方向為正方向，并且0度角為X軸正方向。這里選取了45度角的一個靜態分析，假設定義一個變量為angle，當這個angle不斷的從0到360變化時，小球就是沿著大圓跑了。根據上面的圖和前面的分析，應該比較清晰的知道原理了吧^_^！

實現分解效果圖

?這里將實現上面分解的結果啦，應該很簡單的！

1.繪制圓環

?在onDraw(Canvas canvas)這個方法中利用canvas繪制，直接上代碼：

private void drawBigCircle(Canvas canvas){canvas.drawCircle(rectF.centerX(), rectF.centerY(), getBigCircleRadius(), mCirclePaint); }

（這里的rect變量主要是利用Rect累框定繪制圓的范圍）這里主要是利用了canvas的方法(當然，繪制circle的方法還有其他幾個方法可以調用，根據自己的需求):

drawCircle(float cx, float cy, float radius, @NonNull Paint paint)

簡單介紹一下參數，這里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);

這里的第一步是計算角度，第二是計算實心小圓的中心位置，這兩步根據上面分解章節的數學計算應該很好理解的。第三步是繪制實心小球，這里實現實心是通過Paint的方法setStyle(Paint.Style.FILL)設置充滿整個圓;

接下來就是繪制這個“小球”啦。首先移動畫布(改變坐標系的中心位置):在計算小球的中心位置(cx,cy)的時候，是根據大圓的半徑計算的，所以這里的(cx,cy)是到大圓中心點的距離。因此，Canvas的起始位置應該移動到大圓的中心位置。

這里首先要保存一下畫布，在繪制結束了還要恢復到原來的狀態，為什么？因為在繪制之前我們需要對畫布進行移動，當繪制結束的時候如果不恢復到原來的狀態，Canvas將一直保持在目前的狀態，而后面的有可能是需要在沒有移動的畫布上繪制其他圖案，這時候的中心位置改變了，就會存在問題。

3.讓小球動起來

?上面的兩步我們已經把靜態的狀態繪制完成了，但是還需要讓這個小球動起來(順著大圓環跑Y(^_^)Y)。其實在繪制第二步繪制小球的時候我們是固定了一個45度角，如果我們讓這個角度變化(0-360)，那么不就OK了。那么怎么才能做到呢？那就想啊..........，這里想到了利用ValueAimator來實現，關于這個類的使用這里就不做介紹。大家可以另外尋找相應的文章自行補腦！

AccTypeEvaluator accCore = new AccTypeEvaluator(); ValueAnimator animator = ValueAnimator.ofObject(accCore, 0.0f, 360.0f); animator.setDuration(mDuration); animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {@Overridepublic 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);} }

根據上面的代碼，我們就可以獲得0-360變化了，并且是隨著時間的變化。當我們獲取到角度時通過調用invalidate()方法，觸發View重新繪制界面。這樣就可以達到我們需要的動畫效果啦。

總結

??上面一步一步介紹了自定義UI的過程，現在應該對這個過程有所了解了——其實主要還是一個模型的建立過程。這里簡單總結一下：

1.一點一點的分解UI，把復雜的界面分解成一個一個靜態、簡單的界面，并實現它們。

2.當靜態界面繪制完了，需要動畫的——觀察需要改變哪些參數，并且不斷的觸發View繪制，不就動起來了^_^。

3.一些比較復雜的動畫或者效果就需要一些物理、數學方面的知識來輔助了——塞貝爾曲線等，其實這些就需要花費你一些時間去研究了（但是，還是那句話，從簡單到復雜）。

4.多多的練習，只有練習你才能對自定義有更深的理解。

這里放一個簡單的自定義UI，讓大家自己實現吧(這里是靜態的，大家也可以讓它動起來0_0)！

練習效果

附上這個自定義UI的源碼吧——github地址

如何利用ViewGroup自定義UI請閱讀實踐自定義UI－ViewGroup

如何利用RLF...(RelativeLayout、LinearLayout、FrameLayout...)自定義UI請閱讀實踐自定義UI—RLF...(RelativeLayout LinearLayout FrameLayout....)

希望在Android學習的路上，大家共同成長！

總結

以上是生活随笔為你收集整理的实践自定义UI—View的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。