Android定制属于你自己的导航栏

在实际开发中，我们时常要用到上方的两个按钮,通俗的我们可以叫做导航,等等.还是先看今天需要要实现的一个最的效果:

其实实现这样的效果有多种方式，今天我要给大家要介绍的就是如何的去定制自己的控件，也就是自定义控件，自定义控件分为多种，有组合控件，有重写在原来已有的控件上做基础的修改，也有自己重写写一个类继承于View对象，这方面的知识在实际开发当中也会常碰到，当然像我们这种菜鸟在这方面也是最欠缺的一个知识点，我希望通过我的一些讲解或者分享能帮助到大家吧。今天我给大家讲的就是组合控件的自定义，在后续的博文中我也希望自己能发现更多的这种自定义控件的能力然后再与大家分享，同样如果大家有好的分享的东西也可以与我一起分享。就拿今天的一个效果如何去实现自定义控件，我会采用两种方式去实现，一种就是纯粹的代码方式实现，一种就是用LayoyutInfalter去实现。

先说XML方式的实现方式：

先定义一个XML布局文件：

[html]  view plain copy print ?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="fill_parent"  
4.     android:layout_height="45dip"  
5.     android:background="@drawable/navigation_bg"  
6.     android:gravity="center_vertical"  
7.     android:orientation="horizontal" >  
8.   
9.     <Button  
10.         android:id="@+id/btn_left"  
11.         android:layout_width="wrap_content"  
12.         android:layout_height="wrap_content"  
13.         android:layout_marginLeft="10.0dip"  
14.         android:background="@drawable/backbg"  
15.         android:text="返回"  
16.         android:textColor="@android:color/white" />  
17.   
18.     <TextView  
19.         android:id="@+id/tv_title"  
20.         android:layout_width="wrap_content"  
21.         android:layout_height="wrap_content"  
22.         android:layout_weight="1"  
23.         android:gravity="center"  
24.         android:singleLine="true"  
25.         android:text="标题"  
26.         android:textColor="@android:color/white" />  
27.   
28.     <Button  
29.         android:id="@+id/btn_right"  
30.         android:layout_width="wrap_content"  
31.         android:layout_height="wrap_content"  
32.         android:layout_marginRight="10.0dip"  
33.         android:background="@drawable/buttonbg"  
34.         android:text="新增"  
35.         android:textColor="@android:color/white" />  
36.   
37. </LinearLayout>  

然后我们再重新写一个类继承于LineaLayour。通过在构造方法中去加载这个布局文件，这样就能实现一个组合控件的定义了，这样的方式是不是特别简单。

[java]  view plain copy print ?

1. public class UINavigationView2 extends LinearLayout {  
2.   
3.     private Button btn_left;  
4.     private Button btn_right;  
5.     private TextView tv_title;  
6.   
7.     public UINavigationView2(Context context) {  
8.         super(context);  
9.         // TODO Auto-generated constructor stub  
10.     }  
11.   
12.     public UINavigationView2(Context context, AttributeSet attrs) {  
13.         super(context, attrs);  
14.   
15.         LayoutInflater layoutInflater = (LayoutInflater) context  
16.                 .getSystemService(Context.LAYOUT_INFLATER_SERVICE);  
17.         layoutInflater.inflate(R.layout.title_bar, null);  
18.         btn_left = (Button) findViewById(R.id.btn_left);  
19.         btn_right = (Button) findViewById(R.id.btn_right);  
20.         tv_title = (Button) findViewById(R.id.tv_title);  
21.   
22.     }  
23.   
24.     public void setBtnLeftBacground(int resId) {  
25.   
26.         if (btn_left != null) {  
27.             btn_left.setBackgroundResource(resId);  
28.         }  
29.     }  
30.   
31.     public void setBtnRightBacground(int resId) {  
32.         if (btn_right != null) {  
33.             btn_right.setBackgroundResource(resId);  
34.         }  
35.   
36.     }  
37.   
38.     public void setTvTitle(int resId) {  
39.         if (tv_title != null) {  
40.             tv_title.setText(resId);  
41.         }  
42.     }  
43.   
44.     public Button getBtn_left() {  
45.         return btn_left;  
46.     }  
47.   
48.     public Button getBtn_right() {  
49.         return btn_right;  
50.     }  
51.   
52.     public TextView getTv_title() {  
53.         return tv_title;  
54.     }  
55.   
56. }  

接下来我们再按如果通过代码来定义控件，这里需要了解的一个知识点，如果我们需要在我们的自定义控件如果新添属于我们自己的属性呢？这里我就们就需要attr.xml文件中自己定义，关于这方面的知识大家可以参考这篇文章：http://huangbo-2020.iteye.com/blog/1477611

我们先看我们自己定义的控件定义新增的如下几个属性：

[html]  view plain copy print ?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <resources>  
3.   
4.     <declare-styleable name="navigation">  
5.         <attr name="btn_leftText" format="string" />  
6.         <attr name="btn_rightText" format="string" />  
7.         <attr name="tv_title" format="string" />  
8.         <attr name="left_drawable" format="reference"></attr>  
9.         <attr name="right_drawable" format="reference"></attr>  
10.     </declare-styleable>  
11.   
12. </resources>  

再看我们的自定义控件的代码中如何写的：

[java]  view plain copy print ?

1. public class UINavigationView extends LinearLayout {  
2.   
3.     private Button btn_left;  
4.     private Button btn_right;  
5.     private TextView tv_title;  
6.     private String strBtnLeft;  
7.     private String strBtnRight;  
8.     private String strTitle;  
9.     private int left_drawable;  
10.     private int right_drawable;  
11.   
12.     public UINavigationView(Context context) {  
13.         super(context);  
14.         initContent();  
15.     }  
16.   
17.     public UINavigationView(Context context, AttributeSet attrs) {  
18.         super(context, attrs);  
19.         initAttributes(attrs);  
20.         initContent();  
21.     }  
22.   
23.     private void initAttributes(AttributeSet attributeSet) {  
24.   
25.         if (null != attributeSet) {  
26.   
27.             final int attrIds[] = new int[] { R.attr.btn_leftText,  
28.                     R.attr.btn_rightText, R.attr.tv_title,  
29.                     R.attr.left_drawable, R.attr.right_drawable };  
30.   
31.             Context context = getContext();  
32.   
33.             TypedArray array = context.obtainStyledAttributes(attributeSet,  
34.                     attrIds);  
35.   
36.             CharSequence t1 = array.getText(0);  
37.             CharSequence t2 = array.getText(1);  
38.             CharSequence t3 = array.getText(2);  
39.             left_drawable = array.getResourceId(3, 0);  
40.             right_drawable = array.getResourceId(4, 0);  
41.   
42.             array.recycle();  
43.   
44.             if (null != t1) {  
45.                 strBtnLeft = t1.toString();  
46.             }  
47.             if (null != t2) {  
48.                 strBtnRight = t2.toString();  
49.   
50.             }  
51.             if (null != t3) {  
52.                 strTitle = t3.toString();  
53.             }  
54.   
55.             Log.i("coder", "t1 = " + t1);  
56.             Log.i("coder", "t2 = " + t2);  
57.             Log.i("coder", "t3 = " + t3);  
58.             Log.i("coder", "left_res = " + left_drawable);  
59.         }  
60.   
61.     }  
62.   
63.     private void initContent() {  
64.   
65.         Log.i("coder", "-----initContent----");  
66.         // 设置水平方向  
67.         setOrientation(HORIZONTAL);  
68.   
69.         setGravity(Gravity.CENTER_VERTICAL);  
70.         // 设置背景  
71.         setBackgroundResource(R.drawable.navigation_bg);  
72.   
73.         Context context = getContext();  
74.   
75.         btn_left = new Button(context);  
76.         btn_left.setVisibility(View.INVISIBLE);// 设置设置不可见  
77.         if (left_drawable != 0) {  
78.             btn_left.setBackgroundResource(left_drawable);  
79.         } else {  
80.   
81.             btn_left.setBackgroundResource(R.drawable.backbg);// 设置背景  
82.         }  
83.         btn_left.setTextColor(Color.WHITE);// 字体颜色  
84.   
85.         if (null != strBtnLeft) {  
86.             LayoutParams btnLeftParams = new LayoutParams(  
87.                     LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);  
88.             btnLeftParams.setMargins(10, 0, 0, 0);  
89.             btn_left.setLayoutParams(btnLeftParams);  
90.             btn_left.setText(strBtnLeft);  
91.             btn_left.setVisibility(View.VISIBLE);  
92.         } else {  
93.             btn_left.setLayoutParams(new LayoutParams(50, 50));  
94.         }  
95.   
96.         // 添加这个按钮  
97.         addView(btn_left);  
98.   
99.         //  
100.         tv_title = new TextView(context);  
101.   
102.         LayoutParams centerParam = new LayoutParams(LayoutParams.FILL_PARENT,  
103.                 LayoutParams.FILL_PARENT);  
104.         centerParam.weight = 1;  
105.         tv_title.setLayoutParams(centerParam);  
106.         tv_title.setTextColor(Color.WHITE);  
107.   
108.         if (null != strTitle) {  
109.             tv_title.setText(strTitle);  
110.         }  
111.   
112.         tv_title.setGravity(Gravity.CENTER);  
113.         btn_left.setVisibility(View.VISIBLE);  
114.         // 添加这个标题  
115.         addView(tv_title);  
116.   
117.         btn_right = new Button(context);  
118.         btn_right.setVisibility(View.INVISIBLE);// 设置设置不可见  
119.         btn_right.setBackgroundResource(R.drawable.buttonbg);// 设置背景  
120.         btn_right.setTextColor(Color.WHITE);// 字体颜色  
121.   
122.         if (right_drawable != 0) {  
123.             btn_right.setBackgroundResource(right_drawable);  
124.         } else {  
125.   
126.             btn_right.setBackgroundResource(R.drawable.backbg);// 设置背景  
127.         }  
128.         if (null != strBtnRight) {  
129.   
130.             LayoutParams btnRightParams = new LayoutParams(  
131.                     LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);  
132.             btnRightParams.setMargins(0, 0, 10, 0);  
133.             btn_right.setLayoutParams(btnRightParams);  
134.   
135.             btn_right.setText(strBtnRight);  
136.             btn_right.setVisibility(View.VISIBLE);  
137.         } else {  
138.             btn_right.setLayoutParams(new LayoutParams(50, 50));  
139.         }  
140.   
141.         // 添加这个按钮  
142.         addView(btn_right);  
143.   
144.     }  
145.   
146.     public Button getBtn_left() {  
147.         return btn_left;  
148.     }  
149.   
150.     public Button getBtn_right() {  
151.         return btn_right;  
152.     }  
153.   
154.     public TextView getTv_title() {  
155.         return tv_title;  
156.     }  
157.   
158.     public String getStrBtnLeft() {  
159.         return strBtnLeft;  
160.     }  
161.   
162.     public void setStrBtnLeft(String strBtnLeft) {  
163.         this.strBtnLeft = strBtnLeft;  
164.     }  
165.   
166.     public String getStrBtnRight() {  
167.         return strBtnRight;  
168.     }  
169.   
170.     public void setStrBtnRight(String strBtnRight) {  
171.         this.strBtnRight = strBtnRight;  
172.     }  
173.   
174.     public String getStrTitle() {  
175.         return strTitle;  
176.     }  
177.   
178.     public void setStrTitle(String strTitle) {  
179.         this.strTitle = strTitle;  
180.     }  
181.   
182.     public int getLeft_drawable() {  
183.         return left_drawable;  
184.     }  
185.   
186.     public void setLeft_drawable(int left_drawable) {  
187.         this.left_drawable = left_drawable;  
188.     }  
189.   
190.     public int getRight_drawable() {  
191.         return right_drawable;  
192.     }  
193.   
194.     public void setRight_drawable(int right_drawable) {  
195.         this.right_drawable = right_drawable;  
196.     }  
197.   
198. }  

如何去引用或者使用我们的那个新添加的属性呢？首先要引入那个命名空间[我这是引用C#使用自定义控件的说法,暂时也通俗的这样理解吧]:

xmlns:navigation="http://schemas.android.com/apk/res/com.jiahui.titlebar"

然后再使用我们自定义的属性: navigation:btn_rightText,   navigation:btn_leftText等等 .

[html]  view plain copy print ?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     xmlns:navigation="http://schemas.android.com/apk/res/com.jiahui.titlebar"  
4.     android:layout_width="fill_parent"  
5.     android:layout_height="fill_parent"  
6.     android:orientation="vertical" >  
7.   
8.     <com.jiahui.titlebar.UINavigationView  
9.         android:id="@+id/uinavigationView"  
10.         android:layout_width="fill_parent"  
11.         android:layout_height="45dip"  
12.         navigation:btn_leftText="@string/back"  
13.         navigation:btn_rightText="@string/done"  
14.         navigation:left_drawable="@drawable/backbg"  
15.         navigation:right_drawable="@drawable/buttonbg"  
16.         navigation:tv_title="My Application" />  
17.   
18. </LinearLayout>