Android工具导航栏

最新推荐文章于 2024-08-05 03:05:14 发布

钝忆思梦

最新推荐文章于 2024-08-05 03:05:14 发布

阅读量2.9k

点赞数

分类专栏： Android 文章标签： Android 导航工具栏 ActivityGroup FragmentActivity

本文链接：https://blog.csdn.net/pfe_Nova/article/details/38645515

版权

Android 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

今天继续Android学习之旅之导航栏的记录。本文采用了两种方式实现：1.用ActivityGroup和DataGrid相结合实现；2.采用继承FragmentActivity和RadioButton相组合实现；

1.用ActivityGroup和DataGrid相结合实现

首先是用ActivityGroup和DataGrid相结合实现，思想是在一个页面上将子页面与导航栏上下布局，每次点击时跳转到指定的页面，在上面显示。

主页面的布局activity_main.xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" >

        <LinearLayout
            android:id="@+id/content"
            android:layout_width="fill_parent"
            android:layout_height="match_parent"
            android:orientation="vertical" >
        </LinearLayout>

        <GridView
            android:id="@+id/gridView"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:fadingEdge="vertical"
            android:fadingEdgeLength="5px" >
        </GridView>
    </RelativeLayout>

</LinearLayout>

content中显示需要跳转的页面，gridView专门显示导航栏。
此例中四个要跳转的页面都很简单，只是显示一张图片，布局都一样，所以共用一个布局文件（实际应用时一般都是各不相同，第二个例子就是各自用各自的布局文件），布局文件view_layout.xml代码如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
    <ImageView
        android:id="@+id/imageView_Back"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:scaleType="fitXY"/>

</LinearLayout>

下面要做的就剩两步了，一是加载gridView，一个是触发点击事件跳转页面。加载gridView的方法如下（不熟悉没关系，可以参考 Android之GridView）：
先定义了一个图片适配器类（也可以直接用SimpleAdapter 类），继承自BaseAdapter：

package com.example.activitygroup0817;

import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ImageView;

public class ImageAdapter extends BaseAdapter {
	private Context context = null;
	private ImageView[] menuImg = null;
	private int selectedMenuImg;

	public ImageAdapter(Context context, int imgIds[], int width, int height,
			int selectedMenuImg) {
		this.context = context;
		this.selectedMenuImg = selectedMenuImg;
		this.menuImg = new ImageView[imgIds.length];
		for (int i = 0; i < imgIds.length; i++) {
			this.menuImg[i] = new ImageView(this.context);
			//定义布局参数
			this.menuImg[i].setLayoutParams(new GridView.LayoutParams(width,
					height));
			//不调整边界
			this.menuImg[i].setAdjustViewBounds(false);
			this.menuImg[i].setPadding(3, 3, 3, 3);
			this.menuImg[i].setImageResource(imgIds[i]);
		}
	}

	@Override
	public int getCount() {
		return this.menuImg.length;
	}

	@Override
	public Object getItem(int position) {
		return this.menuImg[position];
	}

	@Override
	public long getItemId(int position) {
		// TODO Auto-generated method stub
		return 0;
	}

	@Override
	public View getView(int position, View convertView, ViewGroup parent) {
		ImageView imgView = null;
		if (convertView == null) {
			imgView = this.menuImg[position];
		} else {
			imgView = (ImageView) convertView;
		}
		return imgView;
	}

	public void setFocus(int selId) {
		for (int i = 0; i < this.menuImg.length; i++) {
			if (i != selId) {
				//取消背景图片
				this.menuImg[i].setBackgroundResource(0);
			}
		}
		this.menuImg[selId].setBackgroundResource(this.selectedMenuImg);
	}
}

然后填充GridView：

private GridView gridView = null;
private ImageAdapter menu = null;
private LinearLayout content = null;
private int menu_img[] = new int[] { R.drawable.home_select,
		R.drawable.note_select, R.drawable.music, R.drawable.msg };
private int width = 0;
private int height = 0;
private Intent intent = null;

@Override
protected void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
	super.requestWindowFeature(Window.FEATURE_NO_TITLE);
	setContentView(R.layout.activity_main);
	this.gridView = (GridView) super.findViewById(R.id.gridView);
	this.content = (LinearLayout) super.findViewById(R.id.content);
	this.gridView.setNumColumns(this.menu_img.length);
	this.gridView.setSelector(new ColorDrawable(Color.TRANSPARENT));
	this.gridView.setGravity(Gravity.CENTER);
	this.gridView.setVerticalSpacing(0);
	this.gridView.setBackgroundColor(Color.DKGRAY);
	this.width = super.getWindowManager().getDefaultDisplay().getWidth()
			/ this.menu_img.length;
	this.height = super.getWindowManager().getDefaultDisplay().getHeight() / 8;
	this.menu = new ImageAdapter(this, this.menu_img, this.width,
			this.height, R.drawable.menu_back);
	this.gridView.setAdapter(this.menu);
	//this.switchActivity(0);
	//this.gridView.setOnItemClickListener(new OnItemClickListenerImpl());
}

至此显示是好了，下面就是触发点击事件了，关键代码如下：

private class OnItemClickListenerImpl implements OnItemClickListener {

	@Override
	public void onItemClick(AdapterView<?> parent, View view, int position,
			long id) {
		MainActivity.this.switchActivity(position);

	}

}

private void switchActivity(int id) {
	this.menu.setFocus(id);
	this.content.removeAllViews();
	switch (id) {
	case 0:
		this.intent = new Intent(MainActivity.this, HomeActivity.class);
		break;
	case 1:
		this.intent = new Intent(MainActivity.this, NoteActivity.class);
		break;
	case 2:
		this.intent = new Intent(MainActivity.this, MusicActivity.class);
		break;
	case 3:
		this.intent = new Intent(MainActivity.this, MsgActivity.class);
		break;
	case 4:
		this.exitDialog();
		break;
	default:
		Toast.makeText(MainActivity.this, "switchActivity的id不在范围内",
				Toast.LENGTH_LONG).show();
		break;
	}
	this.intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
	Window subActivity = this.getLocalActivityManager().startActivity(
			"subActivity", this.intent);
	this.content.addView(subActivity.getDecorView(),
			LayoutParams.FILL_PARENT);
}

先根据点击的项获得对应的编号，然后分支判断，跳转到指定的页面，关键语句是最后两句：

Window subActivity = this.getLocalActivityManager().startActivity(
		"subActivity", this.intent);
this.content.addView(subActivity.getDecorView(),
		LayoutParams.FILL_PARENT);

这个控制显示在MainActivity这个页面上。
至此框架完成，其他要注意的细节：这边在选中时添加了个背景图片以便醒目；各个页面的图片显示问题，我这边采用了跟手机一样像素的图片才正好铺满屏幕，开始弄的图片像素太低，就只在屏幕的左上边显示；图标和最好采用无背景的图片（相对背景为白色的，透明更美观）；只要涉及到多页面就要记得在AndroidManifest.xml中配置进去；
运行截图如下：

2.采用继承FragmentActivity和RadioButton相组合实现

该方法的关键之处是FragmentActivity的getSupportFragmentManager方法，通过它来控制Fragment布局页面的显示和隐藏。主界面采用相对布局，本例有四个Fragment页面和一组RadioButton，代码如下：

<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="com.example.drawer0817.MainActivity" >

    <fragment
        android:id="@+id/farment_home"
        android:layout_width="fill_parent"
        android:layout_height="match_parent"
        class="com.example.drawer0817.HomeFrament" />

    <fragment
        android:id="@+id/farment_note"
        android:layout_width="fill_parent"
        android:layout_height="match_parent"
        class="com.example.drawer0817.NoteFrament" />

    <fragment
        android:id="@+id/farment_music"
        android:layout_width="fill_parent"
        android:layout_height="match_parent"
        class="com.example.drawer0817.MusicFrament" />

    <fragment
        android:id="@+id/farment_msg"
        android:layout_width="fill_parent"
        android:layout_height="match_parent"
        class="com.example.drawer0817.MsgFrament" />

    <RadioGroup
        android:layout_width="match_parent"
        android:layout_height="55dp"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal" >

        <RadioButton
            android:layout_width="0dp"
            android:layout_height="55dp"
            android:layout_weight="1"
            android:background="@drawable/selector_common"
            android:button="@null"
            android:drawableTop="@drawable/selector_home"
            android:onClick="homeClick" />

        <RadioButton
            android:layout_width="0dp"
            android:layout_height="55dp"
            android:layout_weight="1"
            android:background="@drawable/selector_common"
            android:button="@null"
            android:drawableTop="@drawable/selector_note"
            android:onClick="noteClick" />

        <RadioButton
            android:layout_width="0dp"
            android:layout_height="55dp"
            android:layout_weight="1"
            android:background="@drawable/selector_common"
            android:button="@null"
            android:drawableTop="@drawable/music"
            android:onClick="musicClick" />

        <RadioButton
            android:layout_width="0dp"
            android:layout_height="55dp"
            android:layout_weight="1"
            android:background="@drawable/selector_common"
            android:button="@null"
            android:drawableTop="@drawable/msg"
            android:onClick="msgClick" />
    </RadioGroup>

</RelativeLayout>

可以看到四个fragment是写在一起的，实际运行时跟据需要显示其中一个。主界面后台代码主要干两件事，收集fragment和根据点击事件控制fragment的显示和隐藏，这个只要看看代码就能明白啥意思了：

package com.example.drawer0817;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.view.View;
import android.view.Window;

public class MainActivity extends FragmentActivity {
	private Fragment[] fragments;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		requestWindowFeature(Window.FEATURE_NO_TITLE);
		setContentView(R.layout.activity_main);

		fragments = new Fragment[4];
		fragments[0] = getSupportFragmentManager().findFragmentById(
				R.id.farment_home);
		fragments[1] = getSupportFragmentManager().findFragmentById(
				R.id.farment_note);
		fragments[2] = getSupportFragmentManager().findFragmentById(
				R.id.farment_music);
		fragments[3] = getSupportFragmentManager().findFragmentById(
				R.id.farment_msg);
		getSupportFragmentManager().beginTransaction().hide(fragments[1])
				.hide(fragments[2]).hide(fragments[3]).show(fragments[0])
				.commit();

	}

	public void homeClick(View view) {
		getSupportFragmentManager().beginTransaction().hide(fragments[1])
				.hide(fragments[2]).hide(fragments[3]).show(fragments[0])
				.commit();
	}

	public void noteClick(View view) {
		getSupportFragmentManager().beginTransaction().hide(fragments[0])
				.hide(fragments[2]).hide(fragments[3]).show(fragments[1])
				.commit();
	}

	public void musicClick(View view) {
		getSupportFragmentManager().beginTransaction().hide(fragments[0])
				.hide(fragments[1]).hide(fragments[3]).show(fragments[2])
				.commit();
	}

	public void msgClick(View view) {
		getSupportFragmentManager().beginTransaction().hide(fragments[0])
				.hide(fragments[1]).hide(fragments[2]).show(fragments[3])
				.commit();
	}
}

然后fragment布局页面代码如下，为了跟第一个例子有所区分，这边四个页面没有合在一起（可以合在一起），这边以第一个为例，其他几个跟这个一模一样，就不写了：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <ImageView
        android:id="@+id/imageView_Back"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:scaleType="fitXY"/>
</LinearLayout>

相对应的后台代码如下：

package com.example.drawer0817;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

public class HomeFrament extends Fragment {
	ImageView imageView=null;
	public HomeFrament() {
	}

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		View rootView = inflater.inflate(R.layout.farment_home, container,
				false);
		imageView=(ImageView)rootView.findViewById(R.id.imageView_Back);
		imageView.setImageResource(R.drawable.home_back);
		return rootView;
	}
}

至此框架完成，这个例子也是有可圈可点的地方，关键看drawable这个文件夹。通过selector控制按钮的背景色随着按钮的状态而变化，可分别设置未点击时和被点击时的样式；另外可以根据shape控制边框、圆角、阴影等，具体可自行搜索学习；
项目运行截图跟上例类似：