Android工具导航栏

        今天继续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]);}}@Overridepublic int getCount() {return this.menuImg.length;}@Overridepublic Object getItem(int position) {return this.menuImg[position];}@Overridepublic long getItemId(int position) {// TODO Auto-generated method stubreturn 0;}@Overridepublic 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;@Overrideprotected 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 {@Overridepublic 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;@Overrideprotected 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() {}@Overridepublic 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控制边框、圆角、阴影等，具体可自行搜索学习；
        项目运行截图跟上例类似：

        后记，看这截图，感觉有点样子了，至少比前面写的例子好多了，不过花的时间也不少，整整一天就弄了这两个例子，些许欣慰。

        至此全部完成，只是个人的一些实践，对自己是一个记录，同时希望也能对别人有些帮助，如果有什么错误，还望不吝指出，共同进步，转载请保留原文地址。

        项目源码下载