Android入门第十五篇之ActivityGroup + GridView 实现Tab分页标签

本文来自 http://blog.csdn.net/hellogv/ ，引用必须注明出处！

      很多客户端软件和浏览器软件都喜欢用 Tab 分页标签来搭建界面框架。读者也许会马上想到使用 TabHost 与 TabActivity 的组合，其实最常用的不是它们，而是由 GridView 与 ActivityGroup 的组合。每当用户在 GridView 选中一项， ActivityGroup 就把该项对应的 Activity 的 Window 作为 View 添加到 ActivityGroup 所指定的容器 (LinearLayout) 中。

接下来贴出本例运行的效果图 ：

 

ImageAdapter 是本实例的关键之一，它继承于 BaseAdapter ，并加入一些自定义的方法。ImageAdapter的源码如下：

 package  com.ActivityGroupDemo;

 import  android.content.Context;
 import  android.graphics.drawable.ColorDrawable;
 import  android.view.View;
 import  android.view.ViewGroup;
 import  android.widget.BaseAdapter;
 import  android.widget.GridView;
 import  android.widget.ImageView;
 /**
  *
  * @author GV
  *
  */
 public   class  ImageAdapter  extends  BaseAdapter {
     private  Context mContext;
     private  ImageView[] imgItems;
     private   int  selResId;
     public  ImageAdapter(Context c, int [] picIds, int  width, int  height, int  selResId) {
         mContext = c;
         this .selResId=selResId;
         imgItems=new  ImageView[picIds.length];
         for ( int  i= 0 ;i<picIds.length;i++)
         {
             imgItems[i] = new  ImageView(mContext);
             imgItems[i].setLayoutParams(new  GridView.LayoutParams(width, height)); //设置ImageView宽高
             imgItems[i].setAdjustViewBounds(false );
             //imgItems[i].setScaleType(ImageView.ScaleType.CENTER_CROP);
             imgItems[i].setPadding(2 ,  2 ,  2 ,  2 );
             imgItems[i].setImageResource(picIds[i]);
         }
     }

     public   int  getCount() {
         return  imgItems.length;
     }

     public  Object getItem( int  position) {
         return  position;
     }

     public   long  getItemId( int  position) {
         return  position;
     }

     /**
      * 设置选中的效果
      */
     public   void  SetFocus( int  index)
     {
         for ( int  i= 0 ;i<imgItems.length;i++)
         {
             if (i!=index)
             {
                 imgItems[i].setBackgroundResource(0 ); //恢复未选中的样式
             }
         }
         imgItems[index].setBackgroundResource(selResId);//设置选中的样式
     }

     public  View getView( int  position, View convertView, ViewGroup parent) {
         ImageView imageView;
         if  (convertView ==  null ) {
             imageView=imgItems[position];
         } else  {
             imageView = (ImageView) convertView;
         }
         return  imageView;
     }
 }

 SetFocus(int)这个方法是个关键点，即实现选中的效果。例如有 ABCD4 个 Item ，其中 C 被选中了，那么除 C 以外的 Item 都被设置为未被选中的样式，而 C 则设置为选中的样式。

接下来就开始写主Activity，主Activity包含GridView 控件，名为 gvTopBar ，有 2 点是需要注意一下的。

• SetNumColumns() ：必须要使用 setNumColumns 来设置列数，因为这个 GridView 只有一行，即所有的 Item 都在同一行， Item 数量即为列数。
• setSelector(new ColorDrawable(Color.TRANSPARENT)) ：把系统默认选中的背景色透明化，因为我们已经在 BaseAdapter 中加入了 SetFocus() 来改变选中的样式。  

 package  com.ActivityGroupDemo;

 import  android.app.Activity;
 import  android.app.ActivityGroup;
 import  android.content.BroadcastReceiver;
 import  android.content.Context;
 import  android.content.Intent;
 import  android.content.IntentFilter;
 import  android.graphics.Color;
 import  android.graphics.drawable.ColorDrawable;
 import  android.os.Bundle;
 import  android.util.Log;
 import  android.view.Gravity;
 import  android.view.View;
 import  android.view.Window;
 import  android.view.ViewGroup.LayoutParams;
 import  android.widget.AdapterView;
 import  android.widget.GridView;
 import  android.widget.LinearLayout;
 import  android.widget.Toast;
 import  android.widget.AdapterView.OnItemClickListener;
 /**
  *
  * @author GV
  *
  */
 public   class  ActivityGroupDemo  extends  ActivityGroup {

     private  GridView gvTopBar;
     private  ImageAdapter topImgAdapter;
     public  LinearLayout container; // 装载sub Activity的容器

     /** 顶部按钮图片 **/
     int [] topbar_image_array = { R.drawable.topbar_home,
             R.drawable.topbar_user, R.drawable.topbar_shoppingcart,
             R.drawable.topbar_note };

     @Override
     public   void  onCreate(Bundle savedInstanceState) {
         super .onCreate(savedInstanceState);
         setContentView(R.layout.main);
         gvTopBar = (GridView) this .findViewById(R.id.gvTopBar);
         gvTopBar.setNumColumns(topbar_image_array.length);// 设置每行列数
         gvTopBar.setSelector(new  ColorDrawable(Color.TRANSPARENT)); // 选中的时候为透明色
         gvTopBar.setGravity(Gravity.CENTER);// 位置居中
         gvTopBar.setVerticalSpacing(0 ); // 垂直间隔
         int  width =  this .getWindowManager().getDefaultDisplay().getWidth()
                 / topbar_image_array.length;
         topImgAdapter = new  ImageAdapter( this , topbar_image_array, width,  48 ,
                 R.drawable.topbar_itemselector);
         gvTopBar.setAdapter(topImgAdapter);// 设置菜单Adapter
         gvTopBar.setOnItemClickListener(new  ItemClickEvent()); // 项目点击事件
         container = (LinearLayout) findViewById(R.id.Container);
         SwitchActivity(0 ); //默认打开第0页
     }

     class  ItemClickEvent  implements  OnItemClickListener {

         public   void  onItemClick(AdapterView<?> arg0, View arg1,  int  arg2,
                 long  arg3) {
             SwitchActivity(arg2);
         }
     }
     /**
      * 根据ID打开指定的Activity
      * @param id GridView选中项的序号
      */
     void  SwitchActivity( int  id)
     {
         topImgAdapter.SetFocus(id);//选中项获得高亮
         container.removeAllViews();//必须先清除容器中所有的View
         Intent intent =null ;
         if  (id ==  0  || id ==  2 ) {
             intent = new  Intent(ActivityGroupDemo. this , ActivityA. class );
         } else   if  (id ==  1  || id ==  3 ) {
             intent = new  Intent(ActivityGroupDemo. this , ActivityB. class );
         }
         intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
         //Activity 转为 View
         Window subActivity = getLocalActivityManager().startActivity(
                 "subActivity" , intent);
         //容器添加View
         container.addView(subActivity.getDecorView(),
                 LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT);
     }

 }

主Activity的布局XML文件源码如下：

 <?xml version= "1.0"  encoding= "utf-8" ?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:orientation="vertical"  android:layout_width= "fill_parent"
     android:layout_height="fill_parent" >
     <RelativeLayout android:layout_height="fill_parent"
         android:layout_width="fill_parent" >
         <GridView android:layout_height="wrap_content"  android:id= "@+id/gvTopBar"
             android:layout_alignParentTop="true"  android:layout_width= "fill_parent"
             android:fadingEdgeLength="5dip"  android:fadingEdge= "vertical" >
         </GridView>
         <LinearLayout android:id="@+id/Container"
             android:layout_below="@+id/gvTopBar"  android:layout_width= "fill_parent"
             android:layout_height="fill_parent" >
         </LinearLayout>
     </RelativeLayout>
 </LinearLayout>