前言

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

Carson帶你學Android自定義View文章系列：
Carson帶你學Android：自定義View基礎
 Carson帶你學Android：一文梳理自定義View工作流程
 Carson帶你學Android：自定義View繪制準備-DecorView創(chuàng)建
 Carson帶你學Android：自定義View Measure過程
 Carson帶你學Android：自定義View Layout過程
 Carson帶你學Android：自定義View Draw過程
 Carson帶你學Android：手把手教你寫一個完整的自定義View
Carson帶你學Android：Canvas類全面解析
 Carson帶你學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 多線程應直接使用post方式

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

3.3 避免內(nèi)存泄露

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

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

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

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

3.4 處理好滑動沖突

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

4. 具體實例

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

4.1 繼承VIew的介紹

Paste_Image.png

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

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

4.2 具體步驟

創(chuàng)建自定義View類（繼承View類）
布局文件添加自定義View組件及顯示
注意點設置（支持wrap_content & padding屬性自定義屬性等等）

下面我將逐個步驟進行說明：
步驟1：創(chuàng)建自定義View類（繼承View類）

/**
  * CircleView.java
  * 作用：繪制自定義View的具體內(nèi)容
  * 需復寫方法：onDraw()
  * 復寫邏輯：具體繪制邏輯
  */ 
  public class CircleView extends View {

      // 設置畫筆變量
      Paint mPaint1;

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

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


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

      }

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


      // API21之后才使用
      // 不會自動調(diào)用
      // 一般是在第二個構造函數(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 ();
          // 設置畫筆顏色為藍色
          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);
      }
  }

特別注意：

View的構造函數(shù)一共有4個，具體使用請看：深入理解View的構造函數(shù)和
理解View的構造函數(shù)
對于繪制內(nèi)容為何在復寫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組件的標簽名：包名 + 自定義View類名-->
    <!--  控件背景設置為黑色-->
    <scut.carson_ho.diy_view.CircleView
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:background="#000000"
</RelativeLayout>


/**
  * 2. 設置顯示
  * 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：注意點設置（支持wrap_content & padding屬性自定義屬性等等）

接下來繼續(xù)看自定義View關于屬性自定義的問題：

如何手動支持wrap_content屬性
如何手動支持padding屬性
如何為自定義View提供自定義屬性（如顏色等等）

a. 手動支持wrap_content屬性

先來看wrap_content & match_parent屬性的區(qū)別

// 視圖的寬和高被設定成剛好適應視圖內(nèi)容的最小尺寸
android:layout_width="wrap_content"

// 視圖的寬和高延伸至充滿整個父布局
android:layout_width="match_parent"
// 在Android API 8之前叫作"fill_parent"

如果不手動設置支持wrap_content屬性，那么wrap_content屬性是不會生效（顯示效果同match_parent）

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

b. 支持padding屬性

padding屬性：用于設置控件內(nèi)容相對控件邊緣的邊距；

區(qū)別與margin屬性（同樣稱為：邊距）：控件邊緣相對父控件的邊距（父控件控制），具體區(qū)別如下：

Paste_Image.png

如果不手動設置支持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類的復寫onDraw（）進行設置

/**
  * 復寫的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 ;

      // 設置圓的半徑 = 寬,高最小值的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的構造方法中解析自定義屬性的值
在布局文件中使用自定義屬性

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

步驟1：在values目錄下創(chuàng)建自定義屬性的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>
// 使用格式
  // 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：百分數(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的構造方法中解析自定義屬性的值

/**
  * 此處是需要解析circle_color屬性的值
  * 該構造函數(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
          // 將解析的屬性傳入到畫圓的畫筆顏色變量當中（本質(zhì)上是自定義畫圓畫筆的顏色）
          // 第二個參數(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組件的標簽名：包名 + 自定義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>

Paste_Image.png

至此，一個較為規(guī)范的自定義View已經(jīng)完成了。

完整代碼下載

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

5. 總結

本文對自定義View的具體應用和注意點進行了全面分析
Carson帶你學Android自定義View文章系列：
Carson帶你學Android：自定義View基礎
 Carson帶你學Android：一文梳理自定義View工作流程
 Carson帶你學Android：自定義View繪制準備-DecorView創(chuàng)建
 Carson帶你學Android：自定義View Measure過程
 Carson帶你學Android：自定義View Layout過程
 Carson帶你學Android：自定義View Draw過程
 Carson帶你學Android：手把手教你寫一個完整的自定義View
Carson帶你學Android：Canvas類全面解析
 Carson帶你學Android：Path類全面解析

歡迎關注Carson_Ho的簡書

不定期分享關于安卓開發(fā)的干貨，追求短、平、快，但卻不缺深度。

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

Carson帶你學Android：手把手教你寫一個完整的自定義View

Carson帶你學Android：手把手教你寫一個完整的自定義View

前言

目錄

1. 自定義View的分類

2. 具體介紹 & 使用場景

3. 使用注意點

3.1 支持特殊屬性

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

3.3 避免內(nèi)存泄露

3.4 處理好滑動沖突

4. 具體實例

4.1 繼承VIew的介紹

4.2 具體步驟

步驟3：注意點設置（支持wrap_content & padding屬性自定義屬性等等）

a. 手動支持wrap_content屬性

b. 支持padding屬性

解決方案

c. 提供自定義屬性

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

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

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

完整代碼下載

5. 總結

歡迎關注Carson_Ho的簡書

請點贊！因為你的鼓勵是我寫作的最大動力！

推薦閱讀更多精彩內(nèi)容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

Carson帶你學Android：手把手教你寫一個完整的自定義View

前言

目錄

1. 自定義View的分類

2. 具體介紹 & 使用場景

3. 使用注意點

3.1 支持特殊屬性

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

3.3 避免內(nèi)存泄露

3.4 處理好滑動沖突

4. 具體實例

4.1 繼承VIew的介紹

4.2 具體步驟

步驟3：注意點設置（支持wrap_content & padding屬性自定義屬性等等）

a. 手動支持wrap_content屬性

b. 支持padding屬性

解決方案

c. 提供自定義屬性

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

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

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

完整代碼下載

5. 總結

歡迎關注Carson_Ho的簡書

請點贊！因為你的鼓勵是我寫作的最大動力！

推薦閱讀更多精彩內(nèi)容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频