Android自定義復合控件實現(xiàn)通用標題欄

本文實例為大家分享了Android復合控件實現(xiàn)通用標題欄的具體代碼，供大家參考，具體內(nèi)容如下

創(chuàng)新互聯(lián)建站主要從事成都網(wǎng)站設計、做網(wǎng)站、網(wǎng)頁設計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務。立足成都服務鳳山,十年網(wǎng)站建設經(jīng)驗,價格優(yōu)惠、服務專業(yè),歡迎來電咨詢建站服務:13518219792

效果圖

估計大家應該和我一樣，每次去看別人博客的時候，都喜歡一拉到底，先看看有沒有效果圖,符不符合自己的需求，符合咱就繼續(xù)看，不符合免得浪費表情，所以效果圖先上為敬

寫在前面的一點兒廢話

作為Android的菜鳥一枚，一直覺得能夠?qū)懽远x控件是一個很炫酷的技能，最近看了徐宜生老師的群英傳之后，感覺收獲還是挺多的。這篇文章就主要記錄的是學習自定義控件中最簡單的復合控件的過程。雖然現(xiàn)在MD中Toolbar已經(jīng)完全滿足各種各樣的需求，但對于我這種菜鳥來說自己動手寫一個還是能學到很多東西的！

1、自定義控件的屬性

既然是自定義的控件，肯定得提供屬性選項，以方便實現(xiàn)不同的樣式。提供自定義的屬性是很簡單的，在res資源目錄下的values目錄下創(chuàng)建一個attrs.xml的屬性集定義的xml文件，在該文件中自定義各種必要的屬性

<?xml version="1.0" encoding="utf-8"?>
<resources>

 <declare-styleable name="NormalTopBar">
  <!--中間標題屬性-->
  <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>

既然自定義了屬性，就需要在自定義控件模板中去獲取這些屬性的賦值，以處理得到相應的顯示效果。在這里，系統(tǒng)提供了TypeArray類，獲取到該類的實例后就可通過getString()等方法獲得布局文件中設置的屬性值

 private void getTypeArray(Context context, AttributeSet attrs) {
  //將attrs.xml中定義的屬性存儲到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來避免重新創(chuàng)建發(fā)生的錯誤

 }

參數(shù)中attrs是控件構(gòu)造函數(shù)中傳入的屬性集參數(shù)，而R.styleable.NormalTopBar就是在attrs.xml文件中定義的該控件屬性集的名字。

2、動態(tài)添加控件組合成自定義符合控件

標題欄中一般包括了左邊的按鈕，中間的標題，右邊的按鈕。在本文中，我把該控件分成了5個部分，左邊有一個ImageView和一個TextView用于用戶點擊，中間有一個TextView用于顯示標題，右邊和左邊一樣，成對稱分布，然后這些控件的父控件是RelativeLayout，方便子控件的布局。了解了有哪些控件之后，就可以初始化這些控件對象，然后分別指定合適的布局，動態(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);//一定要設置textview內(nèi)容的位置

  rightTextView.setText(rightText);
  rightTextView.setTextSize(rightTextSize);
  rightTextView.setTextColor(rightTextColor);

  rightImage.setId(R.id.rightimageid);
  rightImage.setImageResource(rightImageId);



  //為組建設置相應的布局

  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);
  }

 }

這一段代碼首先是初始化得到各子控件的實例對象，然后將屬性值賦值給對應的控件，接著利用LayoutParams類對各子空間的大小和位置進行設定，最后利用addView方法即可將這些子控件添加到控件整體布局中。

這段代碼中，主要的難點在于運用LayoutParams，要注意該布局的外層viewGroup是RelativeLayout,所以在定義和初始化的時候都需要使用RelativeLayout.LayoutParams.另外LayoutParams的構(gòu)造函數(shù)中的參數(shù)用于控制大小，我在設置ImageView對應的LayoutParams時，最開始把寬和高都設置為WRAP_CONTENT,但是運行后效果不理想，imageview寬度占據(jù)了一半的空間，最后決定對該控件的大小指定尺寸大小，不過要注意構(gòu)造函數(shù)中的數(shù)值單位是px，所以需要先定義一個函數(shù)將dp轉(zhuǎn)為px再賦值給構(gòu)造函數(shù)。

這段代碼的另外一個難點是，當我兩側(cè)的按鈕同時有文字和圖標時，對于ImageView和TextView的定位是個問題。在下面代碼中

leftTextParams.addRule(RelativeLayout.ALIGN_PARENT_LEFT,TRUE);

這行代碼將TextView定位在了父控件的左側(cè)，而當左側(cè)同時有ImageView和TextView時二者肯定就會重疊，這肯定不是想要的結(jié)果。所以需要把ImageView仍定位在最左邊，然后TextView定位在前者的右邊，而在方法addRule()中，可以使用 addRule(RelativeLayout.RIGHT_OF,int view) 來把對應的控件定位在參數(shù)中view控件的右邊，但是該參數(shù)需要的是資源ID，可問題是在上面我們是動態(tài)添加的ImageView，并沒有在xml文件中定義id。我嘗試了直接用imageview.getId()，但得到的結(jié)果經(jīng)調(diào)試發(fā)現(xiàn)是-1，并不能實現(xiàn)想要的效果，最后一搜找到了一個方法，首先在資源目錄res下的values下再新建一個ids.xml的文件，然后在文件中定義一個類型為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) 就能給動態(tài)添加的控件賦值一個不會與其他資源id重復的id，接著就可以在布局中使用。

3、定義接口暴露給調(diào)用者

到目前位置，編寫的自定義控件已經(jīng)可以在xml布局文件中使用，而且也能在界面上顯示出來，但是左右兩側(cè)的按鈕點擊事件對于不同的使用者或者不同的頁面，所要完成的動作肯定是不一樣的，所以得暴露一個接口給調(diào)用者自己去實現(xiàn)。

public interface normalTopClickListener{
  void onLeftClick(View view);
  void onRightClick(View view);
 }

然后給調(diào)用者提供一個set函數(shù)讓調(diào)用者來實現(xiàn)該接口中的方法

 public void setTopClickListener(normalTopClickListener mListener){
  this.mClickListener =mListener;
 }

最后在控件模板中，在左右控件的點擊事件里去調(diào)用接口的方法，即可得到調(diào)用者的具體實現(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);
   }
  });

 }

github源碼

結(jié)語

終于寫完了第一篇博客，說句實在的，第一次寫起來感覺真不簡單。如果文中有任何錯誤或者建議，歡迎指出，不勝感激

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

網(wǎng)頁名稱：Android自定義復合控件實現(xiàn)通用標題欄
當前URL：http://muchs.cn/article6/iiosog.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站制作、面包屑導航、標簽優(yōu)化、App開發(fā)、Google、服務器托管

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容