Android組合控件實(shí)現(xiàn)功能強(qiáng)大的自定義控件

更新時(shí)間：2016年05月04日 16:24:50 作者：laozhu1124

這篇文章主要介紹了Android組合控件實(shí)現(xiàn)功能強(qiáng)大的自定義控件的相關(guān)資料,需要的朋友可以參考下

通常情況下，Android實(shí)現(xiàn)自定義控件無(wú)非三種方式。

　?、瘛⒗^承現(xiàn)有控件，對(duì)其控件的功能進(jìn)行拓展。

　　Ⅱ、將現(xiàn)有控件進(jìn)行組合，實(shí)現(xiàn)功能更加強(qiáng)大控件。

　?、?、重寫View實(shí)現(xiàn)全新的控件

　　上文說(shuō)過(guò)了如何繼承現(xiàn)有控件來(lái)自定義控件：《Android繼承現(xiàn)有控件拓展實(shí)現(xiàn)自定義控件textView》，這節(jié)我們來(lái)討論第二個(gè)議題。怎么將控件組合來(lái)實(shí)現(xiàn)一個(gè)功能強(qiáng)大的自定義控件。

　　先看看創(chuàng)建組合控件的好處吧，創(chuàng)建組合控件能夠很好的創(chuàng)建具有組合功能的控件集合。那我們一般又是怎么做的了，一般我們來(lái)繼承一個(gè)合適的ViewGroup，再為他創(chuàng)建一個(gè)新功能，從而就形成了一個(gè)新功能的控件。我們還會(huì)為這種控件指定一些新的屬性，從而使他具有很好擴(kuò)展性了。好了，廢話說(shuō)了這么多，下面，我們就以幾乎每個(gè)app都有的控件——標(biāo)題欄為例，來(lái)介紹組合控件的做法。

　　首先，我來(lái)回答為什么要重用標(biāo)題欄：

　　Ⅰ、使應(yīng)用程序擁有統(tǒng)一的風(fēng)格。

　?、?、重用標(biāo)題欄，也是我們將來(lái)修改標(biāo)題欄非常方便，真正實(shí)現(xiàn)"一次編寫，到處運(yùn)行"的效果，而不用大費(fèi)周章的，每個(gè)頁(yè)面都修改。

　?、?、向調(diào)用者向外暴露調(diào)用接口，從而更加靈活的控制標(biāo)題欄，使其功能更加的強(qiáng)大。

　　那么，標(biāo)題欄長(zhǎng)成那個(gè)樣子，請(qǐng)見(jiàn)下圖：

　　我們，先做一下簡(jiǎn)單的分析一下，這是一個(gè)自定義控件，應(yīng)該像Android的原生控件一樣，能夠方便調(diào)用者設(shè)置控件的屬性。因此，十分有必要為這個(gè)控件設(shè)置一些屬性，為一個(gè)View提供一些自定義屬性十分的簡(jiǎn)單，只需要在res資源目錄下的values目錄下創(chuàng)建一個(gè)attrs.xml屬性文件，并在該文件定義你所需要的屬性即可。這個(gè)自定義控件自定義屬性如下：

 <declare-styleable name="titleBar">
  <attr name="title" format="string" />
  <attr name="titleTextSize" format="dimension" />
  <attr name="titleTextColor" format="color" />
  <attr name="titleLeftText" format="string" />
  <attr name="titleLeftBackground" format="color|reference" />
  <attr name="titleLeftTextColor" format="color" />
  <attr name="titleRightText" format="string" />
  <attr name="titleRightBackground" format="color|reference" />
  <attr name="titleRightTextColor" format="color" />
 </declare-styleable>

　　我們用<declare-styleable>標(biāo)簽聲明要使用的自定義屬性，用name屬性來(lái)確定引用的名稱。用format來(lái)確定引用數(shù)據(jù)的格式。在這個(gè)自定義控件自定義屬性對(duì)應(yīng)列表如下：

　?、?、title——對(duì)應(yīng)標(biāo)題的文字

　　Ⅱ、titleTextSize——對(duì)應(yīng)標(biāo)題的文字大小

　?、蟆itleTextColor——對(duì)應(yīng)標(biāo)題的文本顏色

　?、?、titleLeftText——對(duì)應(yīng)左邊按鈕的文本

　?、?、titleLeftBackground——對(duì)應(yīng)左邊按鈕的背景

　　Ⅵ、titleLeftTextColor——對(duì)應(yīng)左邊按鈕的文字顏色

　?、?、titleRightText——對(duì)應(yīng)右邊按鈕的文本

　?、?、titleRightBackground——對(duì)應(yīng)右邊按鈕的背景

　　Ⅵ、titleRightTextColor——對(duì)應(yīng)右邊按鈕的文字顏色

　　這里，需要指出的是左右按鈕的背景，即可以是顏色類型，也可以對(duì)應(yīng)為相應(yīng)的圖片，所以，我們可以用“|”來(lái)分隔不同的屬性。

　　好了，既然，有了自定義屬性的定義了，我們就需要自定義一個(gè)TitleBar的控件，來(lái)獲取這些定義好的屬性值，上文，我們提到一般組合控件一般繼承與ViewGroup控件，這里，我們方便起見(jiàn)，就繼承與RelativeLayout。怎么獲取屬性值了，系統(tǒng)提供了TypedArray這樣數(shù)據(jù)結(jié)構(gòu)就能十分方便獲取屬性集了，獲取屬性的代碼如下：

private void initAttrs(AttributeSet attrs) {
  TypedArray ta = this.getContext().obtainStyledAttributes(attrs,
    R.styleable.titleBar);
  if (ta != null) {
   title = ta.getString(R.styleable.titleBar_title);
   titleTextSize = ta.getDimension(R.styleable.titleBar_titleTextSize,
     16);
   titleTextColor = ta
     .getColor(R.styleable.titleBar_titleTextColor, 0);
   titleLeftText = ta.getString(R.styleable.titleBar_titleLeftText);
   titleLeftBackground = ta
     .getDrawable(R.styleable.titleBar_titleLeftBackground);
   titleLeftTextColor = ta.getColor(
     R.styleable.titleBar_titleLeftTextColor, 0);
   titleRightText = ta.getString(R.styleable.titleBar_titleRightText);
   titleRightBackground = ta
     .getDrawable(R.styleable.titleBar_titleRightBackground);
   titleRightTextColor = ta.getColor(
     R.styleable.titleBar_titleRightTextColor, 0);
   ta.recycle();
  }
 }

　　這里，需要值得一提的是需要調(diào)用TypedArray的recycle方法將資源回收。

　　既然，我們讓這個(gè)組合控件有了屬性以后，下面，我們要做的是將這個(gè)組合控件的按鈕，文本框有機(jī)組合起來(lái)，組合的代碼如下所示：

 private void initView() {
  leftButton = new Button(getContext());
  titleTextView = new TextView(getContext());
  rightButton = new Button(getContext());

  leftButton.setTextColor(titleLeftTextColor);
  leftButton.setBackgroundDrawable(titleLeftBackground);
  leftButton.setText(titleLeftText);

  rightButton.setTextColor(titleRightTextColor);
  rightButton.setBackgroundDrawable(titleRightBackground);
  rightButton.setText(titleRightText);

  titleTextView.setText(title);
  titleTextView.setTextSize(titleTextSize);
  titleTextView.setTextColor(titleTextColor);

  mLeftLayoutParams = new LayoutParams(LayoutParams.WRAP_CONTENT,
    LayoutParams.MATCH_PARENT);
  mLeftLayoutParams.addRule(RelativeLayout.ALIGN_PARENT_LEFT);
  addView(leftButton, mLeftLayoutParams);

  mCenterLayoutParams = new LayoutParams(LayoutParams.WRAP_CONTENT,
    LayoutParams.MATCH_PARENT);
  mCenterLayoutParams.addRule(RelativeLayout.CENTER_IN_PARENT);
  addView(titleTextView, mCenterLayoutParams);

  mRightLayoutParams = new LayoutParams(LayoutParams.WRAP_CONTENT,
    LayoutParams.MATCH_PARENT);
  mRightLayoutParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT);
  addView(rightButton, mRightLayoutParams);
 }

　　我們看到上文定義一些屬性，無(wú)非復(fù)制給了這些組合控件，使這個(gè)組合控件變得"有血有肉"了。

　　這既然是一個(gè)自定義控件，是一個(gè)UI模版，應(yīng)該每個(gè)調(diào)用者點(diǎn)擊左右按鈕，所實(shí)現(xiàn)的可能都不一樣，我們應(yīng)當(dāng)所做就是向外暴露接口，讓調(diào)用者靈活的控制這兩個(gè)按鈕。那么接口的定義如下：

 public interface ClickListener {
  void Click(int tag);
 }

 private ClickListener listener;

　　在模版方法中，為左、右按鈕增加點(diǎn)擊事件，調(diào)用接口的點(diǎn)擊方法，代碼如下所示：

private void setListener() {
  leftButton.setOnClickListener(this);
  rightButton.setOnClickListener(this);
 }

 @Override
 public void onClick(View v) {
  if (listener != null) {
   if (v == leftButton) {
    listener.Click(LEFT_BUTTON);
   } else if (v == rightButton) {
    listener.Click(RIGHT_BUTTON);
   }
  }

 }

　　在代碼，我們有效判斷是左邊按鈕點(diǎn)擊了，還是右邊按鈕點(diǎn)擊了。　

　　有了這個(gè)模版方法中接口的定義之后，我們?cè)谕獠空{(diào)用這個(gè)回調(diào)代碼如下：

titleBar.setListener(new ClickListener() {
   
   @Override
   public void Click(int tag) {
    switch (tag) {
   case TitleBar.LEFT_BUTTON:
    Toast.makeText(MainActivity.this, "左邊按鈕被點(diǎn)擊了", 0).show();
    break;
   case TitleBar.RIGHT_BUTTON:
    Toast.makeText(MainActivity.this, "右邊按鈕被點(diǎn)擊了", 0).show();
    break;
   default:
    break;
   } 
   }
  });

　　這樣在外部，能夠有效的控制左右按鈕的點(diǎn)擊事件了。

　　做了這么多，就是希望能夠有效調(diào)用這個(gè)組合控件，調(diào)用組合控件的代碼如下：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:custom="http://schemas.android.com/apk/res/com.example.test"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:padding="5dp"
 tools:context=".MainActivity">

 <!-- <include layout="@layout/topbar" /> -->

 <com.example.test.TitleBar
  android:id="@+id/titleBar"
  android:layout_width="match_parent"
  android:layout_height="40dp"
  custom:titleLeftBackground="@drawable/blue_button"
  custom:titleLeftText="Back"
  custom:titleLeftTextColor="#FFFFFF"
  custom:titleRightBackground="@drawable/blue_button"
  custom:titleRightText="More"
  custom:titleRightTextColor="#FFFFFF"
  custom:title="自定義標(biāo)題"
  custom:titleTextColor="#123412"
  custom:titleTextSize="10sp"/>

</RelativeLayout>

這里，需要和大家交代的是，自定義控件與原生控件調(diào)用區(qū)別在于：

Ⅰ、引用自定義控件必須引用它的完全類名。

Ⅱ、引用自定義控件自定義屬性時(shí)，必須要引用自定義的命名空間，引用方法如下：

xmlns:custom="http://schemas.android.com/apk/res/com.example.test"

這個(gè)控件，最終運(yùn)行效果為：