android：自訂群組合控制項Weight(高仿貓眼底部功能表列)

標籤：

         在我們實際開發當中，會碰見一些布局結構類似或者相同的介面，例如應用的設定介面、tab按鈕介面等。這時候，對於初學者來說，xml裡面一個個繪製出來或許是最初的想法；可能隨著經驗的積累，又學會一招，就是使用include標籤，匯入類似或者相同的布局，提高了效能又減少了代碼；再以後呢，自訂控制項又可以實現這一目的。本文就是簡單的使用自訂的群組控制項模仿貓眼底部功能表列。

      1.自訂群組合控制項屬性：在res/values目錄下建立attrs.xml檔案

    <declare-styleable name="TabItemView">        <attr name="contentTextSize" format="dimension"/> <!-- 字型大小 -->        <attr name="contentTextColor" format="color"/> <!-- 字型顏色 -->        <attr name="contentTextString" format="string"/> <!-- 顯示的預設文字 -->        <attr name="contentLogoBack" format="reference"/> <!-- item背景 -->        <attr name="contentLogoSize" format="dimension" />    </declare-styleable>

TabItemView:簡單一點說，就是屬性群組合的名字；

         <attr />某個屬性的定義：如<attr name="contentTextSize" format="dimension"/>，定義的就是文字的大小，contentTextSize指屬性名稱字(和我們xml中常用的textSize)，format定義的是contentTextSize具體的屬性類型。

       下面簡單的說下format的具體類型：

(1) reference：參考某一資源ID。 (2) color：顏色值。
(3) boolean：布爾值。 (4) dimension：尺寸值。
(5) float：浮點值。 (6) integer：整型值。
(7) string：字串。 (8) fraction：百分數。
(9) enum：枚舉值。 (10)flag：位或運算。  

    2.控制項的屬性定義完了，然後就是要在代碼裡面擷取使用這些屬性，看原始碼的時候，你會發現系統定義的屬性都是通過TypedArray這玩意擷取的，擷取方法如下：

       TypedArray ta = mContext.obtainStyledAttributes(attrs, R.styleable.TabItemView);

以上方法返回的我們自訂的屬性集合，待最後用完之後，需要手動釋放一下，ta.recycle();

 TypedArray屬性集合得到之後，下面就是根據需要擷取不同的屬性，針對不同的屬性有不同的擷取方法，以下是幾個比較常用到的屬性擷取方法：

(1)getDimensionPixelSize:擷取尺寸的大小(間距，文字大小等)

(2)getResourceId：擷取資源id(圖片等)

(3)getString:擷取字串

(4)getBoolean：擷取布爾值

(5)getColor：擷取顏色值

(6)getFloat：擷取浮點類型值

     下面是TabItemView自訂群組合控制項的完整代碼:

package com.dandy.weights;import com.dandy.utils.PhoneUtils;import com.demo.dandy.R;import android.content.Context;import android.content.res.TypedArray;import android.text.TextUtils;import android.util.AttributeSet;import android.util.TypedValue;import android.view.InflateException;import android.view.View;import android.widget.ImageView;import android.widget.LinearLayout;import android.widget.TextView;import android.view.View.OnClickListener;public class TabItemView extends LinearLayout implements OnClickListener{private Context mContext;private ImageView contentLogo;//tab圖片顯示private TextView contentText;//tab文字提示private int logoBackResourceId;//圖片資源idprivate String textString;//文字字串private int textColor;//文字顯示顏色private float textSize;//文字顯示大小private int contentLogoSize;//顯示圖片大小private static final float defaultTextSize = 16;//文字預設大熊啊private int defaultColor,selectedColor;//預設顏色private TabClickListner mClickListner;//點擊監聽回調事件public TabItemView(Context context) {this(context, null);}public TabItemView(Context context, AttributeSet attrs) {this(context, attrs, 0);}public TabItemView(Context context, AttributeSet attrs, int defStyle) {super(context, attrs, defStyle);this.mContext = context;init(attrs);addView();}private void init(AttributeSet attrs){        this.setOnClickListener(this);TypedArray ta = mContext.obtainStyledAttributes(attrs, R.styleable.TabItemView);//擷取屬性集合logoBackResourceId = ta.getResourceId(R.styleable.TabItemView_contentLogoBack, -1);//擷取圖片資源idtextColor = ta.getColor(R.styleable.TabItemView_contentTextColor,<span style="font-family: Arial, Helvetica, sans-serif;">getResources().getColor(android.R.color.black));//擷取文字顏色</span>

textSize = ta.getDimensionPixelSize(R.styleable.TabItemView_contentTextSize,<span style="font-family: Arial, Helvetica, sans-serif;">PhoneUtils.dp2px(mContext, defaultTextSize));//擷取顯示的文字大小</span>

textString = ta.getString(R.styleable.TabItemView_contentTextString);//擷取顯示的文字contentLogoSize = ta.getDimensionPixelSize(R.styleable.TabItemView_contentLogoSize,<span style="font-family: Arial, Helvetica, sans-serif;">LayoutParams.WRAP_CONTENT);//擷取顯示圖片的尺寸大小</span>

ta.recycle();defaultColor = mContext.getResources().getColor(R.color.textcolor_black_b3);selectedColor = mContext.getResources().getColor(R.color.textcolor_red_d);}//添加顯示圖片和文字的控制項private void addView(){contentLogo = new ImageView(mContext);contentLogo.setFocusable(false);contentLogo.setClickable(false);LayoutParams logoParams = new LayoutParams(contentLogoSize,contentLogoSize);contentLogo.setLayoutParams(logoParams);if(logoBackResourceId != -1){contentLogo.setBackgroundResource(logoBackResourceId);}else{throw new InflateException("未設定填充圖片資源");}this.addView(contentLogo);if(!TextUtils.isEmpty(textString)){contentText = new TextView(mContext);contentText.setFocusable(false);contentText.setClickable(false);LayoutParams textParams = new LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT);textParams.topMargin = PhoneUtils.dp2px(mContext,3);contentText.setLayoutParams(textParams);contentText.setTextColor(textColor);contentText.setTextSize(TypedValue.COMPLEX_UNIT_PX,textSize);contentText.setText(textString);this.addView(contentText);}}@Overridepublic void onClick(View v) {setTabSelected(true);if(mClickListner != null){mClickListner.onTabClick(this);//回調點擊事件}}/** *設定點擊監聽事件  */public void setTabClickListener(TabClickListner listner){this.mClickListner = listner;}/** *設定填充圖片資源  */public void setContentLogoBack(int resourceId){contentLogo.setBackgroundResource(resourceId);}/** *設定填充文字 */public void setContentTextString(String text){if(contentText != null){contentText.setText(text);}}/** *設定選中狀態  */public void setTabSelected(boolean enable){if(contentLogo != null){contentLogo.setSelected(enable);}if(contentText != null){if(enable){contentText.setTextColor(selectedColor);}else{contentText.setTextColor(defaultColor);}}}public interface TabClickListner{void onTabClick(View view);}}

 

TabClickListener:控制項點擊的回調介面

3.控制項搞定，然後就是在布局裡面的具體使用

在res/layout/中建立tab_layout.xml檔案，具體代碼如下：

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tabItem="http://schemas.android.com/apk/res/com.demo.dandy"    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:orientation="horizontal"     android:background="@color/background_bg7"    android:paddingTop="@dimen/tab_padding"    android:paddingBottom="@dimen/tab_padding">    <com.dandy.weights.TabItemView        android:id="@+id/movie"        style="@style/TabItemStyle"        android:layout_width="0dp"        android:layout_height="wrap_content"        android:layout_weight="1"        android:gravity="center"        android:orientation="vertical"        tabItem:contentLogoBack="@drawable/selector_tab_movie"        tabItem:contentTextString="@string/movie" />    <com.dandy.weights.TabItemView        android:id="@+id/cinema"        style="@style/TabItemStyle"        android:layout_width="0dp"        android:layout_height="wrap_content"        android:layout_weight="1"        android:gravity="center"        android:orientation="vertical"        tabItem:contentLogoBack="@drawable/selector_tab_cinema"        tabItem:contentTextString="@string/cinema" />    <com.dandy.weights.TabItemView        android:id="@+id/community"        style="@style/TabItemStyle"        android:layout_width="0dp"        android:layout_height="wrap_content"        android:layout_weight="1"        android:gravity="center"        android:orientation="vertical"        tabItem:contentLogoBack="@drawable/selector_tab_community"        tabItem:contentTextString="@string/community" />    <com.dandy.weights.TabItemView        android:id="@+id/mine"        style="@style/TabItemStyle"        android:layout_width="0dp"        android:layout_height="wrap_content"        android:layout_weight="1"        android:gravity="center"        android:orientation="vertical"        tabItem:contentLogoBack="@drawable/selector_tab_mine"        tabItem:contentTextString="@string/mine" /></LinearLayout>

代碼當中：xmlns:tabItem="http://schemas.android.com/apk/res/com.demo.dandy"，這段代碼是關聯你自訂屬性的，其中com.demo.dandy是指你應用的包名，tabItem是引用名

其實就是拷貝xmlns:android="http://schemas.android.com/apk/res/android，替換一下android就ok了。

具體流程是：在建構函式中，擷取TypedArray屬性集合，然後擷取所需的各個屬性值，再通過動態添加控制項ImageView和TextView，並且把相應定義的屬性賦值給它們。

運行如下：

原始碼下載連結

著作權聲明：本文為博主原創文章，未經博主允許不得轉載。

android：自訂群組合控制項Weight(高仿貓眼底部功能表列)