当前位置: 代码迷 >> Android >> android 通用菜单栏实现(1)
  详细解决方案

android 通用菜单栏实现(1)

热度:21   发布时间:2016-04-28 05:13:50.0
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:如果各位有更好的实现方式,可以给我留言,在此先感谢各位。




  相关解决方案