Android中如何自定義控件

Android開發中難免遇到需要自定義控件的需求，有些是產品的要求在Android標準控件庫中沒有滿足要求的，有些是開發過程中沒有代碼的可復用，自己定義的。 一個好的自定義控件應當和Android本身提供的控件一樣，封裝了一系列的功能以供開發者使用，不僅具有完備的功能，也需要高效的使用內存和CPU。Android本身提供了一些指標：

  1. 應當遵守Android標準的規范(命名，可配置，事件處理等)。
  2. 在XML布局中科配置控件的屬性。
  3. 對交互應當有合適的反饋，比如按下，點擊等。
  4. 具有兼容性， Android版本很多，應該具有廣泛的適用性。

Android已經提供了一系列基礎控件和xml屬性來幫助你創建自定義控件。

1. View的子類
View在Android是最基礎的幾個控件之一， 所有的控件均繼承自View，你也可以直接繼承View也可以繼承其他的控件比如ImageView、LinearLayout等。
當然，你至少需要提供一個構造函數，其中Context和AttributeSet作為參數。 舉例如下：

 class PieChart extends View { 
       public PieChart(Context context, AttributeSet attrs) { 
            super(context, attrs); 
       } 
}

2. 自定義屬性
一個完美的自定義控件也可以添加xml來配置屬性和風格。 要實現這一點，可按照下列步驟來做：
1） 添加自定義屬性<declare-styleable>到xml文件中
2） 在xml的<declare-styleable>中，指定屬性的值
3） 在view中獲取xml中的值
4） 將獲取的值應用到view中
下面繼續舉例說明：添加<declare-styleable> 到你的程序中，習慣上一般是放在res/values/attrs.xml文件中（可以參考sdk文件下的attrs文件 :sdk\platforms\android-19\data\res\values\attrs.xml
），例如：

<resources> 
 <declare-styleable name="PieChart"> 
 <attr name="showText" format="boolean" /> 
 <attr name="labelPosition" format="enum"> 
 <enum name="left" value="0"/> 
 <enum name="right" value="1"/> 
 </attr> 
 </declare-styleable> 
</resources>

這段代碼聲明了兩個自定義的屬性 showText和labelPosition，他們屬于一個自定義的實體PieChat。

一旦定義好了屬性，就可以在xml中使用這些屬性了，下面是一個簡單的例子：

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
 xmlns:custom="http://schemas.android.com/apk/res/com.example.customviews"> 
 <com.example.customviews.charting.PieChart 
     custom:showText="true" 
     custom:labelPosition="left" /> 
</LinearLayout>

可以看到和標準的Android的組件一樣，唯一的差別在他們屬于不同的命名空間，標準的組件的命名空間一般是 http://schemas.android.com/apk/res/android，
而我們自定義的命名空間是http://schemas.android.com/apk/res/[your package name]。注意到xmlns:custom中的custom了嗎？你可以使用任意的字符，但是要和下面的控件的定義中的字符要保持一致。另外一個需要注意的是， xml中的tag：com.example.customviews.charting.PieChart，需要的完整的包名，如果你的自定義控件是個內部類(好吧，這么奇葩)，也必須給全路徑，假設PieChat有個內部類PieView，如果在XML中引用它，需要這樣使用：com.example.customviews.charting.PieChart$PieView

3） 應用自定義的屬性值
當View被創建的時候，可以通過AttributeSet讀取所有的定義在xml中的屬性，在構造函數中通過obtainStyledAttributes讀取attrs，該方法會返回一個TypeArray數組。通過TypeArray可以讀取到已經定義在XML中的方法。下面的例子展示了讀取上文中的xml屬性值。

public PieChart(Context context, AttributeSet attrs) { 
     super(context, attrs); 
     TypedArray a = context.getTheme().obtainStyledAttributes(
    attrs,R.styleable.PieChart, 0, 0); 
     try { 
         mShowText = a.getBoolean(R.styleable.PieChart_showText, false); 
          mTextPos = a.getInteger(R.styleable.PieChart_labelPosition, 0); 
     } finally { 
         a.recycle(); 
     } 
}

需要強調的是， TypeArray使用完畢后需要銷毀，不然會發生內存泄露。

4） 添加自定義的方法和事件
自定義屬性很強大，但缺點也很明顯，它只能在view初始化的時候被應用到控件中。 為了添加更加靈活的行為， 可以為每一個屬性添加getter和setter對。下面的代碼段展示了PieChat的屬性showText

public boolean isShowText() { 
    return mShowText; 
} 
public void setShowText(boolean showText) { 
    mShowText = showText; 
    invalidate(); 
    requestLayout(); 
}

在setShowText中調用了invalidate()和requestLayout(), 保證了view能及時的更新。在你的自定義View中，如果有屬性被改變并且需要立即生效時，你也必須調用這個方法。 這樣系統會立即重新繪制view。 同樣的，如果view的尺寸或者形狀發生了變化，你也必須調用requestLayout(). 不然會引起很多問題。
一般你也需要添加事件回調來和調用者溝通。 例如PieChat暴露了OnCurrentItemChanged來通知調用者pie chat發生了旋轉。在開發過程中，很容易忘記添加一些屬性和事件，特別是作者是這個自定義View的唯一使用者的時候。為使View有更普遍的適用性，應當花些時間考慮的更加周全。最好是暴露所有的可能改變外觀和行為的屬性。

**實例展示：
**

Paste_Image.png

一、** 自定義屬性： **res/values/attrs.xml文件

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <declare-styleable name="SettingItemView">
     <attr name="des" format="string|reference"></attr>
     <attr name="itemBg" format="string">
        <enum name="first" value="0"></enum>
        <enum name="middle" value="1"></enum>
        <enum name="last" value="2"></enum>
     </attr>
     <attr name="checked" format="boolean"></attr>
     <attr name="isVisiable" format="boolean"></attr>
   </declare-styleable>
</resources>

二、 LinearLayout**的子類 **

public class SettingItemView extends LinearLayout {
   private ImageView mIv;
   private boolean mChecked;
   private boolean mIsVisable;

   public SettingItemView(Context context) {
      super(context);
   }

   public SettingItemView(Context context, AttributeSet attrs, int defStyle) {
      super(context, attrs, defStyle);
   }

   public SettingItemView(Context context, AttributeSet attrs) {// 布局文件
      super(context, attrs);
       View view = View.inflate(context, R.layout.view_setting_item, this);// view_setting_item--View
 // 拿到布局文件中的數據
       TypedArray ta = context.obtainStyledAttributes(attrs,R.styleable.SettingItemView);
       String des = ta.getString(R.styleable.SettingItemView_des);
       int itemBg = ta.getInt(R.styleable.SettingItemView_itemBg, -1);// 獲取枚舉值
         mChecked = ta.getBoolean(R.styleable.SettingItemView_checked, false);
       mIsVisable = ta.getBoolean(R.styleable.SettingItemView_isVisiable,false);
     
     TextView tv = (TextView) view.findViewById(R.id.tv_setting_item_des);
     tv.setText(des);

 switch (itemBg) {
 case 0:
     setBackgroundResource(R.drawable.iv_first_selector);
     break;
 case 1:
     setBackgroundResource(R.drawable.iv_middle_selector);
     break;
 case 2:
     setBackgroundResource(R.drawable.iv_last_selector);
     break;
 default:
     setBackgroundResource(R.drawable.iv_first_selector);
     break;
 }
 mIv = (ImageView) view.findViewById(R.id.iv_setting_item_checked);
 setChecked();
 setVisable();
 // 讓這個可點擊
 setClickable(true);
 // 回收一下
 ta.recycle();
 }

 private void setVisable() {
     mIv.setVisibility(mIsVisable?View.VISIBLE:View.INVISIBLE);
 }

 private void setChecked() {
 // if(mChecked){
 // mIv.setImageResource(R.drawable.on);
 // }else {
 // mIv.setImageResource(R.drawable.off);
 // }
     mIv.setImageResource(mChecked ? R.drawable.on : R.drawable.off);
 }

 // 提供外面設置，是否被選擇
 public void setChecked(boolean isChecked){
     this.mChecked=isChecked;
     // 更新UI
     setChecked();
 }

 public boolean isChecked(){
     return this.mChecked;
 }

 public void toggle(){
     this.mChecked=!this.mChecked;
     // 更新UI
     setChecked();
 }
}

三、item文件
view_setting_item.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:paddingLeft="5dp"
 android:paddingRight="5dp"
 android:paddingTop="10dp"
 android:paddingBottom="10dp" >

 <TextView
 android:id="@+id/tv_setting_item_des"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_centerVertical="true"
 android:text="版本更新" />

 <ImageView
 android:id="@+id/iv_setting_item_checked"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_alignParentRight="true"
 android:layout_centerVertical="true"
 android:src="@drawable/on"  />

</RelativeLayout>

四、布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:custom="http://schemas.android.com/apk/res/com.fanfy"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical" >

 <com.custom.view.SettingItemView
 android:id="@+id/siv_version"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_marginTop="20dp"
 custom:checked="true"
 custom:des="版本更新"
 custom:isVisiable="true"
 custom:itemBg="first" />

 <com.custom.view.SettingItemView
 android:id="@+id/siv_call_sms_safe"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 custom:checked="true"
 custom:des="版本更新"
 customisVisiable="true"
 custom:itemBg="last" />

 <com.custom.view.SettingItemView
 android:id="@+id/siv_address"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_marginTop="10dp"
 custom:checked="false"
 custom:des="版本更新"
 custom:isVisiable="true"
 custom:itemBg="first" />

 <com.custom.view.SettingItemView
 android:id="@+id/siv_style_address"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 custom:checked="true"
 custom:des="版本更新"
 custom:isVisiable="false"
 custom:itemBg="middle" />
 
 <com.custom.view.SettingItemView
 android:id="@+id/siv_style_address"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 custom:checked="true"
 custom:des="版本更新"
 custom:isVisiable="false"
 custom:itemBg="last" />

</LinearLayout>
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,436評論 25贊 708
  • 6、View的繪制 （1）當測量好一個View之后，我們就可以簡單的重寫 onDraw（）方法，并在 Canvas...
    b5e7a6386c84閱讀 1,910評論 0贊 3
  • 早起打開微信，發現兩個朋友已經上傳了昨天她們手抄的一首詩，又讓我感慨萬千，本來，從詩詞大會開始，本子上就計劃了，每...
    無限媽媽閱讀 177評論 1贊 1
  • 今天很不想寫作業，想利用還沒用過的兩次不寫機會的，但臨睡覺前想到一件值得寫的事兒，寫吧。 下班后跟同事32一起出公...
    風飄啊飄閱讀 156評論 0贊 0
  • 思量舊事，天氣正清秋。 尚記得，并肩游。 黑山夕陽映遠樹， 溫泊月色籠小樓。 幾番行，幾番醉，幾番留。 憑誰料，龍...
    秋雨霜荷閱讀 288評論 5贊 4