自定义组合控件Weight(高仿猫眼底部菜单栏)

   在我们实际开发当中，会碰见一些布局结构类似或者相同的界面，例如应用的设置界面、tab按钮界面等。这时候，对于初学者来说，xml里面一个个绘制出来或许是最初的想法；可能随着经验的积累，又学会一招，就是使用include标签，导入类似或者相同的布局，提高了性能又减少了代码；再以后呢，自定义控件又可以实现这一目的。本文就是简单的使用自定义的组合控件模仿猫眼底部菜单栏。

      1.自定义组合控件属性：在res/values目录下创建attrs.xml文件

[java]  view plain copy

1. <declare-styleable name="TabItemView">  
2.     <attr name="contentTextSize" format="dimension"/> <!-- 字体大小 -->  
3.     <attr name="contentTextColor" format="color"/> <!-- 字体颜色 -->  
4.     <attr name="contentTextString" format="string"/> <!-- 显示的默认文字 -->  
5.     <attr name="contentLogoBack" format="reference"/> <!-- item背景 -->  
6.     <attr name="contentLogoSize" format="dimension" />  
7. </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这玩意获取的，获取方法如下：

[java]  view plain copy

1. 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自定义组合控件的完整代码:

[java]  view plain copy

1. package com.dandy.weights;  
2.   
3. import com.dandy.utils.PhoneUtils;  
4. import com.demo.dandy.R;  
5. import android.content.Context;  
6. import android.content.res.TypedArray;  
7. import android.text.TextUtils;  
8. import android.util.AttributeSet;  
9. import android.util.TypedValue;  
10. import android.view.InflateException;  
11. import android.view.View;  
12. import android.widget.ImageView;  
13. import android.widget.LinearLayout;  
14. import android.widget.TextView;  
15. import android.view.View.OnClickListener;  
16.   
17. public class TabItemView extends LinearLayout implements OnClickListener{  
18.   
19.     private Context mContext;  
20.       
21.     private ImageView contentLogo;//tab图片显示  
22.     private TextView contentText;//tab文字提示  
23.       
24.     private int logoBackResourceId;//图片资源id  
25.     private String textString;//文字字符串  
26.     private int textColor;//文字显示颜色  
27.     private float textSize;//文字显示大小  
28.     private int contentLogoSize;//显示图片大小  
29.     private static final float defaultTextSize = 16;//文字默认大熊啊  
30.     private int defaultColor,selectedColor;//默认颜色  
31.     private TabClickListner mClickListner;//点击监听回调事件  
32.       
33.       
34.     public TabItemView(Context context) {  
35.     this(context, null);  
36.     }  
37.       
38.     public TabItemView(Context context, AttributeSet attrs) {  
39.         this(context, attrs, 0);  
40.     }  
41.       
42.     public TabItemView(Context context, AttributeSet attrs, int defStyle) {  
43.         super(context, attrs, defStyle);  
44.         this.mContext = context;  
45.         init(attrs);  
46.         addView();  
47.     }  
48.       
49.     private void init(AttributeSet attrs){  
50.             this.setOnClickListener(this);  
51.         TypedArray ta = mContext.obtainStyledAttributes(attrs, R.styleable.TabItemView);//获取属性集合  
52.         logoBackResourceId = ta.getResourceId(R.styleable.TabItemView_contentLogoBack, -1);//获取图片资源id  
53.         textColor = ta.getColor(R.styleable.TabItemView_contentTextColor,<span style="font-family: Arial, Helvetica, sans-serif;">getResources().getColor(android.R.color.black));//获取文字颜色</span>  

[java]  view plain copy

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

[java]  view plain copy

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

[java]  view plain copy

1.     ta.recycle();  
2.     defaultColor = mContext.getResources().getColor(R.color.textcolor_black_b3);  
3.     selectedColor = mContext.getResources().getColor(R.color.textcolor_red_d);  
4. }  
5. //添加显示图片和文字的控件  
6. private void addView(){  
7.     contentLogo = new ImageView(mContext);  
8.     contentLogo.setFocusable(false);  
9.     contentLogo.setClickable(false);  
10.     LayoutParams logoParams = new LayoutParams(contentLogoSize,contentLogoSize);  
11.     contentLogo.setLayoutParams(logoParams);  
12.     if(logoBackResourceId != -1){  
13.         contentLogo.setBackgroundResource(logoBackResourceId);  
14.     }else{  
15.         throw new InflateException("未设置填充图片资源");  
16.     }  
17.       
18.     this.addView(contentLogo);  
19.       
20.     if(!TextUtils.isEmpty(textString)){  
21.         contentText = new TextView(mContext);  
22.         contentText.setFocusable(false);  
23.         contentText.setClickable(false);  
24.         LayoutParams textParams = new LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT);  
25.         textParams.topMargin = PhoneUtils.dp2px(mContext,3);  
26.         contentText.setLayoutParams(textParams);  
27.         contentText.setTextColor(textColor);  
28.         contentText.setTextSize(TypedValue.COMPLEX_UNIT_PX,textSize);  
29.         contentText.setText(textString);  
30.         this.addView(contentText);  
31.     }  
32. }  
33.   
34. @Override  
35. public void onClick(View v) {  
36.     setTabSelected(true);  
37.     if(mClickListner != null){  
38.         mClickListner.onTabClick(this);//回调点击事件  
39.     }  
40. }  
41.   
42. /** 
43.  *设置点击监听事件  
44.  */  
45. public void setTabClickListener(TabClickListner listner){  
46.     this.mClickListner = listner;  
47. }  
48.   
49. /** 
50.  *设置填充图片资源  
51.  */  
52. public void setContentLogoBack(int resourceId){  
53.     contentLogo.setBackgroundResource(resourceId);  
54. }  
55.   
56. /** 
57.  *设置填充文字 
58.  */  
59. public void setContentTextString(String text){  
60.     if(contentText != null){  
61.         contentText.setText(text);  
62.     }  
63. }  
64.   
65. /** 
66.  *设置选中状态  
67.  */  
68. public void setTabSelected(boolean enable){  
69.     if(contentLogo != null){  
70.         contentLogo.setSelected(enable);  
71.     }  
72.     if(contentText != null){  
73.         if(enable){  
74.             contentText.setTextColor(selectedColor);  
75.         }else{  
76.             contentText.setTextColor(defaultColor);  
77.         }  
78.     }  
79. }  
80.   
81. public interface TabClickListner{  
82.     void onTabClick(View view);  
83. }  

 

TabClickListener:控件点击的回调接口

3.控件搞定，然后就是在布局里面的具体使用

在res/layout/中创建tab_layout.xml文件，具体代码如下：

[java]  view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     xmlns:tabItem="http://schemas.android.com/apk/res/com.demo.dandy"  
4.     android:layout_width="match_parent"  
5.     android:layout_height="wrap_content"  
6.     android:orientation="horizontal"   
7.     android:background="@color/background_bg7"  
8.     android:paddingTop="@dimen/tab_padding"  
9.     android:paddingBottom="@dimen/tab_padding">  
10.   
11.     <com.dandy.weights.TabItemView  
12.         android:id="@+id/movie"  
13.         style="@style/TabItemStyle"  
14.         android:layout_width="0dp"  
15.         android:layout_height="wrap_content"  
16.         android:layout_weight="1"  
17.         android:gravity="center"  
18.         android:orientation="vertical"  
19.         tabItem:contentLogoBack="@drawable/selector_tab_movie"  
20.         tabItem:contentTextString="@string/movie" />  
21.   
22.     <com.dandy.weights.TabItemView  
23.         android:id="@+id/cinema"  
24.         style="@style/TabItemStyle"  
25.         android:layout_width="0dp"  
26.         android:layout_height="wrap_content"  
27.         android:layout_weight="1"  
28.         android:gravity="center"  
29.         android:orientation="vertical"  
30.         tabItem:contentLogoBack="@drawable/selector_tab_cinema"  
31.         tabItem:contentTextString="@string/cinema" />  
32.   
33.     <com.dandy.weights.TabItemView  
34.         android:id="@+id/community"  
35.         style="@style/TabItemStyle"  
36.         android:layout_width="0dp"  
37.         android:layout_height="wrap_content"  
38.         android:layout_weight="1"  
39.         android:gravity="center"  
40.         android:orientation="vertical"  
41.         tabItem:contentLogoBack="@drawable/selector_tab_community"  
42.         tabItem:contentTextString="@string/community" />  
43.   
44.     <com.dandy.weights.TabItemView  
45.         android:id="@+id/mine"  
46.         style="@style/TabItemStyle"  
47.         android:layout_width="0dp"  
48.         android:layout_height="wrap_content"  
49.         android:layout_weight="1"  
50.         android:gravity="center"  
51.         android:orientation="vertical"  
52.         tabItem:contentLogoBack="@drawable/selector_tab_mine"  
53.         tabItem:contentTextString="@string/mine" />  
54.   
55. </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，并且把相应定义的属性赋值给它们。

运行截图如下：

源代码下载链接