自定义控件之——标题栏

       本文转载自：http://blog.csdn.net/sbsujjbcy/article/details/42836441

        今天忽然心血来潮想自定义控件设置项目标题栏，当然第一步就是先百度一下，看到一篇不错的自定义标题栏控件，我也亲身实践过觉得非常不错，所以转载过来保留当做笔记方便以后使用可以查阅。

一贯作风，先看效果图，再实现

编写自定义属性文件atts.xml，自定义属性中涉及到的属性有左右两边的button的背景图，中间标题的内容，字体大小，字体颜色。

[java]  view plain  copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <resources>  
3.     <declare-styleable name="TopBar">  
4.         <attr name="leftBackground" format="reference"/>  
5.         <attr name="rightBackground" format="reference"/>  
6.         <attr name="titleText" format="string"/>  
7.         <attr name="titleTextSize" format="dimension"/>  
8.         <attr name="titleTextColor" format="color|reference"/>  
9.     </declare-styleable>  
10. </resources>  

编写布局文件layout_topbar.xml，使用相对布局，左边一个button，跟父控件左对齐后外边距为5dp，右边的button也是一样，中间的标题居中显示

[java]  view plain  copy

1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     xmlns:tools="http://schemas.android.com/tools"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="wrap_content"  
5.     tools:context=".TopBar">  
6.   
7.     <Button  
8.         android:id="@+id/leftButton"  
9.         android:layout_width="30dp"  
10.         android:layout_height="30dp"  
11.         android:layout_alignParentLeft="true"  
12.         android:layout_centerVertical="true"  
13.         android:layout_marginLeft="5dp" />  
14.   
15.     <TextView  
16.         android:id="@+id/titleTextView"  
17.         android:layout_width="wrap_content"  
18.         android:layout_height="match_parent"  
19.         android:layout_centerHorizontal="true"  
20.         android:gravity="center" />  
21.   
22.     <Button  
23.         android:id="@+id/rightButton"  
24.         android:layout_width="30dp"  
25.         android:layout_height="30dp"  
26.         android:layout_alignParentRight="true"  
27.         android:layout_centerVertical="true"  
28.         android:layout_marginRight="5dp" />  
29. </RelativeLayout>  

编写自定义控件，继承RelativeLayout，获取自定义属性并给对应的控件赋值

[java]  view plain  copy

1. package cn.edu.zafu.view.topbar;  
2.   
3. import android.content.Context;  
4. import android.content.res.TypedArray;  
5. import android.util.AttributeSet;  
6. import android.view.LayoutInflater;  
7. import android.view.View;  
8. import android.widget.Button;  
9. import android.widget.RelativeLayout;  
10. import android.widget.TextView;  
11.   
12. /** 
13.  * Created by lizhangqu on 2015/1/18. 
14.  */  
15. public class TopBar extends RelativeLayout {  
16.     private Button leftButton, rightButton;  
17.     private TextView titleTextView;  
18.     private OnLeftAndRightClickListener listener;//监听点击事件  
19.     //设置监听器  
20.     public void setOnLeftAndRightClickListener(OnLeftAndRightClickListener listener) {  
21.         this.listener = listener;  
22.     }  
23.     //设置左边按钮的可见性  
24.     public void setLeftButtonVisibility(boolean flag){  
25.         if(flag)  
26.             leftButton.setVisibility(View.VISIBLE);  
27.         else  
28.             leftButton.setVisibility(View.GONE);  
29.     }  
30.     //设置右边按钮的可见性  
31.     public void setRightButtonVisibility(boolean flag){  
32.         if(flag)  
33.             rightButton.setVisibility(View.VISIBLE);  
34.         else  
35.             rightButton.setVisibility(View.GONE);  
36.     }  
37.     //按钮点击接口  
38.     public interface OnLeftAndRightClickListener {  
39.         public void onLeftButtonClick();  
40.   
41.         public void onRightButtonClick();  
42.     }  
43.   
44.     public TopBar(Context context, AttributeSet attrs) {  
45.         super(context, attrs);  
46.         LayoutInflater.from(context).inflate(R.layout.layout_topbar, this);  
47.         leftButton = (Button) findViewById(R.id.leftButton);  
48.         rightButton = (Button) findViewById(R.id.rightButton);  
49.         titleTextView = (TextView) findViewById(R.id.titleTextView);  
50.         leftButton.setOnClickListener(new OnClickListener() {  
51.             @Override  
52.             public void onClick(View v) {  
53.                 if (listener != null)  
54.                     listener.onLeftButtonClick();//点击回调  
55.   
56.             }  
57.         });  
58.         rightButton.setOnClickListener(new OnClickListener() {  
59.             @Override  
60.             public void onClick(View v) {  
61.                 if (listener != null)  
62.                     listener.onRightButtonClick();//点击回调  
63.             }  
64.         });  
65.         //获得自定义属性并赋值  
66.         TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.TopBar);  
67.         int leftBtnBackground = typedArray.getResourceId(R.styleable.TopBar_leftBackground, 0);  
68.         int rightBtnBackground = typedArray.getResourceId(R.styleable.TopBar_rightBackground, 0);  
69.         String titleText = typedArray.getString(R.styleable.TopBar_titleText);  
70.         float titleTextSize = typedArray.getDimension(R.styleable.TopBar_titleTextSize, 0);  
71.         int titleTextColor = typedArray.getColor(R.styleable.TopBar_titleTextColor, 0x38ad5a);  
72.         typedArray.recycle();//释放资源  
73.   
74.         leftButton.setBackgroundResource(leftBtnBackground);  
75.         rightButton.setBackgroundResource(rightBtnBackground);  
76.         titleTextView.setText(titleText);  
77.         titleTextView.setTextSize(titleTextSize);  
78.         titleTextView.setTextColor(titleTextColor);  
79.     }  
80. }  

调用自定义控件

[java]  view plain  copy

1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     xmlns:custom="http://schemas.android.com/apk/res-auto"  
3.     xmlns:tools="http://schemas.android.com/tools"  
4.     android:layout_width="match_parent"  
5.     android:layout_height="match_parent"  
6.     tools:context=".MainActivity">  
7.   
8.   
9.     <cn.edu.zafu.view.topbar.TopBar  
10.         android:id="@+id/topbar"  
11.         android:layout_width="match_parent"  
12.         android:layout_height="50dp"  
13.         android:background="#38ad5a"  
14.         custom:leftBackground="@drawable/left_button_selector"  
15.         custom:rightBackground="@drawable/right_button_selector"  
16.         custom:titleText="标题内容"  
17.         custom:titleTextColor="#000"  
18.         custom:titleTextSize="6sp" />  
19.   
20.   
21. </RelativeLayout>  

[java]  view plain  copy

1. package cn.edu.zafu.view.topbar;  
2.   
3. import android.os.Bundle;  
4. import android.support.v7.app.ActionBarActivity;  
5. import android.widget.Toast;  
6.   
7.   
8. public class MainActivity extends ActionBarActivity {  
9.   
10.     @Override  
11.     protected void onCreate(Bundle savedInstanceState) {  
12.         super.onCreate(savedInstanceState);  
13.         setContentView(R.layout.activity_main);  
14.         TopBar topBar= (TopBar) findViewById(R.id.topbar);  
15.         topBar.setOnLeftAndRightClickListener(new TopBar.OnLeftAndRightClickListener() {  
16.             @Override  
17.             public void onLeftButtonClick() {  
18.                 Toast.makeText(getApplicationContext(),"left",Toast.LENGTH_SHORT).show();  
19.             }  
20.   
21.             @Override  
22.             public void onRightButtonClick() {  
23.                 Toast.makeText(getApplicationContext(),"right",Toast.LENGTH_SHORT).show();  
24.             }  
25.         });  
26.         topBar.setLeftButtonVisibility(false);  
27.     }  
28. }  

前面布局中用到的两个selector如下
编写left_button_selector.xml

[java]  view plain  copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <selector xmlns:android="http://schemas.android.com/apk/res/android">  
3.     <item android:drawable="@drawable/left_pressed" android:state_pressed="true"/>  
4.     <item android:drawable="@drawable/left_normal" />  
5. </selector>  

编写right_button_selector.xml

[java]  view plain  copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <selector xmlns:android="http://schemas.android.com/apk/res/android">  
3.     <item android:drawable="@drawable/right_pressed" android:state_pressed="true"/>  
4.     <item android:drawable="@drawable/right_normal" />  
5. </selector>