Android自定義復(fù)合控件實(shí)現(xiàn)通用標(biāo)題欄
本文實(shí)例為大家分享了Android復(fù)合控件實(shí)現(xiàn)通用標(biāo)題欄的具體代碼，供大家參考，具體內(nèi)容如下
效果圖
估計(jì)大家應(yīng)該和我一樣，每次去看別人博客的時(shí)候，都喜歡一拉到底，先看看有沒(méi)有效果圖,符不符合自己的需求，符合咱就繼續(xù)看，不符合免得浪費(fèi)表情，所以效果圖先上為敬
寫在前面的一點(diǎn)兒廢話
作為Android的菜鳥(niǎo)一枚，一直覺(jué)得能夠?qū)懽远x控件是一個(gè)很炫酷的技能，最近看了徐宜生老師的群英傳之后，感覺(jué)收獲還是挺多的。這篇文章就主要記錄的是學(xué)習(xí)自定義控件中最簡(jiǎn)單的復(fù)合控件的過(guò)程。雖然現(xiàn)在MD中Toolbar已經(jīng)完全滿足各種各樣的需求，但對(duì)于我這種菜鳥(niǎo)來(lái)說(shuō)自己動(dòng)手寫一個(gè)還是能學(xué)到很多東西的！
1、自定義控件的屬性
既然是自定義的控件，肯定得提供屬性選項(xiàng)，以方便實(shí)現(xiàn)不同的樣式。提供自定義的屬性是很簡(jiǎn)單的，在res資源目錄下的values目錄下創(chuàng)建一個(gè)attrs.xml的屬性集定義的xml文件，在該文件中自定義各種必要的屬性
<?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="NormalTopBar"> <!--中間標(biāo)題屬性--> <attr name="titleText" format="string"/> <attr name="titleTextSize" format="dimension"/> <attr name="titleTextColor" format="color"/> <attr name="leftText" format="string"/> <!--左邊按鈕屬性--> <attr name="leftTextSize" format="dimension"/> <attr name="leftTextColor" format="color"/> <attr name="leftImageSrc" format="reference"/> <attr name="rightText" format="string"/> <!--右邊按鈕屬性--> <attr name="rightTextSize" format="dimension"/> <attr name="rightTextColor" format="color"/> <attr name="leftBackground" format="color"/> <attr name="rightBackground" format="color"/> <attr name="rightImageSrc" format="reference"/> </declare-styleable> </resources>
既然自定義了屬性，就需要在自定義控件模板中去獲取這些屬性的賦值，以處理得到相應(yīng)的顯示效果。在這里，系統(tǒng)提供了TypeArray類，獲取到該類的實(shí)例后就可通過(guò)getString()等方法獲得布局文件中設(shè)置的屬性值
private void getTypeArray(Context context, AttributeSet attrs) {
//將attrs.xml中定義的屬性存儲(chǔ)到TypeArray中
TypedArray typeArray=context.obtainStyledAttributes(attrs,R.styleable.NormalTopBar);
leftText=typeArray.getString(R.styleable.NormalTopBar_leftText);
leftTextColor=typeArray.getColor(R.styleable.NormalTopBar_leftTextColor, Color.BLACK);
leftTextSize=typeArray.getDimension(R.styleable.NormalTopBar_leftTextSize,12);
leftImageId=typeArray.getResourceId(R.styleable.NormalTopBar_leftImageSrc,0);
titleText=typeArray.getString(R.styleable.NormalTopBar_titleText);
titleTextColor=typeArray.getColor(R.styleable.NormalTopBar_titleTextColor,Color.BLACK);
titleTextSize=typeArray.getDimension(R.styleable.NormalTopBar_titleTextSize,20);
rightText=typeArray.getString(R.styleable.NormalTopBar_rightText);
rightTextColor=typeArray.getColor(R.styleable.NormalTopBar_rightTextColor,Color.BLACK);
rightTextSize=typeArray.getDimension(R.styleable.NormalTopBar_rightTextSize,12);
rightImageId=typeArray.getResourceId(R.styleable.NormalTopBar_rightImageSrc,0);
typeArray.recycle();//獲取完所有屬性后需要調(diào)用recycle來(lái)避免重新創(chuàng)建發(fā)生的錯(cuò)誤
}
參數(shù)中attrs是控件構(gòu)造函數(shù)中傳入的屬性集參數(shù)，而R.styleable.NormalTopBar就是在attrs.xml文件中定義的該控件屬性集的名字。
2、動(dòng)態(tài)添加控件組合成自定義符合控件
標(biāo)題欄中一般包括了左邊的按鈕，中間的標(biāo)題，右邊的按鈕。在本文中，我把該控件分成了5個(gè)部分，左邊有一個(gè)ImageView和一個(gè)TextView用于用戶點(diǎn)擊，中間有一個(gè)TextView用于顯示標(biāo)題，右邊和左邊一樣，成對(duì)稱分布，然后這些控件的父控件是RelativeLayout，方便子控件的布局。了解了有哪些控件之后，就可以初始化這些控件對(duì)象，然后分別指定合適的布局，動(dòng)態(tài)添加布局中。
private void addAllView(Context context) {
leftTextView =new TextView(context);
rightTextView =new TextView(context);
titleTextView=new TextView(context);
leftImage=new ImageView(context);
rightImage=new ImageView(context);
leftImage.setId(R.id.leftimageid);
leftImage.setImageResource(leftImageId);
//leftImage.setAdjustViewBounds(true);
leftTextView.setText(leftText);
leftTextView.setTextSize(leftTextSize);
leftTextView.setTextColor(leftTextColor);
titleTextView.setText(titleText);
titleTextView.setTextSize(titleTextSize);
titleTextView.setTextColor(titleTextColor);
titleTextView.setGravity(Gravity.CENTER);//一定要設(shè)置textview內(nèi)容的位置
rightTextView.setText(rightText);
rightTextView.setTextSize(rightTextSize);
rightTextView.setTextColor(rightTextColor);
rightImage.setId(R.id.rightimageid);
rightImage.setImageResource(rightImageId);
//為組建設(shè)置相應(yīng)的布局
if(leftImageId!=0&&leftText!=null){
leftImageParams=new LayoutParams(dpToPx(context,35), dpToPx(context,35));
leftImageParams.addRule(ALIGN_PARENT_LEFT,TRUE);
leftImageParams.addRule(CENTER_VERTICAL,TRUE);
addView(leftImage,leftImageParams);
leftTextParams =new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
leftTextParams.addRule(RelativeLayout.RIGHT_OF,R.id.leftimageid);
leftTextParams.addRule(CENTER_VERTICAL,TRUE);
leftTextView.setGravity(Gravity.LEFT);
addView(leftTextView, leftTextParams);
}else if(leftImageId!=0&&leftText==null){
leftImageParams=new LayoutParams(dpToPx(context,35), dpToPx(context,35));
leftImageParams.addRule(ALIGN_PARENT_LEFT,TRUE);
leftImageParams.addRule(CENTER_VERTICAL,TRUE);
addView(leftImage,leftImageParams);
}else{
leftTextParams =new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
leftTextParams.addRule(RelativeLayout.ALIGN_PARENT_LEFT,TRUE);
leftTextParams.addRule(CENTER_VERTICAL,TRUE);
addView(leftTextView, leftTextParams);
}
titleParams=new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.MATCH_PARENT);
titleParams.addRule(CENTER_IN_PARENT,TRUE);
titleParams.addRule(TEXT_ALIGNMENT_CENTER);
addView(titleTextView,titleParams);
if(rightImageId!=0&&rightText!=null){
rightTextParams =new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
rightTextParams.addRule(RelativeLayout.LEFT_OF,R.id.rightimageid);
rightTextParams.addRule(RelativeLayout.CENTER_VERTICAL,TRUE);
rightTextView.setGravity(Gravity.RIGHT);
addView(rightTextView, rightTextParams);
rightImageParams=new LayoutParams(dpToPx(context,35), dpToPx(context,35));
rightImageParams.addRule(CENTER_VERTICAL,TRUE);
rightImageParams.addRule(ALIGN_PARENT_RIGHT,TRUE);
addView(rightImage,rightImageParams);
}else if(rightImageId!=0&&rightText==null){
rightImageParams=new LayoutParams(dpToPx(context,35), dpToPx(context,35));
rightImageParams.addRule(CENTER_VERTICAL,TRUE);
rightImageParams.addRule(ALIGN_PARENT_RIGHT,TRUE);
addView(rightImage,rightImageParams);
}else{
rightTextParams =new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
rightTextParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT,TRUE);
rightTextParams.addRule(RelativeLayout.CENTER_VERTICAL,TRUE);
addView(rightTextView, rightTextParams);
}
}
這一段代碼首先是初始化得到各子控件的實(shí)例對(duì)象，然后將屬性值賦值給對(duì)應(yīng)的控件，接著利用LayoutParams類對(duì)各子空間的大小和位置進(jìn)行設(shè)定，最后利用addView方法即可將這些子控件添加到控件整體布局中。
這段代碼中，主要的難點(diǎn)在于運(yùn)用LayoutParams，要注意該布局的外層viewGroup是RelativeLayout,所以在定義和初始化的時(shí)候都需要使用RelativeLayout.LayoutParams.另外LayoutParams的構(gòu)造函數(shù)中的參數(shù)用于控制大小，我在設(shè)置ImageView對(duì)應(yīng)的LayoutParams時(shí)，最開(kāi)始把寬和高都設(shè)置為WRAP_CONTENT,但是運(yùn)行后效果不理想，imageview寬度占據(jù)了一半的空間，最后決定對(duì)該控件的大小指定尺寸大小，不過(guò)要注意構(gòu)造函數(shù)中的數(shù)值單位是px，所以需要先定義一個(gè)函數(shù)將dp轉(zhuǎn)為px再賦值給構(gòu)造函數(shù)。
這段代碼的另外一個(gè)難點(diǎn)是，當(dāng)我兩側(cè)的按鈕同時(shí)有文字和圖標(biāo)時(shí)，對(duì)于ImageView和TextView的定位是個(gè)問(wèn)題。在下面代碼中
leftTextParams.addRule(RelativeLayout.ALIGN_PARENT_LEFT,TRUE);
這行代碼將TextView定位在了父控件的左側(cè)，而當(dāng)左側(cè)同時(shí)有ImageView和TextView時(shí)二者肯定就會(huì)重疊，這肯定不是想要的結(jié)果。所以需要把ImageView仍定位在最左邊，然后TextView定位在前者的右邊，而在方法addRule()中，可以使用 addRule(RelativeLayout.RIGHT_OF,int view) 來(lái)把對(duì)應(yīng)的控件定位在參數(shù)中view控件的右邊，但是該參數(shù)需要的是資源ID，可問(wèn)題是在上面我們是動(dòng)態(tài)添加的ImageView，并沒(méi)有在xml文件中定義id。我嘗試了直接用imageview.getId()，但得到的結(jié)果經(jīng)調(diào)試發(fā)現(xiàn)是-1，并不能實(shí)現(xiàn)想要的效果，最后一搜找到了一個(gè)方法，首先在資源目錄res下的values下再新建一個(gè)ids.xml的文件，然后在文件中定義一個(gè)類型為id的item
<?xml version="1.0" encoding="utf-8"?> <resources> <item name="leftimageid" type="id"/> <item name="rightimageid" type="id"/> </resources>
然后利用ImageView.setId(R.id.leftimageid) 就能給動(dòng)態(tài)添加的控件賦值一個(gè)不會(huì)與其他資源id重復(fù)的id，接著就可以在布局中使用。
3、定義接口暴露給調(diào)用者
到目前位置，編寫的自定義控件已經(jīng)可以在xml布局文件中使用，而且也能在界面上顯示出來(lái)，但是左右兩側(cè)的按鈕點(diǎn)擊事件對(duì)于不同的使用者或者不同的頁(yè)面，所要完成的動(dòng)作肯定是不一樣的，所以得暴露一個(gè)接口給調(diào)用者自己去實(shí)現(xiàn)。
public interface normalTopClickListener{
void onLeftClick(View view);
void onRightClick(View view);
}
然后給調(diào)用者提供一個(gè)set函數(shù)讓調(diào)用者來(lái)實(shí)現(xiàn)該接口中的方法
public void setTopClickListener(normalTopClickListener mListener){
this.mClickListener =mListener;
}
最后在控件模板中，在左右控件的點(diǎn)擊事件里去調(diào)用接口的方法，即可得到調(diào)用者的具體實(shí)現(xiàn)
private void addOnClick() {
leftTextView.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View view) {
mClickListener.onLeftClick(view);
}
});
leftImage.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View view) {
mClickListener.onLeftClick(view);
}
});
rightTextView.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View view) {
mClickListener.onRightClick(view);
}
});
rightImage.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View view) {
mClickListener.onRightClick(view);
}
});
}
結(jié)語(yǔ)
終于寫完了第一篇博客，說(shuō)句實(shí)在的，第一次寫起來(lái)感覺(jué)真不簡(jiǎn)單。如果文中有任何錯(cuò)誤或者建議，歡迎指出，不勝感激
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Android仿字節(jié)顏色自定義進(jìn)度條，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
Android編程開(kāi)發(fā)之多點(diǎn)觸摸(Multitouch)實(shí)現(xiàn)方法
這篇文章主要介紹了Android編程開(kāi)發(fā)之多點(diǎn)觸摸(Multitouch)實(shí)現(xiàn)方法,結(jié)合實(shí)例形式詳細(xì)分析了Android多點(diǎn)觸摸的相關(guān)實(shí)現(xiàn)步驟與操作技巧,需要的朋友可以參考下2016-08-08
Android判斷后臺(tái)服務(wù)是否開(kāi)啟的兩種方法實(shí)例詳解
這篇文章主要介紹了Android判斷后臺(tái)服務(wù)是否開(kāi)啟的方法的相關(guān)資料,這里提供了兩種方法及實(shí)例，需要的朋友可以參考下2017-07-07
在Android開(kāi)發(fā)中,異步任務(wù)處理和UI更新是兩個(gè)非常重要的概念,本文將詳細(xì)介紹Android中異步任務(wù)的處理方式以及如何在異步任務(wù)完成后更新UI,并通過(guò)代碼示例介紹的非常詳細(xì),具有一定的參考價(jià)值,需要的朋友可以參考下2024-09-09
本文給大家分享的是在Android中暫停背景音樂(lè)的方法的示例，以及度娘上其他網(wǎng)友的實(shí)現(xiàn)方法，感覺(jué)非常不錯(cuò)，這里全部推薦給大家，有需要的小伙伴可以參考下。2015-05-05
Android UI設(shè)計(jì)系列之自定義ListView仿QQ空間阻尼下拉刷新和漸變菜單欄效果（8）
這篇文章主要介紹了Android UI設(shè)計(jì)系列之自定義ListView仿QQ空間阻尼下拉刷新和漸變菜單欄效果，具有一定的實(shí)用性和參考價(jià)值，感興趣的小伙伴們可以參考一下2016-06-06
Android模擬用戶點(diǎn)擊的實(shí)現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于Android模擬用戶點(diǎn)擊的實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)學(xué)習(xí)學(xué)習(xí)吧。2018-02-02
Android3.0 ActionBar導(dǎo)航標(biāo)題欄使用解析
這篇文章主要為大家詳細(xì)解析了Android3.0 ActionBar導(dǎo)航標(biāo)題欄的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
Android編程設(shè)計(jì)模式之狀態(tài)模式詳解
這篇文章主要介紹了Android編程設(shè)計(jì)模式之狀態(tài)模式,結(jié)合實(shí)例形式詳細(xì)分析了Android狀態(tài)模式的概念、功能、使用方法及相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-12-12
Android Studio 多層級(jí) Module 對(duì) aar 引用問(wèn)題解決方法
這篇文章主要介紹了Android Studio 多層級(jí) Module 對(duì) aar 引用問(wèn)題的解決方法，需要的朋友參考下2017-12-12