首页 > 代码库 > android 通用菜单栏实现(一)

android 通用菜单栏实现(一)

一、前言介绍

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

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

二、示例截图

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


三、实现介绍

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

<span style="font-size:14px;"><?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#000" 
    >
    
    <RelativeLayout android:id="@+id/title_bar"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/title_bg">
        
        <!-- 左侧区域 -->
        <ImageButton android:id="@+id/left_btn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true"
            android:layout_marginLeft="5dip"
            android:background="@drawable/select_back"/>
        
        <!-- 中间区域 -->
        <TextView android:id="@+id/mid_txt"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:singleLine="true"
            android:ellipsize="end"
            android:layout_marginLeft="60dip"
            android:layout_marginRight="60dip"
            />
        
        <!-- 右侧区域 -->
         <ImageButton android:id="@+id/right_btn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_marginRight="5dip"
            android:layout_centerVertical="true"
            android:background="@drawable/selector_setting"/>
    </RelativeLayout>

</RelativeLayout>
</span>

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

<span style="font-size:14px;"><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" 
    >

    <!-- 通过该标签导入菜单栏 -->
    <include 
        android:id="@+id/title_bar"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        layout="@layout/title_top_view"/>
    
    <TextView
        android:layout_below="@id/title_bar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world" />

</RelativeLayout>
</span>


3.3java代码部分

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


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

        BaseActivity.java 代码如下:

<span style="font-size:14px;">package com.example.titledemo;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.Window;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;

public abstract class BaseActivity extends Activity implements OnClickListener {

	protected View mTitleView;
	protected ImageView mLeftView;// 左侧按钮
	protected TextView mMidView;// 中间文本
	protected ImageView mRightView;// 右侧按钮

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);

		// 设置标题栏
		requestWindowFeature(Window.FEATURE_NO_TITLE);

		initView(savedInstanceState);
	}

	@Override
	public void onClick(View v) {
		// TODO Auto-generated method stub
		switch (v.getId()) {
		case R.id.left_btn: {
			onClickLeftBtn();
			break;
		}
		case R.id.right_btn: {
			onClickRigthBtn();
			break;
		}
		default: {
			break;
		}
		}
	}

	/**
	 * 初始化菜单栏
	 */
	protected void initTitleBar() {
		mTitleView = findViewById(R.id.title_bar);
		if (mTitleView != null) {
			mTitleView.setVisibility(View.VISIBLE);
			mLeftView = (ImageView) findViewById(R.id.left_btn);
			mLeftView.setOnClickListener(this);
			mMidView = (TextView) findViewById(R.id.mid_txt);
			mRightView = (ImageView) findViewById(R.id.right_btn);
			mRightView.setOnClickListener(this);
		}
	}

	/**
	 * 设置中间文本
	 */
	protected void setMidTxt(String strTxt) {
		if (mMidView != null) {
			mMidView.setText(strTxt);
		}
	}

	/**
	 * 初始化页面
	 * @param savedInstanceState
	 */
	protected abstract void initView(Bundle savedInstanceState);
	
	/**
	 * 单击菜单栏左侧按钮,响应处理函数,子类可继承实现自己的处理方式
	 */
	protected abstract void onClickLeftBtn();
	protected abstract void onClickRigthBtn();
}
</span>

        MainActivity.java 代码如下:

<span style="font-size:14px;">package com.example.titledemo;

import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.Window;
import android.widget.Toast;

public class MainActivity extends BaseActivity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
	}
	
	
	@Override
	protected void initView(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		
		setContentView(R.layout.activity_main);
		
		//设置菜单栏
		initTitleBar();
		
		//设置菜单中间文本值
		setMidTxt(getResources().getString(R.string.app_name));
	}


	@Override
	protected void onClickLeftBtn() {
		// TODO Auto-generated method stub
		Toast.makeText(this, "点击了菜单左侧按钮", Toast.LENGTH_SHORT).show();
	}


	@Override
	protected void onClickRigthBtn() {
		// TODO Auto-generated method stub
		Toast.makeText(this, "点击了菜单右侧按钮", Toast.LENGTH_SHORT).show();
	}

}
</span>


四、示例下载

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

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