教育行業(yè)A股IPO第一股(股票代碼 003032)

全國咨詢/投訴熱線:400-618-4000

Android培訓之自定義View那些事

更新時間:2016年07月13日17時29分 來源:Android培訓學院 瀏覽次數:

自定義View那些事

前言

Android系統已經為我們提供了有各種功能的View了,如顯示文本的,圖片的,還提供了一些ViewGroup控制子View顯示的,如ListView,LinearLayout,RelativeLayout,然而呢,面對復雜多變的產品需求,這些還是無法滿足。在黑馬的課程中,我們有4天的專門講解自定義View知識的課程,也在4個項目中去穿插的講解自定義控件,可以說算是比較全面了。今天我從幾個方面綜合講解下如何去自定義出你想要的View。
 

分析

當我們說要自定義一個View時,其實你是在想自定義這個View的這些方面:
1. 你想自定義這個View上顯示的內容
2. 你想自定義這個View中子View的擺放位置
3. 你想讓這個View跟隨手指的移動進行某些變化
 
所以,我們就從這4個方面來學習如何自定義效果。
 

實踐

如何自定義View顯示的內容

首先,你要知道想自定義View應該去繼承自誰,到底是View還是ViewGroup;如果你只是想自定義單個View的內容,那么應該繼承自View;如果你想自定義一個布局的顯示內容,那么應該繼承ViewGroup。
現在我們設定需求,要做一個顯示一個紅色圓形的View,那么你要繼承View,重寫onDraw方法,因為onDraw方法就是允許自定義顯示內容的方法。我們在里面繪制一個圓,代碼如下:
 
public class CircleView extends View{
Paint paint = new Paint();
public CircleView(Context context, AttributeSet attrs) {
super(context, attrs);
paint.setColor(Color.RED);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawCircle(getWidth()/2, getHeight()/2, 50, paint);
}
}
 
效果圖如下:
 
 
下面呢,我們在設一個復雜點的需求,要求自定義一個顯示一個紅色對勾的View,這時候要繪制對勾,需要借助Path類來勾勒。代碼如下:
 
public class TickView extends View{
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
Path path = new Path();
public TickView(Context context, AttributeSet attrs) {
super(context, attrs);
paint.setColor(Color.RED);
paint.setStrokeWidth(8);
paint.setStyle(Style.STROKE);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
path.moveTo(100, 100);
path.lineTo(140, 140);
path.lineTo(220, 60);
canvas.drawPath(path, paint);
}
}
 
效果圖如下:
 
 
Ok,以上這些就是如何自定義View內容的技巧,當然如果你想繪制更加復雜的效果,那就要仔細學習一下Canvas和Path的api了。
 

如何自定義View中子View的位置

此處由于你要自定義的View中是包含子View的,那么你應該繼承ViewGroup,并且通常情況下,我們?yōu)榱耸∪崿FonMeasure方法,那么就可以繼承系統提供的某個布局,如FrameLayout。自定義子View的位置,那么需要重寫onLayout方法了,該方法是允許你隨意指定子View位置的。
現在我們設定需求,要求實現一個ViewGroup,它的子View是從右往左邊排列的。代碼如下:
 
public class RightLayout extends FrameLayout{
public RightLayout(Context context, AttributeSet attrs) {
super(context, attrs);
}
@Override
protected void onLayout(boolean changed, int left, int top, int right,
int bottom) {
View child1 = getChildAt(0);
View child2 = getChildAt(1);
child1.layout(getMeasuredWidth()-child1.getMeasuredWidth(),
getPaddingTop(),getMeasuredWidth(),
getPaddingTop()+child1.getMeasuredHeight());
child2.layout(child1.getLeft()-child2.getMeasuredWidth(), getPaddingTop(),getMeasuredWidth()-child1.getMeasuredWidth(),
getPaddingTop()+child2.getMeasuredHeight());
}
}
 
效果圖如下:
 
 
總結,通過layout的方法來控制View的位置,這個屬于比較簡單的。
 

如何讓View隨手指移動進行變化

要實現這個,那么你需要完成2個點:
1. 監(jiān)聽手指移動的距離
2. 讓View進行一些變化
 
對于第一點,監(jiān)聽手指移動的距離,這個很簡單,可以重寫onTouch方法,獲取手指移動距離,也可以借助ViewDragHelper所封裝的方法來監(jiān)聽手指的移動。對于通過onTouch方法來獲取手指移動距離的代碼略過,下面展示一下通過ViewDragHelper來獲取手指距離的代碼,你需要熟悉一下ViewDragHelper的用法才能看懂下面的代碼,clampViewPositionHorizontal方法的dx參數就是手指移動的距離,代碼如下:
 
@Override
public int clampViewPositionHorizontal(View child, int left, int dx) {
//dx就是手指移動的距離
return super.clampViewPositionHorizontal(child, left, dx);
}
 
所以,獲取手指移動距離很簡單,我們主要把精力放在讓View進行一些變化上。
這些變化一般是的是縮放,平移,透明,旋轉的變化,這些變化Android都為我們提供了對應的操作View屬性的方法,代碼如下:
 
@Override
public int clampViewPositionHorizontal(View child, int left, int dx) {
//dx就是手指移動的距離
//平移
view.setTranslationX(dx);
//縮放
view.setScaleX(0.1f);
view.setScaleY(0.1f);
//透明
view.setAlpha(0.1f);
//旋轉
view.setRotation(180);
 
return super.clampViewPositionHorizontal(child, left, dx);
}
 
當然如果你需要讓View執(zhí)行某些動畫效果,那么你要借助屬性動畫了,如果你想自定義動畫效果,那么就需要使用ValueAnimator,或者繼承Animaton類實現自定義動畫。
 

總結

以上總結了我們自定義View中最常用的情景,當然還有其他很多情況。不過我們可以在這3種基礎上舉一反三。遇到復雜的效果,就分離模塊,一點一點實現,自定義View也就那么點事。
 
 
 
 本文版權歸傳智播客Android培訓學院所有,歡迎轉載,轉載請注明作者出處。謝謝!
作者:傳智播客Android培訓學院
首發(fā):http://xamj520.com/Android
 
 
 
 
 
0 分享到:
和我們在線交談!