Android中如何自定義控件

Android開(kāi)發(fā)中難免遇到需要自定義控件的需求，有些是產(chǎn)品的要求在Android標(biāo)準(zhǔn)控件庫(kù)中沒(méi)有滿足要求的，有些是開(kāi)發(fā)過(guò)程中沒(méi)有代碼的可復(fù)用，自己定義的。 一個(gè)好的自定義控件應(yīng)當(dāng)和Android本身提供的控件一樣，封裝了一系列的功能以供開(kāi)發(fā)者使用，不僅具有完備的功能，也需要高效的使用內(nèi)存和CPU。Android本身提供了一些指標(biāo)：

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

Android已經(jīng)提供了一系列基礎(chǔ)控件和xml屬性來(lái)幫助你創(chuàng)建自定義控件。

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

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

2. 自定義屬性
一個(gè)完美的自定義控件也可以添加xml來(lái)配置屬性和風(fēng)格。 要實(shí)現(xiàn)這一點(diǎn)，可按照下列步驟來(lái)做：
1） 添加自定義屬性<declare-styleable>到xml文件中
2） 在xml的<declare-styleable>中，指定屬性的值
3） 在view中獲取xml中的值
4） 將獲取的值應(yīng)用到view中
下面繼續(xù)舉例說(shuō)明：添加<declare-styleable> 到你的程序中，習(xí)慣上一般是放在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>

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

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

<?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>

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

3） 應(yīng)用自定義的屬性值
當(dāng)View被創(chuàng)建的時(shí)候，可以通過(guò)AttributeSet讀取所有的定義在xml中的屬性，在構(gòu)造函數(shù)中通過(guò)obtainStyledAttributes讀取attrs，該方法會(huì)返回一個(gè)TypeArray數(shù)組。通過(guò)TypeArray可以讀取到已經(jīng)定義在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(); 
     } 
}

需要強(qiáng)調(diào)的是， TypeArray使用完畢后需要銷毀，不然會(huì)發(fā)生內(nèi)存泄露。

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

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

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

**實(shí)例展示：
**

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
 // 拿到布局文件中的數(shù)據(jù)
       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();
 // 讓這個(gè)可點(diǎn)擊
 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);
 }

 // 提供外面設(shè)置，是否被選擇
 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>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,062評(píng)論 25贊 709
  • 6、View的繪制 （1）當(dāng)測(cè)量好一個(gè)View之后，我們就可以簡(jiǎn)單的重寫 onDraw（）方法，并在 Canvas...
    b5e7a6386c84閱讀 1,980評(píng)論 0贊 3
  • 早起打開(kāi)微信，發(fā)現(xiàn)兩個(gè)朋友已經(jīng)上傳了昨天她們手抄的一首詩(shī)，又讓我感慨萬(wàn)千，本來(lái)，從詩(shī)詞大會(huì)開(kāi)始，本子上就計(jì)劃了，每...
    無(wú)限媽媽閱讀 199評(píng)論 1贊 1
  • 今天很不想寫作業(yè)，想利用還沒(méi)用過(guò)的兩次不寫機(jī)會(huì)的，但臨睡覺(jué)前想到一件值得寫的事兒，寫吧。 下班后跟同事32一起出公...
    風(fēng)飄啊飄閱讀 196評(píng)論 0贊 0
  • 思量舊事，天氣正清秋。 尚記得，并肩游。 黑山夕陽(yáng)映遠(yuǎn)樹(shù)， 溫泊月色籠小樓。 幾番行，幾番醉，幾番留。 憑誰(shuí)料，龍...
    秋雨霜荷閱讀 314評(píng)論 5贊 4

友情鏈接更多精彩內(nèi)容