手把手教你寫一個完整的自定義View

Mar1902 7年前發布 | 7K 次閱讀安卓開發 Android開發移動開發

前言

自定義View是Android開發者必須了解的基礎
今天，我將手把手教你寫一個自定義View，并理清自定義View所有應該的注意點

1. 自定義View的分類

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

2. 具體介紹 & 使用場景

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

3. 使用注意點

在使用自定義View時有很多注意點（坑），希望大家要非常留意：

3.1 支持特殊屬性

支持wrap_content

如果不在 onMeasure（）中對 wrap_content 作特殊處理，那么 wrap_content 屬性將失效
支持padding & margin
1. 對于繼承View的控件，padding是在draw()中處理
2. 對于繼承ViewGroup的控件，padding和margin會直接影響measure和layout過程
如果不支持，那么 padding 和 margin （ViewGroup情況）的屬性將失效

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

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

3.3 避免內存泄露

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

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

1. 啟動線程/ 動畫：使用 view.onAttachedToWindow（），因為該方法調用的時機是當包含View的Activity啟動的時刻

2. 停止線程/ 動畫：使用 view.onDetachedFromWindow（），因為該方法調用的時機是當包含View的Activity退出或當前View被remove的時刻

3.4 處理好滑動沖突

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

4. 具體實例

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

4.1 繼承VIew的介紹

在下面的例子中，我將講解：

如何實現一個基本的自定義View（繼承VIew）
如何自身支持wrap_content & padding屬性
如何為自定義View提供自定義屬性（如顏色等等）
實例說明：畫一個實心圓

4.2 具體步驟

創建自定義View類（繼承View類）
布局文件添加自定義View組件
注意點設置（支持wrap_content & padding屬性自定義屬性等等）

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

步驟1：創建自定義View類（繼承View類）

CircleView.java

// 用于繪制自定義View的具體內容
// 具體繪制是在復寫的onDraw（）內實現
public class CircleView extends View {

// 設置畫筆變量
Paint mPaint1;

// 自定義View有四個構造函數
// 如果View是在Java代碼里面new的，則調用第一個構造函數
public CircleView(Context context){
    super(context);

    // 在構造函數里初始化畫筆的操作
    init();
}



// 如果View是在.xml里聲明的，則調用第二個構造函數
// 自定義屬性是從AttributeSet參數傳進來的
    public CircleView(Context context,AttributeSet attrs){
        super(context, attrs);
        init();

}


// 不會自動調用
// 一般是在第二個構造函數里主動調用
// 如View有style屬性時
    public CircleView(Context context,AttributeSet attrs,int defStyleAttr ){
        super(context, attrs,defStyleAttr);
        init();
    }

//API21之后才使用
// 不會自動調用
// 一般是在第二個構造函數里主動調用
// 如View有style屬性時
public  CircleView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
    super(context, attrs, defStyleAttr, defStyleRes);
}

// 畫筆初始化
private void init() {

    // 創建畫筆
    mPaint1 = new Paint ();
    // 設置畫筆顏色為藍色
    mPaint1.setColor(Color.BLUE);
    // 設置畫筆寬度為10px
    mPaint1.setStrokeWidth(5f);
    //設置畫筆模式為填充
    mPaint1.setStyle(Paint.Style.FILL);

}


// 復寫onDraw()進行繪制  
@Override
protected void onDraw(Canvas canvas) {

    super.onDraw(canvas);

   // 獲取控件的高度和寬度
    int width = getWidth();
    int height = getHeight();

    // 設置圓的半徑 = 寬,高最小值的2分之1
    int r = Math.min(width, height)/2;

    // 畫出圓（藍色）
    // 圓心 = 控件的中央,半徑 = 寬,高最小值的2分之1
    canvas.drawCircle(width/2,height/2,r,mPaint1);

}


}</code></pre> 
  
特別注意： 
  1. View的構造函數一共有4個。 2. 對于繪制內容為何在復寫onDraw()里實現 
  步驟2：在布局文件中添加自定義View類的組件 
  activity_main.xml 
  <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="
<!-- 注意添加自定義View組件的標簽名：包名 + 自定義View類名-->
    <!--  控件背景設置為黑色-->
    <scut.carson_ho.diy_view.CircleView
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:background="#000000"
</RelativeLayout></code></pre> 
  
步驟3：在MainActivity類設置顯示 
  MainActivity.java 
  public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
}

}</code></pre> 
  
 
  好了，至此，一個基本的自定義View已經實現了。接下來繼續看自定義View所有應該注意的點： 
   
   如何手動支持wrap_content屬性 
   如何手動支持padding屬性 
   如何為自定義View提供自定義屬性（如顏色等等） 
   
  a. 手動支持wrap_content屬性 
  先來看wrap_content & match_parent屬性的區別 
  // 視圖的寬和高被設定成剛好適應視圖內容的最小尺寸
android:layout_width="wrap_content"
// 視圖的寬和高延伸至充滿整個父布局
android:layout_width="match_parent"
// 在Android API 8之前叫作"fill_parent"</code></pre> 
  
如果不手動設置支持 wrap_content 屬性，那么 wrap_content 屬性是不會生效（顯示效果同 match_parent ） 
  具體原因 & 解決方案請看我寫的文章： 為什么你的自定義View wrap_content不起作用？ 
  b. 支持padding屬性 
  padding 屬性：用于設置控件內容相對控件邊緣的邊距； 
  區別與margin屬性（同樣稱為：邊距）：控件邊緣相對父控件的邊距（父控件控制），具體區別如下： 
   
  如果不手動設置支持padding屬性，那么padding屬性在自定義View中是不會生效的。 
  <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="

<scut.carson_ho.diy_view.CircleView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    /**  添加Padding屬性，但不會生效 **/
    android:padding="20dp"
     />

</RelativeLayout></code></pre> 
  
解決方案 
  繪制時考慮傳入的padding屬性值（四個方向）。 
  在自定義View類的復寫onDraw（）進行設置 
  CircleView.java 
  // 僅看復寫的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();


    // 獲取繪制內容的高度和寬度（考慮了四個方向的padding值）
    int width = getWidth() - paddingLeft - paddingRight ;
    int height = getHeight() - paddingTop - paddingBottom ;

    // 設置圓的半徑 = 寬,高最小值的2分之1
    int r = Math.min(width, height)/2;

    // 畫出圓(藍色)
    // 圓心 = 控件的中央,半徑 = 寬,高最小值的2分之1
    canvas.drawCircle(paddingLeft+width/2,paddingTop+height/2,r,mPaint1);

}</code></pre> 

 
  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 
  <?xml version="1.0" encoding="utf-8"?>
<resources>
    <!--自定義屬性集合:CircleView-->
    <!--在該集合下,設置不同的自定義屬性-->
    <declare-styleable name="CircleView">
        <!--在attr標簽下設置需要的自定義屬性-->
        <!--此處定義了一個設置圖形的顏色: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>
// 使用格式
<ImageView
    android:layout_width="42dip"
    android:layout_height="42dip"
    android: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：百分數 -->
<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的構造方法中解析自定義屬性的值 
  此處是需要解析circle_color屬性的值 
  // 該構造函數需要重寫
  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
        // 將解析的屬性傳入到畫圓的畫筆顏色變量當中（本質上是自定義畫圓畫筆的顏色）
        // 第二個參數是默認設置顏色（即無指定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組件的標簽名：包名 + 自定義View類名-->
    <!--  控件背景設置為黑色-->
    <scut.carson_ho.diy_view.CircleView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:background="#000000"
        android:padding="30dp"

    <!--設置自定義顏色-->
        app:circle_color="#FF4081"
         />
</RelativeLayout> 
   
  至此，一個較為規范的自定義View已經完成了。 
  5. 總結 
   
   本文對自定義View的具體應用和注意點進行了全面分析 
   
    
    
  來自：http://blog.csdn.net/carson_ho/article/details/62037696


                    
                         本文由用戶 Mar1902 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
                         轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
                         本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！
                         本文地址：http://www.baiduhome.net/lib/view/open1489549058594.html
                         安卓開發 Android開發 移動開發

手把手教你寫一個完整的自定義View

前言

目錄

1. 自定義View的分類

2. 具體介紹 & 使用場景

3. 使用注意點

3.1 支持特殊屬性

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

3.3 避免內存泄露

3.4 處理好滑動沖突

4. 具體實例

4.1 繼承VIew的介紹

4.2 具體步驟

a. 手動支持wrap_content屬性

b. 支持padding屬性

解決方案

c. 提供自定義屬性

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

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

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

5. 總結

相關經驗

相關資訊

相關文檔

目錄