前言
- 自定義View是Android開發(fā)者必須了解的基礎(chǔ)
- 今天，我將手把手教你寫一個自定義View，并理清自定義View所有應(yīng)該的注意點
Carson帶你學(xué)Android自定義View文章系列：
Carson帶你學(xué)Android：自定義View基礎(chǔ)
Carson帶你學(xué)Android：一文梳理自定義View工作流程
Carson帶你學(xué)Android：自定義View繪制準(zhǔn)備-DecorView創(chuàng)建
Carson帶你學(xué)Android：自定義View Measure過程
Carson帶你學(xué)Android：自定義View Layout過程
Carson帶你學(xué)Android：自定義View Draw過程
Carson帶你學(xué)Android：手把手教你寫一個完整的自定義View
Carson帶你學(xué)Android：Canvas類全面解析
Carson帶你學(xué)Android：Path類全面解析
目錄
示意圖
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 多線程應(yīng)直接使用post方式
View的內(nèi)部本身提供了post系列的方法，完全可以替代Handler的作用，使用起來更加方便、直接。
3.3 避免內(nèi)存泄露
主要針對View中含有線程或動畫的情況：當(dāng)View退出或不可見時，記得及時停止該View包含的線程和動畫，否則會造成內(nèi)存泄露問題。
啟動或停止線程/ 動畫的方式：
- 啟動線程/ 動畫：使用
view.onAttachedToWindow（），因為該方法調(diào)用的時機是當(dāng)包含View的Activity啟動的時刻- 停止線程/ 動畫：使用
view.onDetachedFromWindow（），因為該方法調(diào)用的時機是當(dāng)包含View的Activity退出或當(dāng)前View被remove的時刻
3.4 處理好滑動沖突
當(dāng)View帶有滑動嵌套情況時，必須要處理好滑動沖突，否則會嚴(yán)重影響View的顯示效果。
4. 具體實例
接下來，我將用自定義View中最常用的繼承View來說明自定義View的具體應(yīng)用和需要注意的點
4.1 繼承VIew的介紹
Paste_Image.png
在下面的例子中，我將講解：
- 如何實現(xiàn)一個基本的自定義View（繼承VIew）
- 如何自身支持wrap_content & padding屬性
- 如何為自定義View提供自定義屬性（如顏色等等）
- 實例說明：畫一個實心圓
4.2 具體步驟
- 創(chuàng)建自定義View類（繼承View類）
- 布局文件添加自定義View組件及顯示
- 注意點設(shè)置（支持wrap_content & padding屬性自定義屬性等等）
下面我將逐個步驟進行說明：
步驟1：創(chuàng)建自定義View類（繼承View類）
/**
* CircleView.java
* 作用：繪制自定義View的具體內(nèi)容
* 需復(fù)寫方法：onDraw()
* 復(fù)寫邏輯：具體繪制邏輯
*/
public class CircleView extends View {
// 設(shè)置畫筆變量
Paint mPaint1;
// 自定義View有四個構(gòu)造函數(shù)
// 如果View是在Java代碼里面new的，則調(diào)用第一個構(gòu)造函數(shù)
public CircleView(Context context){
super(context);
// 在構(gòu)造函數(shù)里初始化畫筆的操作
init();
}
// 如果View是在.xml里聲明的，則調(diào)用第二個構(gòu)造函數(shù)
// 自定義屬性是從AttributeSet參數(shù)傳進來的
public CircleView(Context context,AttributeSet attrs){
super(context, attrs);
init();
}
// 不會自動調(diào)用
// 一般是在第二個構(gòu)造函數(shù)里主動調(diào)用
// 如View有style屬性時
public CircleView(Context context,AttributeSet attrs,int defStyleAttr ){
super(context, attrs,defStyleAttr);
init();
}
// API21之后才使用
// 不會自動調(diào)用
// 一般是在第二個構(gòu)造函數(shù)里主動調(diào)用
// 如View有style屬性時
public CircleView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
}
// 畫筆初始化
private void init() {
// 創(chuàng)建畫筆
mPaint1 = new Paint ();
// 設(shè)置畫筆顏色為藍色
mPaint1.setColor(Color.BLUE);
// 設(shè)置畫筆寬度為10px
mPaint1.setStrokeWidth(5f);
//設(shè)置畫筆模式為填充
mPaint1.setStyle(Paint.Style.FILL);
}
// 關(guān)鍵點：復(fù)寫onDraw()進行繪制
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
// 獲取控件的高度和寬度
int width = getWidth();
int height = getHeight();
// 設(shè)置圓的半徑 = 寬,高最小值的2分之1
int r = Math.min(width, height)/2;
// 畫出圓（藍色）
// 圓心 = 控件的中央,半徑 = 寬,高最小值的2分之1
canvas.drawCircle(width/2,height/2,r,mPaint1);
}
}
特別注意：
- View的構(gòu)造函數(shù)一共有4個，具體使用請看：深入理解View的構(gòu)造函數(shù)和
理解View的構(gòu)造函數(shù) - 對于繪制內(nèi)容為何在復(fù)寫onDraw()里實現(xiàn)，具體請看我寫的文章：自定義View Draw過程- 最易懂的自定義View原理系列（4）
步驟2：在布局文件中添加自定義View類的組件及顯示
/**
* 1. 在布局文件中添加自定義View類的組件
* activity_main.xml
*/
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
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">
<!-- 注意添加自定義View組件的標(biāo)簽名：包名 + 自定義View類名-->
<!-- 控件背景設(shè)置為黑色-->
<scut.carson_ho.diy_view.CircleView
android:layout_width="match_parent"
android:layout_height="150dp"
android:background="#000000"
</RelativeLayout>
/**
* 2. 設(shè)置顯示
* MainActivity.java
*/
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
}
至此，一個基本的自定義View已經(jīng)實現(xiàn)了，運行效果如下圖。
效果圖
步驟3：注意點設(shè)置（支持wrap_content & padding屬性自定義屬性等等）
接下來繼續(xù)看自定義View關(guān)于屬性自定義的問題：
- 如何手動支持wrap_content屬性
- 如何手動支持padding屬性
- 如何為自定義View提供自定義屬性（如顏色等等）
a. 手動支持wrap_content屬性
先來看wrap_content & match_parent屬性的區(qū)別
// 視圖的寬和高被設(shè)定成剛好適應(yīng)視圖內(nèi)容的最小尺寸
android:layout_width="wrap_content"
// 視圖的寬和高延伸至充滿整個父布局
android:layout_width="match_parent"
// 在Android API 8之前叫作"fill_parent"
如果不手動設(shè)置支持wrap_content屬性，那么wrap_content屬性是不會生效（顯示效果同match_parent）
具體原因 & 解決方案請看我寫的文章：為什么你的自定義View wrap_content不起作用？
b. 支持padding屬性
padding屬性：用于設(shè)置控件內(nèi)容相對控件邊緣的邊距；
區(qū)別與margin屬性（同樣稱為：邊距）：控件邊緣相對父控件的邊距（父控件控制），具體區(qū)別如下：
Paste_Image.png
如果不手動設(shè)置支持padding屬性，那么padding屬性在自定義View中是不會生效的。
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
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">
<scut.carson_ho.diy_view.CircleView
android:layout_width="match_parent"
android:layout_height="match_parent"
/** 添加Padding屬性，但不會生效 **/
android:padding="20dp"
/>
</RelativeLayout>
解決方案
繪制時考慮傳入的padding屬性值（四個方向）。
在自定義View類的復(fù)寫onDraw（）進行設(shè)置
/**
* 復(fù)寫的onDraw()
*/
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
// 獲取傳入的padding值
final int paddingLeft = getPaddingLeft();
final int paddingRight = getPaddingRight();
final int paddingTop = getPaddingTop();
final int paddingBottom = getPaddingBottom();
// 獲取繪制內(nèi)容的高度和寬度（考慮了四個方向的padding值）
int width = getWidth() - paddingLeft - paddingRight ;
int height = getHeight() - paddingTop - paddingBottom ;
// 設(shè)置圓的半徑 = 寬,高最小值的2分之1
int r = Math.min(width, height)/2;
// 畫出圓(藍色)
// 圓心 = 控件的中央,半徑 = 寬,高最小值的2分之1
canvas.drawCircle(paddingLeft+width/2,paddingTop+height/2,r,mPaint1);
}
效果圖
c. 提供自定義屬性
除了常見的以android:開頭的系統(tǒng)屬性(如下所示)，很多場景下自定義View還需要系統(tǒng)所沒有的屬性，即自定義屬性。
// 基本是以android開頭
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000000"
android:padding="30dp"
實現(xiàn)自定義屬性的步驟如下：
- 在values目錄下創(chuàng)建自定義屬性的xml文件
- 在自定義View的構(gòu)造方法中解析自定義屬性的值
- 在布局文件中使用自定義屬性
下面我將對每個步驟進行具體介紹
步驟1：在values目錄下創(chuàng)建自定義屬性的xml文件
/**
* attrs_circle_view.xml
*/
<?xml version="1.0" encoding="utf-8"?>
<resources>
// 自定義屬性集合:CircleView
// 在該集合下,設(shè)置不同的自定義屬性
<declare-styleable name="CircleView">
// 在attr標(biāo)簽下設(shè)置需要的自定義屬性
// 此處定義了一個設(shè)置圖形的顏色:circle_color屬性,格式是color,代表顏色
// 格式有很多種,如資源id(reference)等等
<attr name="circle_color" format="color"/>
</declare-styleable>
</resources>
對于自定義屬性類型 & 格式如下：
<-- 1. reference：使用某一資源ID -->
<declare-styleable name="名稱">
<attr name="background" format="reference" />
</declare-styleable>
// 使用格式
// 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代碼
<ImageView
android:layout_width="42dip"
android:layout_height="42dip"
app:background="@drawable/圖片ID" />
<-- 2. color：顏色值 -->
<declare-styleable name="名稱">
<attr name="textColor" format="color" />
</declare-styleable>
// 格式使用
<TextView
android:layout_width="42dip"
android:layout_height="42dip"
android:textColor="#00FF00" />
<-- 3. boolean：布爾值 -->
<declare-styleable name="名稱">
<attr name="focusable" format="boolean" />
</declare-styleable>
// 格式使用
<Button
android:layout_width="42dip"
android:layout_height="42dip"
android:focusable="true" />
<-- 4. dimension：尺寸值 -->
<declare-styleable name="名稱">
<attr name="layout_width" format="dimension" />
</declare-styleable>
// 格式使用：
<Button
android:layout_width="42dip"
android:layout_height="42dip" />
<-- 5. float：浮點值 -->
<declare-styleable name="AlphaAnimation">
<attr name="fromAlpha" format="float" />
<attr name="toAlpha" format="float" />
</declare-styleable>
// 格式使用
<alpha
android:fromAlpha="1.0"
android:toAlpha="0.7" />
<-- 6. integer：整型值 -->
<declare-styleable name="AnimatedRotateDrawable">
<attr name="frameDuration" format="integer" />
<attr name="framesCount" format="integer" />
</declare-styleable>
// 格式使用
<animated-rotate
xmlns:android="http://schemas.android.com/apk/res/android"
android:frameDuration="100"
android:framesCount="12"
/>
<-- 7. string：字符串 -->
<declare-styleable name="MapView">
<attr name="apiKey" format="string" />
</declare-styleable>
// 格式使用
<com.google.android.maps.MapView
android:apiKey="0jOkQ80oD1JL9C6HAja99uGXCRiS2CGjKO_bc_g" />
<-- 8. fraction：百分?jǐn)?shù) -->
<declare-styleable name="RotateDrawable">
<attr name="pivotX" format="fraction" />
<attr name="pivotY" format="fraction" />
</declare-styleable>
// 格式使用
<rotate
xmlns:android="http://schemas.android.com/apk/res/android"
android:pivotX="200%"
android:pivotY="300%"
/>
<-- 9. enum：枚舉值 -->
<declare-styleable name="名稱">
<attr name="orientation">
<enum name="horizontal" value="0" />
<enum name="vertical" value="1" />
</attr>
</declare-styleable>
// 格式使用
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>
<-- 10. flag：位或運算 -->
<declare-styleable name="名稱">
<attr name="windowSoftInputMode">
<flag name="stateUnspecified" value="0" />
<flag name="stateUnchanged" value="1" />
<flag name="stateHidden" value="2" />
<flag name="stateAlwaysHidden" value="3" />
<flag name="stateVisible" value="4" />
<flag name="stateAlwaysVisible" value="5" />
<flag name="adjustUnspecified" value="0x00" />
<flag name="adjustResize" value="0x10" />
<flag name="adjustPan" value="0x20" />
<flag name="adjustNothing" value="0x30" />
</attr>
</declare-styleable>、
// 使用
<activity
android:name=".StyleAndThemeActivity"
android:label="@string/app_name"
android:windowSoftInputMode="stateUnspecified | stateUnchanged | stateHidden" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<-- 特別注意：屬性定義時可以指定多種類型值 -->
<declare-styleable name="名稱">
<attr name="background" format="reference|color" />
</declare-styleable>
// 使用
<ImageView
android:layout_width="42dip"
android:layout_height="42dip"
android:background="@drawable/圖片ID|#00FF00" />
步驟2：在自定義View的構(gòu)造方法中解析自定義屬性的值
/**
* 此處是需要解析circle_color屬性的值
* 該構(gòu)造函數(shù)需要重寫
*/
public CircleView(Context context, AttributeSet attrs) {
this(context, attrs,0);
// 原來是：super(context,attrs);
init();
public CircleView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
// 加載自定義屬性集合CircleView
TypedArray a = context.obtainStyledAttributes(attrs,R.styleable.CircleView);
// 解析集合中的屬性circle_color屬性
// 該屬性的id為:R.styleable.CircleView_circle_color
// 將解析的屬性傳入到畫圓的畫筆顏色變量當(dāng)中（本質(zhì)上是自定義畫圓畫筆的顏色）
// 第二個參數(shù)是默認(rèn)設(shè)置顏色（即無指定circle_color情況下使用）
mColor = a.getColor(R.styleable.CircleView_circle_color,Color.RED);
// 解析后釋放資源
a.recycle();
init();
}
步驟3：在布局文件中使用自定義屬性
/**
* activity_main.xml
*/
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
<!--必須添加schemas聲明才能使用自定義屬性-->
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"
>
<!-- 注意添加自定義View組件的標(biāo)簽名：包名 + 自定義View類名-->
<!-- 控件背景設(shè)置為黑色-->
<scut.carson_ho.diy_view.CircleView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#000000"
android:padding="30dp"
<!--設(shè)置自定義顏色-->
app:circle_color="#FF4081"
/>
</RelativeLayout>
Paste_Image.png
至此，一個較為規(guī)范的自定義View已經(jīng)完成了。
完整代碼下載
Carson_Ho的github：自定義View的具體應(yīng)用
5. 總結(jié)
- 本文對自定義View的具體應(yīng)用和注意點進行了全面分析
- Carson帶你學(xué)Android自定義View文章系列：
Carson帶你學(xué)Android：自定義View基礎(chǔ)
Carson帶你學(xué)Android：一文梳理自定義View工作流程
Carson帶你學(xué)Android：自定義View繪制準(zhǔn)備-DecorView創(chuàng)建
Carson帶你學(xué)Android：自定義View Measure過程
Carson帶你學(xué)Android：自定義View Layout過程
Carson帶你學(xué)Android：自定義View Draw過程
Carson帶你學(xué)Android：手把手教你寫一個完整的自定義View
Carson帶你學(xué)Android：Canvas類全面解析
Carson帶你學(xué)Android：Path類全面解析
歡迎關(guān)注Carson_Ho的簡書
不定期分享關(guān)于安卓開發(fā)的干貨，追求短、平、快，但卻不缺深度。
