Android自定義View

轉自:http://www.lxweimin.com/p/e9d8420b1b9c

自定義View是Android開發者必須了解的基礎

今天,我將手把手教你寫一個自定義View,并理清自定義View所有應該的注意點

閱讀本文前,請先閱讀我寫的一系列自定義View文章

(1)自定義View基礎 - 最易懂的自定義View原理系列

(2)自定義View Measure過程 - 最易懂的自定義View原理系列

(3)自定義View Layout過程 - 最易懂的自定義View原理系列

(4)自定義View Draw過程- 最易懂的自定義View原理系列

Android事件分發機制詳解:史上最全面、最易懂

1. 自定義View的分類

自定義View一共分為兩大類,具體如下圖:

分類

2. 具體介紹 & 使用場景

對于自定義View的類型介紹及使用場景如下圖:

具體介紹 & 使用場景

3. 使用注意點

在使用自定義View時有很多注意點(坑),希望大家要非常留意:

使用注意點

3.1 支持特殊屬性

支持wrap_content

如果不在onMeasure()中對wrap_content作特殊處理,那么wrap_content屬性將失效

具體原因請看文章:為什么你的自定義View wrap_content不起作用?

支持padding & margin

如果不支持,那么padding和margin(ViewGroup情況)的屬性將失效

對于繼承View的控件,padding是在draw()中處理

對于繼承ViewGroup的控件,padding和margin會直接影響measure和layout過程

3.2 多線程應直接使用post方式

View的內部本身提供了post系列的方法,完全可以替代Handler的作用,使用起來更加方便、直接。

3.3 避免內存泄露

主要針對View中含有線程或動畫的情況:當View退出或不可見時,記得及時停止該View包含的線程和動畫,否則會造成內存泄露問題

啟動或停止線程/ 動畫的方式:

啟動線程/ 動畫:使用view.onAttachedToWindow(),因為該方法調用的時機是當包含View的Activity啟動的時刻

停止線程/ 動畫:使用view.onDetachedFromWindow(),因為該方法調用的時機是當包含View的Activity退出或當前View被remove的時刻

3.4 處理好滑動沖突

當View帶有滑動嵌套情況時,必須要處理好滑動沖突,否則會嚴重影響View的顯示效果。

4. 具體實例

接下來,我將用自定義View中最常用的繼承View來說明自定義View的具體應用和需要注意的點

4.1 繼承VIew的介紹

Paste_Image.png

在下面的例子中,我將講解:

如何實現一個基本的自定義View(繼承VIew)

如何自身支持wrap_content & padding屬性

如何為自定義View提供自定義屬性(如顏色等等)

實例說明:畫一個實心圓

4.2 具體步驟

創建自定義View類(繼承View類)

布局文件添加自定義View組件

注意點設置(支持wrap_content & padding屬性自定義屬性等等)

下面我將逐個步驟進行說明:

步驟1:創建自定義View類(繼承View類)

CircleView.java

// 用于繪制自定義View的具體內容// 具體繪制是在復寫的onDraw()內實現publicclassCircleViewextendsView{// 設置畫筆變量Paint mPaint1;// 自定義View有四個構造函數// 如果View是在Java代碼里面new的,則調用第一個構造函數publicCircleView(Context context){super(context);// 在構造函數里初始化畫筆的操作init();? ? }// 如果View是在.xml里聲明的,則調用第二個構造函數// 自定義屬性是從AttributeSet參數傳進來的publicCircleView(Context context,AttributeSet attrs){super(context, attrs);? ? ? ? init();? ? }// 不會自動調用// 一般是在第二個構造函數里主動調用// 如View有style屬性時publicCircleView(Context context,AttributeSet attrs,intdefStyleAttr ){super(context, attrs,defStyleAttr);? ? ? ? init();? ? }//API21之后才使用// 不會自動調用// 一般是在第二個構造函數里主動調用// 如View有style屬性時publicCircleView(Context context, AttributeSet attrs,intdefStyleAttr,intdefStyleRes){super(context, attrs, defStyleAttr, defStyleRes);? ? }// 畫筆初始化privatevoidinit(){// 創建畫筆mPaint1 =newPaint ();// 設置畫筆顏色為藍色mPaint1.setColor(Color.BLUE);// 設置畫筆寬度為10pxmPaint1.setStrokeWidth(5f);//設置畫筆模式為填充mPaint1.setStyle(Paint.Style.FILL);? ? }// 復寫onDraw()進行繪制? @OverrideprotectedvoidonDraw(Canvas canvas){super.onDraw(canvas);// 獲取控件的高度和寬度intwidth = getWidth();intheight = getHeight();// 設置圓的半徑 = 寬,高最小值的2分之1intr = Math.min(width, height)/2;// 畫出圓(藍色)// 圓心 = 控件的中央,半徑 = 寬,高最小值的2分之1canvas.drawCircle(width/2,height/2,r,mPaint1);? ? }}

特別注意:

View的構造函數一共有4個,具體使用請看:深入理解View的構造函數

理解View的構造函數

對于繪制內容為何在復寫onDraw()里實現,具體請看我寫的文章:自定義View Draw過程- 最易懂的自定義View原理系列(4)

步驟2:在布局文件中添加自定義View類的組件

activity_main.xml

步驟3:在MainActivity類設置顯示

MainActivity.java

publicclassMainActivityextendsAppCompatActivity{@OverrideprotectedvoidonCreate(Bundle savedInstanceState){super.onCreate(savedInstanceState);? ? ? ? setContentView(R.layout.activity_main);? ? }}

效果圖

好了,至此,一個基本的自定義View已經實現了。接下來繼續看自定義View所有應該注意的點:

如何手動支持wrap_content屬性

如何手動支持padding屬性

如何為自定義View提供自定義屬性(如顏色等等)

a. 手動支持wrap_content屬性

先來看wrap_content & match_parent屬性的區別

// 視圖的寬和高被設定成剛好適應視圖內容的最小尺寸android:layout_width="wrap_content"http:// 視圖的寬和高延伸至充滿整個父布局android:layout_width="match_parent"http:// 在Android API 8之前叫作"fill_parent"

如果不手動設置支持wrap_content屬性,那么wrap_content屬性是不會生效(顯示效果同match_parent)

具體原因 & 解決方案請看我寫的文章:為什么你的自定義View wrap_content不起作用?

b. 支持padding屬性

padding屬性:用于設置控件內容相對控件邊緣的邊距;

區別與margin屬性(同樣稱為:邊距):控件邊緣相對父控件的邊距(父控件控制),具體區別如下:

Paste_Image.png

如果不手動設置支持padding屬性,那么padding屬性在自定義View中是不會生效的。

解決方案

繪制時考慮傳入的padding屬性值(四個方向)。

在自定義View類的復寫onDraw()進行設置

CircleView.java

// 僅看復寫的onDraw()@OverrideprotectedvoidonDraw(Canvas canvas){super.onDraw(canvas);// 獲取傳入的padding值finalintpaddingLeft = getPaddingLeft();finalintpaddingRight = getPaddingRight();finalintpaddingTop = getPaddingTop();finalintpaddingBottom = getPaddingBottom();// 獲取繪制內容的高度和寬度(考慮了四個方向的padding值)intwidth = getWidth() - paddingLeft - paddingRight ;intheight = getHeight() - paddingTop - paddingBottom ;// 設置圓的半徑 = 寬,高最小值的2分之1intr = Math.min(width, height)/2;// 畫出圓(藍色)// 圓心 = 控件的中央,半徑 = 寬,高最小值的2分之1canvas.drawCircle(paddingLeft+width/2,paddingTop+height/2,r,mPaint1);? ? }

效果圖

c. 提供自定義屬性

系統自帶屬性,如

// 基本是以android開頭android:layout_width="match_parent"android:layout_height="match_parent"android:background="#000000"android:padding="30dp"

但有些時候需要一些系統所沒有的屬性,稱為自定義屬性

使用步驟有如下:

在values目錄下創建自定義屬性的xml文件

在自定義View的構造方法中解析自定義屬性的值

在布局文件中使用自定義屬性

下面我將對每個步驟進行具體介紹

步驟1:在values目錄下創建自定義屬性的xml文件

attrs_circle_view.xml

對于自定義屬性類型 & 格式如下:

<--1.reference:使用某一資源ID-->// 使用格式? // 1. Java代碼? private int ResID;? private Drawable ResDraw;? ResID = typedArray.getResourceId(R.styleable.SuperEditText_background, R.drawable.background); // 獲得資源ID? ResDraw = getResources().getDrawable(ResID); // 獲得Drawble對象? // 2. xml代碼<--2.color:顏色值-->// 格式使用<--3.boolean:布爾值-->// 格式使用<--4.dimension:尺寸值-->// 格式使用:<--5.float:浮點值-->// 格式使用<--6.integer:整型值-->// 格式使用<--7.string:字符串-->// 格式使用<--8.fraction:百分數-->// 格式使用<--9.enum:枚舉值-->// 格式使用<--10.flag:位或運算-->、// 使用<--特別注意:屬性定義時可以指定多種類型值-->// 使用

步驟2:在自定義View的構造方法中解析自定義屬性的值

此處是需要解析circle_color屬性的值

// 該構造函數需要重寫publicCircleView(Context context, AttributeSet attrs){this(context, attrs,0);// 原來是:super(context,attrs);init();publicCircleView(Context context, AttributeSet attrs,intdefStyleAttr){super(context, attrs, defStyleAttr);// 加載自定義屬性集合CircleViewTypedArray a = context.obtainStyledAttributes(attrs,R.styleable.CircleView);// 解析集合中的屬性circle_color屬性// 該屬性的id為:R.styleable.CircleView_circle_color// 將解析的屬性傳入到畫圓的畫筆顏色變量當中(本質上是自定義畫圓畫筆的顏色)// 第二個參數是默認設置顏色(即無指定circle_color情況下使用)mColor = a.getColor(R.styleable.CircleView_circle_color,Color.RED);// 解析后釋放資源a.recycle();? ? ? ? init();

步驟3:在布局文件中使用自定義屬性

activity_main.xml

xmlns:app="http://schemas.android.com/apk/res-auto"? ? xmlns:tools="http://schemas.android.com/tools"? ? android:layout_width="match_parent"? ? android:layout_height="match_parent"? ? tools:context="scut.carson_ho.diy_view.MainActivity"? ? >app:circle_color="#FF4081"? ? ? ? />

Paste_Image.png

至此,一個較為規范的自定義View已經完成了。

完整代碼下載

Carson_Ho的github:自定義View的具體應用

5. 總結

本文對自定義View的具體應用和注意點進行了全面分析

如果希望繼續了解自定義View的原理,請參考我寫的文章:

(1)自定義View基礎 - 最易懂的自定義View原理系列

(2)自定義View Measure過程 - 最易懂的自定義View原理系列

(3)自定義View Layout過程 - 最易懂的自定義View原理系列

(4)自定義View Draw過程- 最易懂的自定義View原理系列

Android事件分發機制詳解:史上最全面、最易懂

Canvas類的最全面詳解 - 自定義View應用系列

Path類的最全面詳解 - 自定義View應用系列

作者:Carson_Ho

鏈接:http://www.lxweimin.com/p/e9d8420b1b9c

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 【Android 自定義View】 [TOC] 自定義View基礎 接觸到一個類,你不太了解他,如果貿然翻閱源碼只...
    Rtia閱讀 3,986評論 1 14
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,264評論 25 708
  • 自定義View的有好幾種分類,可以分成4種:1.特定的View的子類:Android的API已經為我們提供了不少可...
    StChris閱讀 934評論 0 7
  • 通過前面的《View的事件體系》以及《View的工作原理》,對于自定義View已經有了比較充分的了解,接下來就可以...
    聽媽媽的話閱讀 303評論 0 1
  • 可能因芒果粉的緣故,對長沙格外有親近感。當水藍兒說她來自長沙時,距離一下就把我們拉近了。于是我們的交流就從芒果臺的...
    補拙莫如勤LV閱讀 279評論 2 3