Android之Tab分页标签的实现方法采用ActivityGroup和GridView的结合

 在前面，已经介绍了TabActivity和TabHost的结合实现Tab分页的三种方式。这里，将讲到采用ActivityGroup和GridView的结合，实现Tab分页。其实，这和TabActivity和TabHost的结合差不多。只不过，是自己把Tab的头部（选项栏）和页面视图分开实现。Tab头部采用GridView来实现，子页面采用LinearLayout容器来实现。然后把每个子Activity作为一个View视图，装载到LinearLayout容器里面。你会发现LinearLayout不仅仅是布局容器，它还有许多妙用。

        实现讲解：

        1、主类继承ActivityGroup

        public class GridViewTabPage extends ActivityGroup

        2、 获取每个子页面的Activity视图

        Intent intent = new Intent(GridViewTabPage.this, Page1.class);

        subPageView = getLocalActivityManager().startActivity(
      "subPageView" + i, intent);

        3、加载到容器

        pageContainer.addView(subPageView .getDecorView(),
        LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT);

         

                                                            

                                          

                                          

       1、布局XML文件：main.xml

          

<?xml version="1.0" encoding="utf-8"?> <LinearLayout android:id="@+id/gridViewTab" android:layout_width="fill_parent" android:layout_height="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" > <GridView android:id="@+id/gv_tabPage" android:layout_width="fill_parent" android:layout_height="wrap_content" android:numColumns="3" > </GridView> <LinearLayout android:id="@+id/pageContainer" android:layout_below="@+id/gvTopBar" android:layout_width="fill_parent" android:layout_height="fill_parent"> </LinearLayout> </LinearLayout>

       2、代码文件：

        图片适配器：ImageAdapter.java

        

package com.myandroid.test; import android.content.Context; import android.graphics.Color; import android.util.Log; 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; private int width; private int height; private ImageView[] imageViews; private Integer[] imgeIDs; public ImageAdapter(Context context, Integer[] imageIDs, int width, int height) { this.context = context; this.imgeIDs = imageIDs; this.width = width; this.height = height; imageViews = new ImageView[imageIDs.length]; for(int i = 0; i < imageViews.length; i++) { imageViews[i] = new ImageView(context); } } public int getCount() { // TODO Auto-generated method stub return imgeIDs.length; } public Object getItem(int position) { // TODO Auto-generated method stub return position; } public long getItemId(int position) { // TODO Auto-generated method stub return position; } /** * 点击设置 * @param selectedID */ public void setFocus(int selectedID) { Log.e("Seqence", "setFocus"); for(int i = 0; i < imageViews.length; i++) { imageViews[i].setBackgroundColor(Color.BLACK); } imageViews[selectedID].setBackgroundColor(Color.YELLOW); } /** * 图片设置 */ public View getView(int position, View convertView, ViewGroup parent) { // TODO Auto-generated method stub Log.e("Seqence", "getView"); imageViews[position].setImageResource(imgeIDs[position]); imageViews[position].setLayoutParams(new GridView.LayoutParams(width, height)); imageViews[position].setBackgroundColor(android.R.drawable.picture_frame); return imageViews[position]; } }

         主文件：GridViewTabPage.java

        

package com.myandroid.test; import android.app.ActivityGroup; import android.content.Intent; 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.AdapterView.OnItemClickListener; public class GridViewTabPage extends ActivityGroup { private GridView gv_tabPage; //顶部Tab标签 private ImageAdapter imageAdapter; //图片适配器 public LinearLayout pageContainer; // 放置子页面的容器 private Intent[] intents; //页面跳转Intent private Window[] subPageView; //子页面视图View private Integer[] tabImages = { R.drawable.a1, //tab标签图标 R.drawable.a2, R.drawable.a3,}; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); Log.e("Sequence", "start"); //测试用 gv_tabPage = (GridView) findViewById(R.id.gv_tabPage); gv_tabPage.setNumColumns(tabImages.length);// 设置列数 gv_tabPage.setSelector(new ColorDrawable(Color.TRANSPARENT));// 选中的时候为透明色 gv_tabPage.setGravity(Gravity.CENTER);// 位置居中 gv_tabPage.setVerticalSpacing(0);// 垂直间隔 int width = this.getWindowManager().getDefaultDisplay().getWidth()//获取屏幕宽度 / tabImages.length;//平分宽度 imageAdapter = new ImageAdapter(this, tabImages, width, 48); //创建图片适配器，传递图片所需高和宽 gv_tabPage.setAdapter(imageAdapter);// 设置菜单Adapter gv_tabPage.setOnItemClickListener(new ItemClickEvent()); //注册点击事件 pageContainer = (LinearLayout) findViewById(R.id.pageContainer); SwitchPage(0);//默认打开第0页 Log.e("Sequence", "end"); } class ItemClickEvent implements OnItemClickListener { public void onItemClick(AdapterView<?> arg0, View arg1, int arg2, long arg3) { SwitchPage(arg2); //arg2表示选中的Tab标签号，从0~2 } } /** * 用于获取intent和pageView， * 类似于单例模式，使得对象不用重复创建，同时，保留上一个对象的状态 * 当重新访问时，仍保留原来数据状态，如文本框里面的值。 * @param pageID 选中的tab序号（0~2） * @return */ private Window getPageView(int pageID) { if(intents == null) { intents = new Intent[3]; subPageView = new Window[3]; intents[0] = new Intent(GridViewTabPage.this, Page1.class); intents[1] = new Intent(GridViewTabPage.this, Page2.class); intents[2] = new Intent(GridViewTabPage.this, Page3.class); for(int i = 0; i < 3; i++) { subPageView[i] = getLocalActivityManager().startActivity( "subPageView" + i, intents[i]); } Log.e("New", "new"); } return subPageView[pageID]; } /** * 根据ID打开指定的PageActivity * @param id 选中项的tab序号 */ private void SwitchPage(int id) { pageContainer.removeAllViews();//必须先清除容器中所有的View imageAdapter.setFocus(id); Window pageView = null; switch(id){ //获取子页面View case 0: pageView = getPageView(0); break; case 1: pageView = getPageView(1); break; case 2: pageView = getPageView(2); break; default: break; } //装载子页面View到LinearLayout容器里面 pageContainer.addView(pageView.getDecorView(), LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT); } }

         3、最后是在AndroidManifest.xml里添加Activity注册信息

<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.myandroid.test" android:versionCode="1" android:versionName="1.0"> <application android:icon="@drawable/icon" android:label="@string/app_name"> ................ <!-- 要添加Activity的声明，否则系统找不到文件报错 --> <activity android:name="Page1"></activity> <activity android:name="Page2"></activity> <activity android:name="Page3"></activity> </application> </manifest>

          同样的，对于Tab选项过多，可以采用Grally+ActivityGroup结合的实现方式。具体实现方法，和ActivityGroup和GridView的结合差不多，读者可以自己实现。