Android自定義控件之自定義組合控件(三)
前言:
前兩篇介紹了自定義控件的基礎(chǔ)原理Android自定義控件基本原理詳解(一)、Android自定義控件之自定義屬性(二)。今天重點(diǎn)介紹一下如何通過自定義組合控件來提高布局的復(fù)用,降低開發(fā)成本,以及維護(hù)成本。
使用自定義組合控件的好處?
我們?cè)陧?xiàng)目開發(fā)中經(jīng)常會(huì)遇見很多相似或者相同的布局,比如APP的標(biāo)題欄,我們從三種方式實(shí)現(xiàn)標(biāo)題欄來對(duì)比自定義組件帶來的好處,畢竟好的東西還是以提高開發(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>
然后在需要的地方通過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>
通過上面的布局代碼,我們可以使用上面這種方式確實(shí)實(shí)現(xiàn)了布局的復(fù)用,而且也避免了開發(fā)人員開發(fā)出參差不齊標(biāo)題欄的問題,但是同時(shí)也引入了新的問題,比如更加降低了開發(fā)效率,加大了開發(fā)成本,問題就在我們?cè)撊绾螢槊總€(gè)布局文件定義標(biāo)題欄?只有通過代碼的方式來設(shè)置標(biāo)題問題,左右按鈕等其他的屬性,導(dǎo)致布局屬性和Activity代碼耦合性比較高,所以這種方式也不是推薦的方式。
3.)第三種方式:通過自定義組合控件
這里先不具體介紹如何實(shí)現(xiàn)一個(gè)自定義組合控件,這里先介紹一下自定義組合控件帶來的好處。
•提高布局文件開發(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í)無形中增加了一層,如下是對(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)于如何使用自定義屬性這里就不再說明了,為了更加直觀的查看效果,我這里在一個(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é):
通過本篇文章我們得知,通過自定義組合控件確實(shí)能夠提高開發(fā)效率,降低維護(hù)成本,但是也需要UI設(shè)計(jì)風(fēng)格保持高度一致,不然的話只能呵呵噠了!所以想要做好一個(gè)app需要一個(gè)有共識(shí)的團(tuán)隊(duì)才行。本篇介紹到此為止,下一篇要更新什么我還沒有想好!有可能是自定義控件的事件回調(diào),也有可能自定義ViewGroup實(shí)現(xiàn)流式布局,點(diǎn)擊查看。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Android自定義View之組合控件實(shí)現(xiàn)類似電商app頂部欄
- Android自定義控件之組合控件學(xué)習(xí)筆記分享
- Android組合控件實(shí)現(xiàn)功能強(qiáng)大的自定義控件
- Android自定義組合控件之自定義下拉刷新和左滑刪除實(shí)例代碼
- 實(shí)例講解Android應(yīng)用中自定義組合控件的方法
- Android中View自定義組合控件的基本編寫方法
- 在Android開發(fā)中使用自定義組合控件的例子
- 探究Android中ListView復(fù)用導(dǎo)致布局錯(cuò)亂的解決方案
- Android自定義控件之繼承ViewGroup創(chuàng)建新容器
- Android自定義控件之創(chuàng)建可復(fù)用的組合控件
相關(guān)文章
一文帶你深入理解Android Window系統(tǒng)
Android中的窗口系統(tǒng)是應(yīng)用程序用戶界面的核心組件之一,它負(fù)責(zé)管理可視化區(qū)域、處理用戶輸入事件以及與系統(tǒng)UI交互,本文將深入介紹與Android窗口系統(tǒng)相關(guān)的重要概念,需要的朋友可以參考下2023-10-10
詳解Android ViewPager2中的緩存和復(fù)用機(jī)制
最近接觸到豎向整頁(yè)滑動(dòng)的需求,發(fā)現(xiàn)了viewpager2,viewpager2支持fragment,保留了viewpager的特性,下面這篇文章主要給大家介紹了關(guān)于ViewPager2中的緩存和復(fù)用機(jī)制的相關(guān)資料,需要的朋友可以參考下2021-11-11
android實(shí)現(xiàn)撲克卡片翻轉(zhuǎn)
這篇文章主要為大家詳細(xì)介紹了android實(shí)現(xiàn)撲克卡片翻轉(zhuǎn),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-05-05
關(guān)于Touch Panel AA區(qū)要做外擴(kuò)的原因解析
今天小編就為大家分享一篇關(guān)于Touch Panel AA區(qū)要做外擴(kuò)的原因解析,小編覺得內(nèi)容挺不錯(cuò)的,現(xiàn)在分享給大家,具有很好的參考價(jià)值,需要的朋友一起跟隨小編來看看吧2018-12-12
Android中Fragment子類及其PreferenceFragment的創(chuàng)建過程演示
這篇文章主要介紹了Android中Fragment子類及其PreferenceFragment的創(chuàng)建過程演示,PreferenceFragment用來保存Fragment的選項(xiàng)設(shè)置,需要的朋友可以參考下2016-05-05
Android 自定義View結(jié)合自定義TabLayout實(shí)現(xiàn)頂部標(biāo)簽滑動(dòng)效果
小編最近在做app的項(xiàng)目,需要用到tablayout實(shí)現(xiàn)頂部的滑動(dòng)效果,文中代碼用到了自定義item,代碼也很簡(jiǎn)單,感興趣的朋友跟隨腳本之家小編一起看看吧2018-07-07
Android日期選擇器對(duì)話框DatePickerDialog使用詳解
這篇文章主要為大家詳細(xì)介紹了Android日期選擇器對(duì)話框DatePickerDialog的使用,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-01-01

