无网不进  
软硬件开发
android 通用菜单栏实现

一、前言介绍

        直奔主题啦，很多Android app都有菜单栏，菜单栏除了背景图片、图标的不同外，布局基本一致。大致可以分为三部分：菜单栏的左侧区域、菜单栏中间区域、菜单栏右侧区域。

为了考虑代码的重用性，本文将给大家讲解通用菜单栏的实现方式。示例中的代码，大家稍微变通，可以满足大部分软件开发需要。

二、示例截图

        我的一贯习惯，有图有真相。下面先看下通用菜单栏的截图：

三、实现介绍

3.1菜单栏布局文件：title_top_view.xml 

 

[html] view plain copy
 
  1. <span style="font-size:14px;"><?xml version="1.0" encoding="utf-8"?>  
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent"  
  5.     android:background="#000"   
  6.     >  
  7.       
  8.     <RelativeLayout android:id="@+id/title_bar"  
  9.         android:layout_width="fill_parent"  
  10.         android:layout_height="wrap_content"  
  11.         android:background="@drawable/title_bg">  
  12.           
  13.         <!-- 左侧区域 -->  
  14.         <ImageButton android:id="@+id/left_btn"  
  15.             android:layout_width="wrap_content"  
  16.             android:layout_height="wrap_content"  
  17.             android:layout_alignParentLeft="true"  
  18.             android:layout_centerVertical="true"  
  19.             android:layout_marginLeft="5dip"  
  20.             android:background="@drawable/select_back"/>  
  21.           
  22.         <!-- 中间区域 -->  
  23.         <TextView android:id="@+id/mid_txt"  
  24.             android:layout_width="wrap_content"  
  25.             android:layout_height="wrap_content"  
  26.             android:layout_centerInParent="true"  
  27.             android:singleLine="true"  
  28.             android:ellipsize="end"  
  29.             android:layout_marginLeft="60dip"  
  30.             android:layout_marginRight="60dip"  
  31.             />  
  32.           
  33.         <!-- 右侧区域 -->  
  34.          <ImageButton android:id="@+id/right_btn"  
  35.             android:layout_width="wrap_content"  
  36.             android:layout_height="wrap_content"  
  37.             android:layout_alignParentRight="true"  
  38.             android:layout_marginRight="5dip"  
  39.             android:layout_centerVertical="true"  
  40.             android:background="@drawable/selector_setting"/>  
  41.     </RelativeLayout>  
  42.   
  43. </RelativeLayout>  
  44. </span>  

 

3.2 MainActivity页面布局文件：activity_main.xml

 

 

[html] view plain copy
 
  1. <span style="font-size:14px;"><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="match_parent"  
  5.     tools:context=".MainActivity"   
  6.     >  
  7.   
  8.     <!-- 通过该标签导入菜单栏 -->  
  9.     <include   
  10.         android:id="@+id/title_bar"  
  11.         android:layout_width="fill_parent"  
  12.         android:layout_height="wrap_content"  
  13.         layout="@layout/title_top_view"/>  
  14.       
  15.     <TextView  
  16.         android:layout_below="@id/title_bar"  
  17.         android:layout_width="wrap_content"  
  18.         android:layout_height="wrap_content"  
  19.         android:text="@string/hello_world" />  
  20.   
  21. </RelativeLayout>  
  22. </span>  



 

3.3java代码部分

        提到java代码部分，先看通用菜单栏代码设计类图，如下：

        类图说明：本Demo将菜单栏的左侧区域（mLeftView）、中间区域（mMidView）、右侧区域（mRightView）成员声明为protected，有违反代码封装性，各位可以下载Demo自行修改为private，并提供对外接口。本Demo主要用意方便子类访问、提供访问速度。

        BaseActivity.java 代码如下：

 

[java] view plain copy
 
  1. <span style="font-size:14px;">package com.example.titledemo;  
  2.   
  3. import android.app.Activity;  
  4. import android.os.Bundle;  
  5. import android.view.View;  
  6. import android.view.View.OnClickListener;  
  7. import android.view.Window;  
  8. import android.widget.ImageView;  
  9. import android.widget.TextView;  
  10. import android.widget.Toast;  
  11.   
  12. public abstract class BaseActivity extends Activity implements OnClickListener {  
  13.   
  14.     protected View mTitleView;  
  15.     protected ImageView mLeftView;// 左侧按钮  
  16.     protected TextView mMidView;// 中间文本  
  17.     protected ImageView mRightView;// 右侧按钮  
  18.   
  19.     @Override  
  20.     protected void onCreate(Bundle savedInstanceState) {  
  21.         // TODO Auto-generated method stub  
  22.         super.onCreate(savedInstanceState);  
  23.   
  24.         // 设置标题栏  
  25.         requestWindowFeature(Window.FEATURE_NO_TITLE);  
  26.   
  27.         initView(savedInstanceState);  
  28.     }  
  29.   
  30.     @Override  
  31.     public void onClick(View v) {  
  32.         // TODO Auto-generated method stub  
  33.         switch (v.getId()) {  
  34.         case R.id.left_btn: {  
  35.             onClickLeftBtn();  
  36.             break;  
  37.         }  
  38.         case R.id.right_btn: {  
  39.             onClickRigthBtn();  
  40.             break;  
  41.         }  
  42.         default: {  
  43.             break;  
  44.         }  
  45.         }  
  46.     }  
  47.   
  48.     /** 
  49.      * 初始化菜单栏 
  50.      */  
  51.     protected void initTitleBar() {  
  52.         mTitleView = findViewById(R.id.title_bar);  
  53.         if (mTitleView != null) {  
  54.             mTitleView.setVisibility(View.VISIBLE);  
  55.             mLeftView = (ImageView) findViewById(R.id.left_btn);  
  56.             mLeftView.setOnClickListener(this);  
  57.             mMidView = (TextView) findViewById(R.id.mid_txt);  
  58.             mRightView = (ImageView) findViewById(R.id.right_btn);  
  59.             mRightView.setOnClickListener(this);  
  60.         }  
  61.     }  
  62.   
  63.     /** 
  64.      * 设置中间文本 
  65.      */  
  66.     protected void setMidTxt(String strTxt) {  
  67.         if (mMidView != null) {  
  68.             mMidView.setText(strTxt);  
  69.         }  
  70.     }  
  71.   
  72.     /** 
  73.      * 初始化页面 
  74.      * @param savedInstanceState 
  75.      */  
  76.     protected abstract void initView(Bundle savedInstanceState);  
  77.       
  78.     /** 
  79.      * 单击菜单栏左侧按钮，响应处理函数，子类可继承实现自己的处理方式 
  80.      */  
  81.     protected abstract void onClickLeftBtn();  
  82.     protected abstract void onClickRigthBtn();  
  83. }  
  84. </span>  


        MainActivity.java 代码如下：

 

 

[java] view plain copy
 
  1. <span style="font-size:14px;">package com.example.titledemo;  
  2.   
  3. import android.os.Bundle;  
  4. import android.view.View;  
  5. import android.view.View.OnClickListener;  
  6. import android.view.Window;  
  7. import android.widget.Toast;  
  8.   
  9. public class MainActivity extends BaseActivity {  
  10.   
  11.     @Override  
  12.     protected void onCreate(Bundle savedInstanceState) {  
  13.         super.onCreate(savedInstanceState);  
  14.     }  
  15.       
  16.       
  17.     @Override  
  18.     protected void initView(Bundle savedInstanceState) {  
  19.         // TODO Auto-generated method stub  
  20.           
  21.         setContentView(R.layout.activity_main);  
  22.           
  23.         //设置菜单栏  
  24.         initTitleBar();  
  25.           
  26.         //设置菜单中间文本值  
  27.         setMidTxt(getResources().getString(R.string.app_name));  
  28.     }  
  29.   
  30.   
  31.     @Override  
  32.     protected void onClickLeftBtn() {  
  33.         // TODO Auto-generated method stub  
  34.         Toast.makeText(this, "点击了菜单左侧按钮", Toast.LENGTH_SHORT).show();  
  35.     }  
  36.   
  37.   
  38.     @Override  
  39.     protected void onClickRigthBtn() {  
  40.         // TODO Auto-generated method stub  
  41.         Toast.makeText(this, "点击了菜单右侧按钮", Toast.LENGTH_SHORT).show();  
  42.     }  
  43.   
  44. }  
  45. </span>  



 

四、示例下载

        以下为Demo示例代码下载路径，http://download.csdn.net/detail/improveyourself/7505935

ps：如果各位有更好的实现方式，可以给我留言，在此先感谢各位。

 

posted on 2017-12-18 17:37  无网不进  阅读(244)  评论(0)    收藏  举报
 
博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3