ActivityGroup + ViewPager 实现可滑动的底部Tab

首先看看布局文件

main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <!-- 底部Tab -->
    <LinearLayout
        android:id="@+id/ly_tab"
        android:layout_width="fill_parent"
        android:layout_height="55dip"
        android:layout_alignParentBottom="true"
        android:background="@drawable/tab_background"
        android:orientation="horizontal" >

        <!-- Tab可以滑动的ViewPager -->
        <android.support.v4.view.ViewPager
            android:id="@+id/viewPager"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent" />
    </LinearLayout>

    <!-- 中间显示内容的LinerLayout -->
    <LinearLayout
        android:id="@+id/ly_container"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_above="@id/ly_tab" />

</RelativeLayout>

 ViewPager 的 一个页面的配置文件

<?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="horizontal" >

    <ImageView
        android:id="@+id/imageView_tab_item_frist"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1.0"
        android:background="@drawable/gray_takeout_96_80_1"
        android:contentDescription="@string/imageView"
        android:fadingEdge="vertical"
        android:fadingEdgeLength="5dip"
        android:onClick="onClick"
        android:tag="1" />

    <ImageView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1.0"
        android:background="@drawable/gray_play_96_80_1"
        android:contentDescription="@string/imageView"
        android:fadingEdge="vertical"
        android:fadingEdgeLength="5dip"
        android:onClick="onClick"
        android:tag="2" />

    <ImageView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1.0"
        android:background="@drawable/gray_express_96_80_1"
        android:contentDescription="@string/imageView"
        android:fadingEdge="vertical"
        android:fadingEdgeLength="5dip"
        android:onClick="onClick"
        android:tag="3" />

    <ImageView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1.0"
        android:background="@drawable/gray_logistics_96_80_1"
        android:contentDescription="@string/imageView"
        android:fadingEdge="vertical"
        android:fadingEdgeLength="5dip"
        android:onClick="onClick"
        android:tag="4" />

</LinearLayout>

 

 

因为用到了ViewPager组件， 而Android本身自带是没有这个组件的。

因此需要加载ViewPager的jar包， android-support-v4.jar

这个jar包， 在谷歌自带的SDK的android-sdk-windows\extras\android\support\v4目录下面就有

 

 

然后是看看java类：

/**
 * 主界面多选项卡选择Activity
 * @author Thunder
 *
 */
public class TabChooseActivity extends ActivityGroup {
	
	/* */
	private LayoutInflater layoutInflater = null;
	
	/* 一些对话框 */
	private AboutDialog aboutDialog = null;
	private AboutCFDialog aboutCFDialog = null;
	
	/* 一些常量  */
	private static final int CASE_TAKE_OUT = 0;
	private static final int CASE_PLAY = 1;
	private static final int CASE_EXPRESS = 2;
	private static final int CASE_LOGISTICS = 3;
	private static final int CASE_SPIN_PANEL = 4;
	
	/* ActivityGroup实现Tab */
	private static final int PAGE_COUNT = 2;
	private List<View> viewList = null;
	private ViewGroup viewGroup = null;
	private ViewPager viewPager = null;
	private LinearLayout ly_container = null;
	
	/* Tab的一些资源 */
	private View preView = null;
	private int preIndex = 0;
	private int[] img_bg_normal = {R.drawable.gray_takeout_96_80_1, 
			R.drawable.gray_play_96_80_1, R.drawable.gray_express_96_80_1,
			R.drawable.gray_logistics_96_80_1, R.drawable.gray_spin_panel_96_80_1,
			R.drawable.gray_logistics_96_80_1, R.drawable.gray_refresh_96_80_1,
			R.drawable.gray_more_96_80_1};
	private int[] img_bg_foucs = {R.drawable.blue_takeout_96_80_1, 
			R.drawable.blue_play_96_80_1, R.drawable.blue_express_96_80_1,
			R.drawable.blue_logistics_96_80_1, R.drawable.blue_spin_panel_96_80_1,
			R.drawable.blue_logistics_96_80_1, R.drawable.blue_refresh_96_80_1,
			R.drawable.gray_more_96_80_1};
	
	
	
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        
        /* 初始化函数 */
        init();
        
        /* 设置显示的View */
        setContentView(viewGroup);
    }
    
    /**
     * 初始化函数
     */
    private void init() {
    	
    			
    	/* 得到 LayoutInflater */
    	layoutInflater = getLayoutInflater();
        
    	/* ViewList 用户存放每一个TabItem页  */
    	viewList = new ArrayList<View>();
    	
    	/* 设置默认第一个Tab Item 是选中状态  */
        View tempView = layoutInflater.inflate(R.layout.page_item_1, null);
        preView = tempView.findViewById(R.id.imageView_tab_item_frist);
        preIndex = 0;
        setImgFocus(preIndex, preView);
        
        /* 添加每一页面的显示页面 */
        viewList.add(tempView);
        viewList.add(layoutInflater.inflate(R.layout.page_item_2, null));
        
        /* 反射出布局 */
        viewGroup = (ViewGroup) layoutInflater.inflate(R.layout.main, null);
        viewPager = (ViewPager) viewGroup.findViewById(R.id.viewPager);
        
		/* 初始化对话框 */
		aboutDialog = new AboutDialog(this);
		aboutCFDialog = new AboutCFDialog(this);
        
        /* 用于中间显示内容的容器， 其实就是一个LinearLayout */
        ly_container = (LinearLayout) viewGroup.findViewById(R.id.ly_container);
        
        /* 让ViewPager加载数据页  */
        viewPager.setAdapter(new ViewPagerAdapter());
        
        /* 默认启动一个Tab 项的Activity */
        switchActivity(preIndex);
    }
    
    /**
     * View 的点击事件
     * @param view
     */
    public void onClick(View view) {
    	int index = Integer.parseInt(view.getTag().toString()) - 1;
    	setImgNormal();
    	setImgFocus(index, view);
    	preView = view;
    	preIndex = index;
    	switchActivity(index);
    }
    
    /**
     * 把原来的聚焦状态设置为正常状态
     */
    public void setImgNormal() {
    	if (preView != null) {
    		((ImageView) preView).setBackgroundResource(img_bg_normal[preIndex]);
    	}
    }
    
    /**
     * 把原来的正常状态设置为聚焦状态
     * @param index
     * @param view
     */
    public void setImgFocus(int index, View view) {
    	((ImageView) view).setBackgroundResource(img_bg_foucs[index]);
    }
    
    /**
     * ActivityGroup的切换
     * @param index
     */
	private void switchActivity(int index) {
		// 必须先清除容器中所有的View
		ly_container.removeAllViews();
		
		/* Intent 对象  */
		Intent intent = null;
		
		/* 匹配实例化Intent */
		switch (index) {
		case CASE_TAKE_OUT:
			intent = new Intent(this, TakeOutActivity.class);
			break;
		case CASE_PLAY:
			intent = new Intent(this, PlayActivity.class);
			break;
		case CASE_EXPRESS:
			intent = new Intent(this, ExpressActivity.class);
			break;
		case CASE_LOGISTICS:
			intent = new Intent(this, LogisticsActivity.class);
			break;
		case CASE_SPIN_PANEL:
			intent = new Intent(this, SpinPanelActivity.class);
			break;
		default:
			break;
		}
		
		/* 设置此Activity的标志位 */
		intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
		/* Activity 转为 View */
		Window subActivity = getLocalActivityManager().startActivity(
				"subActivity", intent);
		/* 容器添加View */
		ly_container.addView(subActivity.getDecorView(),
				LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT);
	}
    
    /**
	 * ViewPager 的 Adapter
	 * @author Thunder
	 *
	 */
	private class ViewPagerAdapter extends PagerAdapter {

		@Override
		public int getCount() {
			// 页面的数量
			return PAGE_COUNT;
		}

		@Override
		public Object instantiateItem(View container, int position) {
			// 加入到ViewGroup中去
			((ViewPager) container).addView(viewList.get(position), 0);
			return viewList.get(position);
		}

		@Override
		public void destroyItem(View container, int position, Object object) {
			((ViewPager) container).removeView(viewList.get(position));
		}

		@Override
		public boolean isViewFromObject(View view, Object object) {
			return view == object;
		}

		@Override
		public void finishUpdate(View arg0) {
		}

		@Override
		public void restoreState(Parcelable arg0, ClassLoader arg1) {
		}

		@Override
		public Parcelable saveState() {
			return null;
		}

		@Override
		public void startUpdate(View arg0) {
		}
	}
	
	

}

 具体实现， 上面的注释已经写得很清楚了，

如果有不明白的地方， 直接@我就行。

转载请说明出处， 谢谢。

 

 

Thunder

2012/07/01

评论

1 楼 tuimaochang 2013-07-27  

你好，这个有完整的源码吗？里面的对话框/图片资源用我自己的看不出效果，还有
((ImageView) preView).setBackgroundResource(img_bg_normal[preIndex]);
这一行提示ImageView cannot be resolved to a type。
我的邮箱[e-mail].谢谢博主分享