快捷導(dǎo)航

Android自定義控件之自定義組合控件（三）

更新時(shí)間：2016年08月01日 09:47:49 作者：總李寫代碼

這篇文章主要介紹了Android自定義控件之自定義組合控件，重點(diǎn)介紹一下如何通過(guò)自定義組合控件來(lái)提高布局的復(fù)用，降低開發(fā)成本，感興趣的小伙伴們可以參考一下

前言：

前兩篇介紹了自定義控件的基礎(chǔ)原理Android自定義控件基本原理詳解（一）、Android自定義控件之自定義屬性（二）。今天重點(diǎn)介紹一下如何通過(guò)自定義組合控件來(lái)提高布局的復(fù)用，降低開發(fā)成本，以及維護(hù)成本。

使用自定義組合控件的好處？
我們?cè)陧?xiàng)目開發(fā)中經(jīng)常會(huì)遇見很多相似或者相同的布局，比如APP的標(biāo)題欄，我們從三種方式實(shí)現(xiàn)標(biāo)題欄來(lái)對(duì)比自定義組件帶來(lái)的好處，畢竟好的東西還是以提高開發(fā)效率，降低開發(fā)成本為導(dǎo)向的。
1.）第一種方式：直接在每個(gè)xml布局中寫相同的標(biāo)題欄布局代碼

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

 <RelativeLayout
  android:layout_width="match_parent"
  android:background="@color/green"
  android:layout_height="45dp">

  <Button
   android:id="@+id/title_bar_left"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_alignParentLeft="true"
   android:layout_centerVertical="true"
   android:layout_marginLeft="5dp"
   android:background="@mipmap/titlebar_back_icon"
   android:minHeight="45dp"
   android:minWidth="45dp"
   android:textSize="14sp" />

  <TextView
   android:id="@+id/title_bar_title"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_centerInParent="true"
   android:text="登錄"
   android:singleLine="true"
   android:textSize="17sp" />

  <Button
   android:id="@+id/title_bar_right"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_alignParentRight="true"
   android:layout_centerVertical="true"
   android:layout_marginRight="7dp"
   android:text="提交"
   android:textColor="@android:color/white"
   android:background="@null"
   android:minHeight="45dp"
   android:minWidth="45dp"
   android:textSize="14sp" />
 </RelativeLayout>

</LinearLayout>

這種方式?jīng)]有任何布局復(fù)用的概念，同時(shí)也讓當(dāng)前的布局變得臃腫難以維護(hù)，開發(fā)效率低下，而且這個(gè)還需要要求每個(gè)開發(fā)人員必須細(xì)心否則有可能會(huì)做出參差不齊的標(biāo)題欄，所以這種方式是最不推薦使用的。

2.）第二種方式：使用include標(biāo)簽
首先定義標(biāo)題欄布局

 <RelativeLayout
  android:layout_width="match_parent"
  android:background="@color/green"
  android:layout_height="45dp">

  <Button
   android:id="@+id/title_bar_left"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_alignParentLeft="true"
   android:layout_centerVertical="true"
   android:layout_marginLeft="5dp"
   android:minHeight="45dp"
   android:minWidth="45dp"
   android:textSize="14sp" />

  <TextView
   android:id="@+id/title_bar_title"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_centerInParent="true"
   android:singleLine="true"
   android:textSize="17sp" />

  <Button
   android:id="@+id/title_bar_right"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_alignParentRight="true"
   android:layout_centerVertical="true"
   android:layout_marginRight="7dp"
   android:background="@null"
   android:minHeight="45dp"
   android:minWidth="45dp"
   android:textSize="14sp" />
 </RelativeLayout>

然后在需要的地方通過(guò)include標(biāo)簽實(shí)現(xiàn)引用

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:lee="http://schemas.android.com/apk/res-auto"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical">

 <include layout="@layout/view_title_bar" />

</LinearLayout>

通過(guò)上面的布局代碼，我們可以使用上面這種方式確實(shí)實(shí)現(xiàn)了布局的復(fù)用，而且也避免了開發(fā)人員開發(fā)出參差不齊標(biāo)題欄的問(wèn)題，但是同時(shí)也引入了新的問(wèn)題，比如更加降低了開發(fā)效率，加大了開發(fā)成本，問(wèn)題就在我們?cè)撊绾螢槊總€(gè)布局文件定義標(biāo)題欄？只有通過(guò)代碼的方式來(lái)設(shè)置標(biāo)題問(wèn)題，左右按鈕等其他的屬性，導(dǎo)致布局屬性和Activity代碼耦合性比較高，所以這種方式也不是推薦的方式。

3.）第三種方式：通過(guò)自定義組合控件
這里先不具體介紹如何實(shí)現(xiàn)一個(gè)自定義組合控件，這里先介紹一下自定義組合控件帶來(lái)的好處。
•提高布局文件開發(fā)效率
•降低布局文件維護(hù)成本
•降低布局文件和Activity代碼耦合性
•容易擴(kuò)展
•簡(jiǎn)單易用

如何實(shí)現(xiàn)一個(gè)自定義組合控件
1.）先定義一個(gè)布局文件

<merge xmlns:android="http://schemas.android.com/apk/res/android">

 <Button
  android:id="@+id/title_bar_left"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_alignParentLeft="true"
  android:layout_centerVertical="true"
  android:layout_marginLeft="5dp"
  android:background="@null"
  android:minHeight="45dp"
  android:minWidth="45dp"
  android:textSize="14sp" />

 <TextView
  android:id="@+id/title_bar_title"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_centerInParent="true"
  android:singleLine="true"
  android:textSize="17sp" />

 <Button
  android:id="@+id/title_bar_right"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_alignParentRight="true"
  android:layout_centerVertical="true"
  android:layout_marginRight="7dp"
  android:background="@null"
  android:minHeight="45dp"
  android:minWidth="45dp"
  android:textSize="14sp" />

</merge>

注意：這里為何要使用merge標(biāo)簽，自定義組合控件時(shí)會(huì)繼承RelativeLayout、LinearLayout等控件，這樣導(dǎo)致布局的層級(jí)無(wú)形中增加了一層，如下是對(duì)比：

2.）定義自定義屬性
比如標(biāo)題文字、標(biāo)題欄左邊按鈕圖標(biāo)等。

 <declare-styleable name="CustomTitleBar">
  <attr name="title_background_color" format="reference|integer" />
  <attr name="left_button_visible" format="boolean" />
  <attr name="right_button_visible" format="boolean" />
  <attr name="title_text" format="string" />
  <attr name="title_text_color" format="color" />
  <attr name="title_text_drawable" format="reference|integer" />
  <attr name="right_button_text" format="string" />
  <attr name="right_button_text_color" format="color" />
  <attr name="right_button_drawable" format="reference|integer" />
  <attr name="left_button_text" format="string" />
  <attr name="left_button_text_color" format="color" />
  <attr name="left_button_drawable" format="reference|integer" />
 </declare-styleable>

3.）自定義一個(gè)View根據(jù)需求繼承不同的ViewGroup子類，比如：RelativeLayout、LinearLayout等，我們這里繼承RelativeLayout。

public class CustomTitleBar extends RelativeLayout {
 private Button titleBarLeftBtn;
 private Button titleBarRightBtn;
 private TextView titleBarTitle;

 public CustomTitleBar(Context context, AttributeSet attrs) {
  super(context, attrs);
  LayoutInflater.from(context).inflate(R.layout.custom_title_bar, this, true);
  titleBarLeftBtn = (Button) findViewById(R.id.title_bar_left);
  titleBarRightBtn = (Button) findViewById(R.id.title_bar_right);
  titleBarTitle = (TextView) findViewById(R.id.title_bar_title);

  TypedArray attributes = context.obtainStyledAttributes(attrs, R.styleable.CustomTitleBar);
  if (attributes != null) {
   //處理titleBar背景色
   int titleBarBackGround = attributes.getResourceId(R.styleable.CustomTitleBar_title_background_color, Color.GREEN);
   setBackgroundResource(titleBarBackGround);
   //先處理左邊按鈕
   //獲取是否要顯示左邊按鈕
   boolean leftButtonVisible = attributes.getBoolean(R.styleable.CustomTitleBar_left_button_visible, true);
   if (leftButtonVisible) {
    titleBarLeftBtn.setVisibility(View.VISIBLE);
   } else {
    titleBarLeftBtn.setVisibility(View.INVISIBLE);
   }
   //設(shè)置左邊按鈕的文字
   String leftButtonText = attributes.getString(R.styleable.CustomTitleBar_left_button_text);
   if (!TextUtils.isEmpty(leftButtonText)) {
    titleBarLeftBtn.setText(leftButtonText);
    //設(shè)置左邊按鈕文字顏色
    int leftButtonTextColor = attributes.getColor(R.styleable.CustomTitleBar_left_button_text_color, Color.WHITE);
    titleBarLeftBtn.setTextColor(leftButtonTextColor);
   } else {
    //設(shè)置左邊圖片icon 這里是二選一 要么只能是文字 要么只能是圖片
    int leftButtonDrawable = attributes.getResourceId(R.styleable.CustomTitleBar_left_button_drawable, R.mipmap.titlebar_back_icon);
    if (leftButtonDrawable != -1) {
     titleBarLeftBtn.setBackgroundResource(leftButtonDrawable);
    }
   }

   //處理標(biāo)題
   //先獲取標(biāo)題是否要顯示圖片icon
   int titleTextDrawable = attributes.getResourceId(R.styleable.CustomTitleBar_title_text_drawable, -1);
   if (titleTextDrawable != -1) {
    titleBarTitle.setBackgroundResource(titleTextDrawable);
   } else {
    //如果不是圖片標(biāo)題 則獲取文字標(biāo)題
    String titleText = attributes.getString(R.styleable.CustomTitleBar_title_text);
    if (!TextUtils.isEmpty(titleText)) {
     titleBarTitle.setText(titleText);
    }
    //獲取標(biāo)題顯示顏色
    int titleTextColor = attributes.getColor(R.styleable.CustomTitleBar_title_text_color, Color.WHITE);
    titleBarTitle.setTextColor(titleTextColor);
   }

   //先處理右邊按鈕
   //獲取是否要顯示右邊按鈕
   boolean rightButtonVisible = attributes.getBoolean(R.styleable.CustomTitleBar_right_button_visible, true);
   if (rightButtonVisible) {
    titleBarRightBtn.setVisibility(View.VISIBLE);
   } else {
    titleBarRightBtn.setVisibility(View.INVISIBLE);
   }
   //設(shè)置右邊按鈕的文字
   String rightButtonText = attributes.getString(R.styleable.CustomTitleBar_right_button_text);
   if (!TextUtils.isEmpty(rightButtonText)) {
    titleBarRightBtn.setText(rightButtonText);
    //設(shè)置右邊按鈕文字顏色
    int rightButtonTextColor = attributes.getColor(R.styleable.CustomTitleBar_right_button_text_color, Color.WHITE);
    titleBarRightBtn.setTextColor(rightButtonTextColor);
   } else {
    //設(shè)置右邊圖片icon 這里是二選一 要么只能是文字 要么只能是圖片
    int rightButtonDrawable = attributes.getResourceId(R.styleable.CustomTitleBar_right_button_drawable, -1);
    if (rightButtonDrawable != -1) {
     titleBarRightBtn.setBackgroundResource(rightButtonDrawable);
    }
   }
   attributes.recycle();
  }
 }

 public void setTitleClickListener(OnClickListener onClickListener) {
  if (onClickListener != null) {
   titleBarLeftBtn.setOnClickListener(onClickListener);
   titleBarRightBtn.setOnClickListener(onClickListener);
  }
 }

 public Button getTitleBarLeftBtn() {
  return titleBarLeftBtn;
 }

 public Button getTitleBarRightBtn() {
  return titleBarRightBtn;
 }

 public TextView getTitleBarTitle() {
  return titleBarTitle;
 }
}

4.）在不同的XML布局中引用
關(guān)于如何使用自定義屬性這里就不再說(shuō)明了，為了更加直觀的查看效果，我這里在一個(gè)布局文件中實(shí)現(xiàn)不同要求的標(biāo)題欄

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

 <com.whoislcj.views.CustomTitleBar
  android:layout_width="match_parent"
  android:layout_height="45dp"
  android:layout_marginTop="10dp"
  lee:right_button_drawable="@mipmap/titlebar_add_icon"
  lee:title_background_color="@color/green"
  lee:title_text="標(biāo)題1" />

 <com.whoislcj.views.CustomTitleBar
  android:layout_width="match_parent"
  android:layout_height="45dp"
  android:layout_marginTop="10dp"
  lee:right_button_visible="false"
  lee:title_background_color="@color/green"
  lee:title_text="標(biāo)題2" />

 <com.whoislcj.views.CustomTitleBar
  android:layout_width="match_parent"
  android:layout_height="45dp"
  android:layout_marginTop="10dp"
  lee:left_button_text="左邊"
  lee:right_button_text="右邊"
  lee:title_background_color="@color/red"
  lee:title_text="標(biāo)題3" />

 <com.whoislcj.views.CustomTitleBar
  android:layout_width="match_parent"
  android:layout_height="45dp"
  android:layout_marginTop="10dp"
  lee:left_button_text="左邊"
  lee:right_button_drawable="@mipmap/titlebar_add_icon"
  lee:title_background_color="@color/red"
  lee:title_text="標(biāo)題4" />

 <com.whoislcj.views.CustomTitleBar
  android:layout_width="match_parent"
  android:layout_height="45dp"
  android:layout_marginTop="10dp"
  lee:left_button_text="左邊"
  lee:left_button_text_color="@color/red"
  lee:right_button_drawable="@mipmap/titlebar_add_icon"
  lee:title_background_color="@color/blue"
  lee:title_text="標(biāo)題5" />

 <com.whoislcj.views.CustomTitleBar
  android:layout_width="match_parent"
  android:layout_height="45dp"
  android:layout_marginTop="10dp"
  lee:left_button_text="左邊"
  lee:left_button_text_color="@color/red"
  lee:right_button_drawable="@mipmap/titlebar_add_icon"
  lee:title_background_color="@color/blue"
  lee:title_text="標(biāo)題6"
  lee:title_text_color="@color/black" />

</LinearLayout>

顯示效果

總結(jié)：

通過(guò)本篇文章我們得知，通過(guò)自定義組合控件確實(shí)能夠提高開發(fā)效率，降低維護(hù)成本，但是也需要UI設(shè)計(jì)風(fēng)格保持高度一致，不然的話只能呵呵噠了！所以想要做好一個(gè)app需要一個(gè)有共識(shí)的團(tuán)隊(duì)才行。本篇介紹到此為止，下一篇要更新什么我還沒(méi)有想好！有可能是自定義控件的事件回調(diào)，也有可能自定義ViewGroup實(shí)現(xiàn)流式布局，點(diǎn)擊查看。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: