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的结合差不多，读者可以自己实现。