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) {// 必须先清除容器中所有的Viewly_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 {@Overridepublic int getCount() {// 页面的数量return PAGE_COUNT;}@Overridepublic Object instantiateItem(View container, int position) {// 加入到ViewGroup中去((ViewPager) container).addView(viewList.get(position), 0);return viewList.get(position);}@Overridepublic void destroyItem(View container, int position, Object object) {((ViewPager) container).removeView(viewList.get(position));}@Overridepublic boolean isViewFromObject(View view, Object object) {return view == object;}@Overridepublic void finishUpdate(View arg0) {}@Overridepublic void restoreState(Parcelable arg0, ClassLoader arg1) {}@Overridepublic Parcelable saveState() {return null;}@Overridepublic void startUpdate(View arg0) {}}}

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

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

转载请说明出处，谢谢。

Thunder

2012/07/01

更多相关文章

随机推荐