Android项目中自定义顶部标题栏

实现功能：

1）定义标题栏布局；

2）自定义TitleActivity控制标题栏按钮监听；

3）在TitleActivity中实现标题栏以下内容区域的切换；

4）新建Activity继承TitleActivity，实现重用标题栏效果。

 

实现步骤：

1. 新建一个工程，命名为TitleActivityDemo，Activity命名为TitleActivity；

2. 实现如图效果

分为：返回按钮、返回键、标题、提交

3. 设置返回按钮监听，并toast；

1）设置左上角箭头和返回文案区域点击事件的监听，toast提示如图文案；

2）设置提交文字的点击事件监听并toast提示“我是提交按钮”；

4). 实现标题栏下方内容区域；

5）编写MainActivity类继承TitleActivity，实现如图整体逻辑。

效果图：

功能代码：

1.首先定义标题栏  layout_title.xml

[java]  view plain  copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     xmlns:tools="http://schemas.android.com/tools"  
4.     android:layout_width="match_parent"  
5.     android:layout_height="match_parent" >  
6.   
7.     <!-- 首先定义标题栏 -->  
8.     <RelativeLayout  
9.         android:id="@+id/biaoti"  
10.         android:layout_width="match_parent"  
11.         android:layout_height="58dp"  
12.         android:background="#ed4255">  
13.         <TextView  
14.             android:text="标题栏"  
15.             android:id="@+id/text_title"  
16.             android:textSize="21sp"  
17.             android:textColor="#fff"  
18.             android:gravity="center"  
19.             android:singleLine="true"  
20.             android:ellipsize="marquee"  
21.             android:layout_width="match_parent"  
22.             android:layout_height="match_parent" />  
23.   
24.         <Button  
25.             android:id="@+id/button_backward"  
26.             android:layout_width="70dp"  
27.             android:layout_height="match_parent"  
28.             android:drawableLeft="@drawable/back_arrow"  
29.             android:drawablePadding="6dp"  
30.             android:background="#ed4255"  
31.             android:ellipsize="end"  
32.             android:gravity="center"  
33.             android:onClick="onClick"  
34.             android:paddingLeft="5dp"  
35.             android:singleLine="true"  
36.             android:text="返回"  
37.             android:textColor="#ffffffff"  
38.             android:textSize="18dp"  
39.             android:visibility="invisible" />  
40.   
41.         <Button  
42.             android:id="@+id/button_forward"  
43.             android:layout_width="70dp"  
44.             android:layout_height="match_parent"  
45.             android:layout_alignParentRight="true"  
46.             android:drawablePadding="6dp"  
47.             android:background="#ed4255"  
48.             android:ellipsize="end"  
49.             android:gravity="center"  
50.             android:onClick="onClick"  
51.             android:paddingLeft="5dp"  
52.             android:singleLine="true"  
53.             android:text="提交"  
54.             android:textColor="#ffffffff"  
55.             android:textSize="18dp"  
56.             android:visibility="invisible" />  
57.     </RelativeLayout>  
58.   
59.     <TextView  
60.         android:text="Android"  
61.         android:textSize="28sp"  
62.         android:gravity="center"  
63.         android:layout_below="@+id/biaoti"  
64.         android:layout_width="match_parent"  
65.         android:layout_height="match_parent" />  
66. </RelativeLayout>  

2.activity_title.xml   定义界面的标题栏和标题栏以下内容的布局， 此处使用 <include> 标签引入标题栏，且下方有定义一个空的FrameLayout的布局。

[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:tools="http://schemas.android.com/tools"  
4.     android:orientation="vertical"  
5.     android:layout_width="match_parent"  
6.     android:layout_height="match_parent">  
7.   
8.     <!--    定义界面的标题栏和标题栏以下内容的布局  
9.             此处使用<include>标签引入标题栏，且下方有定义一个空的FrameLayout的布局。  -->  
10.     <include layout="@layout/layout_title"></include>  
11.   
12.     <FrameLayout  
13.         android:background="#fff"  
14.         android:id="@+id/layout_content"  
15.         android:layout_width="match_parent"  
16.         android:layout_height="match_parent">  
17.     </FrameLayout>  
18.   
19. </LinearLayout>  

3.TitleActivity.java   定义TitleActivity布局以及按钮

[java]  view plain  copy

1. package com.bwie.title;  
2. import android.app.Activity;  
3. import android.os.Bundle;  
4. import android.view.View;  
5. import android.view.ViewGroup;  
6. import android.widget.Button;  
7. import android.widget.FrameLayout;  
8. import android.widget.TextView;  
9. import android.widget.Toast;  
10.   
11. /** 
12.  * 1）定义标题栏布局； 
13.  * 2）自定义TitleActivity控制标题栏按钮监听； 
14.  * 3）在TitleActivity中实现标题栏以下内容区域的切换； 
15.  */  
16. public class TitleActivity extends Activity implements View.OnClickListener {  
17.   
18.     //private RelativeLayout mLayoutTitleBar;  
19.     private TextView mTitleTextView;  
20.     private Button mBackwardbButton;  
21.     private Button mForwardButton;  
22.     private FrameLayout mContentLayout;  
23.   
24.     @Override  
25.     protected void onCreate(Bundle savedInstanceState) {  
26.         super.onCreate(savedInstanceState);  
27.         setupViews();   //加载 activity_title 布局 ，并获取标题及两侧按钮  
28.     }  
29.   
30.     private void setupViews() {  
31.         super.setContentView(R.layout.activity_title);  
32.         mTitleTextView = (TextView) findViewById(R.id.text_title);  
33.         mContentLayout = (FrameLayout) findViewById(R.id.layout_content);  
34.         mBackwardbButton = (Button) findViewById(R.id.button_backward);  
35.         mForwardButton = (Button) findViewById(R.id.button_forward);  
36.     }  
37.   
38.     /** 
39.      * 是否显示返回按钮 
40.      * 
41.      * @param backwardResid 文字 
42.      * @param show          true则显示 
43.      */  
44.     protected void showBackwardView(int backwardResid, boolean show) {  
45.         if (mBackwardbButton != null) {  
46.             if (show) {  
47.                 mBackwardbButton.setText(backwardResid);  
48.                 mBackwardbButton.setVisibility(View.VISIBLE);  
49.             } else {  
50.                 mBackwardbButton.setVisibility(View.INVISIBLE);  
51.             }  
52.         } // else ignored  
53.     }  
54.   
55.     /** 
56.      * 提供是否显示提交按钮 
57.      * 
58.      * @param forwardResId 文字 
59.      * @param show         true则显示 
60.      */  
61.     protected void showForwardView(int forwardResId, boolean show) {  
62.         if (mForwardButton != null) {  
63.             if (show) {  
64.                 mForwardButton.setVisibility(View.VISIBLE);  
65.                 mForwardButton.setText(forwardResId);  
66.             } else {  
67.                 mForwardButton.setVisibility(View.INVISIBLE);  
68.             }  
69.         } // else ignored  
70.     }  
71.   
72.     /** 
73.      * 返回按钮点击后触发 
74.      * @param backwardView 
75.      */  
76.     protected void onBackward(View backwardView) {  
77.         Toast.makeText(this, "点击返回，可在此处调用finish()", Toast.LENGTH_SHORT).show();  
78.         //finish();  
79.     }  
80.   
81.     /** 
82.      * 提交按钮点击后触发 
83.      * 
84.      * @param forwardView 
85.      */  
86.     protected void onForward(View forwardView) {  
87.         Toast.makeText(this, "我是提交按钮", Toast.LENGTH_SHORT).show();  
88.     }  
89.   
90.     //设置标题内容  
91.     @Override  
92.     public void setTitle(int titleId) {  
93.         mTitleTextView.setText(titleId);  
94.     }  
95.   
96.     //设置标题内容  
97.     @Override  
98.     public void setTitle(CharSequence title) {  
99.         mTitleTextView.setText(title);  
100.     }  
101.   
102.     //设置标题文字颜色  
103.     @Override  
104.     public void setTitleColor(int textColor) {  
105.         mTitleTextView.setTextColor(textColor);  
106.     }  
107.   
108.     //取出FrameLayout并调用父类removeAllViews()方法  
109.     @Override  
110.     public void setContentView(int layoutResID) {  
111.         mContentLayout.removeAllViews();  
112.         View.inflate(this, layoutResID, mContentLayout);  
113.         onContentChanged();  
114.     }  
115.   
116.     @Override  
117.     public void setContentView(View view) {  
118.         mContentLayout.removeAllViews();  
119.         mContentLayout.addView(view);  
120.         onContentChanged();  
121.     }  
122.   
123.     /* (non-Javadoc) 
124.      * @see android.app.Activity#setContentView(android.view.View, android.view.ViewGroup.LayoutParams) 
125.      */  
126.     @Override  
127.     public void setContentView(View view, ViewGroup.LayoutParams params) {  
128.         mContentLayout.removeAllViews();  
129.         mContentLayout.addView(view, params);  
130.         onContentChanged();  
131.     }  
132.   
133.     /* (non-Javadoc) 
134.      * @see android.view.View.OnClickListener#onClick(android.view.View) 
135.      * 按钮点击调用的方法 
136.      */  
137.     @Override  
138.     public void onClick(View v) {  
139.   
140.         switch (v.getId()) {  
141.             case R.id.button_backward:  
142.                 onBackward(v);  
143.                 break;  
144.   
145.             case R.id.button_forward:  
146.                 onForward(v);  
147.                 break;  
148.   
149.             default:  
150.                 break;  
151.         }  
152.     }  
153. }  

4. MainActivity中调用时直接 extends TitleActivity，使用在TitleActivity中定义的方法

[java]  view plain  copy

1. package com.bwie.title;  
2. import android.os.Bundle;  
3. /** 
4.  * MainActivity中调用时直接 extends TitleActivity，使用在TitleActivity中定义的方法 
5.  */  
6. public class MainActivity extends TitleActivity {  
7.   
8.     @Override  
9.     protected void onCreate(Bundle savedInstanceState) {  
10.         super.onCreate(savedInstanceState);  
11.         setContentView(R.layout.activity_main);  
12.   
13.         setTitle("标题栏");  
14.         showBackwardView(R.string.text_back,true);  
15.         showForwardView(R.string.text_forward,true);  
16.     }  
17. }  

5. 在string.xml中写入以下代码：

[java]  view plain  copy

1. <resources>  
2.     <string name="text_back">返回</string>  
3.     <string name="text_forward">提交</string>  
4. </resources>  

[java]  view plain  copy

1.   

6.布局中需要引用的左箭头图片

		图片