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

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

思路及实现步骤


1.定义标题栏布局

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

3.在TitleActivity中实现标题栏以下内容切换


  • 首先定义标题栏

[html] view plain copy
 print?
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:id="@+id/layout_titlebar"  
  4.     android:layout_width="match_parent"  
  5.     android:layout_height="52dp"  
  6.     android:background="#ed4255" >  
  7.   
  8.     <TextView  
  9.         android:id="@+id/text_title"  
  10.         android:layout_width="match_parent"  
  11.         android:layout_height="match_parent"  
  12.         android:ellipsize="marquee"  
  13.         android:gravity="center_horizontal|center"  
  14.         android:singleLine="true"  
  15.         android:text="标题栏"  
  16.         android:textColor="#ffffffff"  
  17.         android:textSize="20dp" />  
  18.   
  19.     <Button  
  20.         android:id="@+id/button_backward"  
  21.         android:layout_width="60dp"  
  22.         android:layout_height="match_parent"  
  23.         android:background="@drawable/title_button_selector"  
  24.         android:drawableLeft="@drawable/back_arrow"  
  25.         android:drawablePadding="6dp"  
  26.         android:ellipsize="end"  
  27.         android:gravity="center"  
  28.         android:onClick="onClick"  
  29.         android:paddingLeft="5dp"  
  30.         android:singleLine="true"  
  31.         android:text="返回"  
  32.         android:textColor="#ffffffff"  
  33.         android:textSize="18dp"  
  34.         android:visibility="invisible" />  
  35.   
  36.     <Button  
  37.         android:id="@+id/button_forward"  
  38.         android:layout_width="60dp"  
  39.         android:layout_height="match_parent"  
  40.         android:layout_alignParentRight="true"  
  41.         android:background="@drawable/title_button_selector"  
  42.         android:drawablePadding="6dp"  
  43.         android:ellipsize="end"  
  44.         android:gravity="center"  
  45.         android:onClick="onClick"  
  46.         android:paddingLeft="5dp"  
  47.         android:singleLine="true"  
  48.         android:text="提交"  
  49.         android:textColor="#ffffffff"  
  50.         android:textSize="18dp"  
  51.         android:visibility="invisible" />  
  52.   
  53. </RelativeLayout>  


  • 定义控制标题栏按钮和标题栏以下内容的布局

[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="match_parent"  
  4.     android:layout_height="match_parent"  
  5.     android:orientation="vertical" >  
  6.   
  7.     <!-- Title -->  
  8.   
  9.     <include layout="@layout/layout_titlebar" />  
  10.   
  11.     <FrameLayout  
  12.         android:id="@+id/layout_content"  
  13.         android:layout_width="match_parent"  
  14.         android:layout_height="match_parent"  
  15.         android:background="#fff" >  
  16.     </FrameLayout>  
  17.   
  18. </LinearLayout>  

注:此处使用 <include> 标签引入标题栏,且下方有定义一个空的FrameLayout的布局。


  • 定义TitleActivity控制按钮及布局

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


  • MainActivity中调用时直接 extends TitleActivity 使用之前在TitleActivity中定义的方法
  • Android项目中自定义顶部标题栏