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

来源：互联网发布：js 正整数正则表达式编辑：程序博客网时间：2024/05/18 01:45

在前面，已经介绍了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

view plain

<?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

view plain

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

view plain

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注册信息

view plain

<?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 android:name="Page1"></activity>
<activity android:name="Page2"></activity>
<activity android:name="Page3"></activity>
</application>
</manifest>

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