使用TabHost和ViewPager实现页面切换

在android的开发过程中经常会遇到页面切换的问题，其中一个解决办法是使用fragment加Handler来实现，不过有些情况下这种方法并不是最好的选择。比如，你需要滑动切换页面的时候。这时使用TabHost和ViewPager来实现会更加方便。文章参考API文档中Creating Swipe Views with Tabs（文章路径Training->Implementing Effective Navigation->Creating Swipe Views with Tabs）和west8623的文章。并且加入了自己定义的标题。

代码如下：

第一步，建立mypage_layout.xml

<TabHost
        android:id="@+id/mypage_tabhost"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/mypage_r0">
        <LinearLayout
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <TabWidget
                android:id="@android:id/tabs"
                android:orientation="horizontal"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="0"/>
            <FrameLayout
                android:id="@android:id/tabcontent"
                android:layout_width="0dp"
                android:layout_height="0dip"
                android:layout_weight="0"/>
            <android.support.v4.view.ViewPager
                android:id="@+id/mypage_pager"
                android:layout_width="match_parent"
                android:layout_height="0dip"
                android:layout_weight="1"/>
        </LinearLayout>
    </TabHost>

第二步：为每个子页面建立xml，如fragment_mypage.xml；

<?xml version="1.0" encoding="utf-8"?> 
<TextView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/text" 
android:layout_width="match_parent" android:layout_height="match_parent" 
android:gravity="center_vertical|center_horizontal" 
android:textAppearance="?android:attr/textAppearanceMedium" 
android:text="@string/hello_world"/>

第三步：为tabHost建立自定义标签tabwidget_layout.xml：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#f5f5f5">
    <TextView
        android:id="@+id/tabwidget_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="14sp"
        android:text="原创"
        android:textColor="#333333"
        android:layout_centerHorizontal="true"
        android:layout_alignParentTop="true"
        android:layout_marginTop="8dip"/>
    <View
        android:id="@+id/tabwidget_line"
        android:layout_width="match_parent"
        android:layout_height="1dip"
        android:background="#d0d0d0"
        android:layout_below="@+id/tabwidget_tv"
        android:layout_marginTop="8dip"/>
</RelativeLayout>

第四步：写主页面MyPageActivity.java，同时要建立子页面FragmentMyPager.java

public class FragmentMyPager extends Fragment
{
    int mNum;

    public static FragmentMyPager newInstance(int num)
    {
        FragmentMyPager f=new FragmentMyPager();

        Bundle args=new Bundle();
        args.putInt("num",num);
        f.setArguments(args);
        return f;
    }
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        mNum=getArguments()!=null?getArguments().getInt("num"):1;
    }

    @Override
    public View onCreateView(LayoutInflater inflater,ViewGroup container,
                             Bundle savedInstanceState)
    {
        View v=inflater.inflate(R.layout.fragment_mypage,container,false);
        View tv=v.findViewById(R.id.text);
        ((TextView)tv).setText("Fragment # "+mNum);
        ((TextView)tv).setTextColor(getResources().getColor(R.color.black));
        return v;
    }
}

public class MyPageActivity extends FragmentActivity
{
    private TabHost mTabHost;
    private ViewPager mViewPager;
    private TabsAdapter mTabsAdapter;
    private TextView tabTv1,tabTv2;
    private View tabLine1,tabLine2,view1,view2;
    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.mypage_layout);
        mTabHost=(TabHost)findViewById(R.id.mypage_tabhost);
        mTabHost.setup();

        mViewPager=(ViewPager)findViewById(R.id.mypage_pager);
        mTabsAdapter=new TabsAdapter(this,mTabHost,mViewPager);

        view1=(View) LayoutInflater.from(this).inflate(R.layout.tabwidget_layout,null);
        tabTv1=(TextView)view1.findViewById(R.id.tabwidget_tv);
        tabLine1=(View)view1.findViewById(R.id.tabwidget_line);

        view2=(View) LayoutInflater.from(this).inflate(R.layout.tabwidget_layout,null);
        tabTv2=(TextView)view2.findViewById(R.id.tabwidget_tv);
        tabLine2=(View)view2.findViewById(R.id.tabwidget_line);

        tabTv1.setText("原创");
        tabTv1.setTextColor(getResources().getColor(R.color.orange));
        tabLine1.setBackgroundColor(getResources().getColor(R.color.orange));

        tabTv2.setText("赞过");

        mTabsAdapter.addTab(mTabHost.newTabSpec("simple").setIndicator(view1),
                FragmentMyPager.class,null);
        mTabsAdapter.addTab(mTabHost.newTabSpec("contacts").setIndicator(view2),
                FragmentMyPager.class,null);

        if(savedInstanceState!=null)
        {
            mTabHost.setCurrentTabByTag(savedInstanceState.getString("tab"));
        }
    }

    @Override
    protected void onSaveInstanceState(Bundle outState)
    {
        super.onSaveInstanceState(outState);
        outState.putString("tab",mTabHost.getCurrentTabTag());
    }

    private class TabInfo
    {
        private String tag;
        private Class<?> clss;
        private Bundle args;

        TabInfo(String _tag,Class<?> _class,Bundle _args)
        {
            tag=_tag;
            clss=_class;
            args=_args;
        }
    }
    private class DummyTabFactory implements TabHost.TabContentFactory
    {
        private Context mContext;

        public DummyTabFactory(Context context)
        {
            mContext=context;
        }

        @Override
        public View createTabContent(String tag)
        {
            View v=new View(mContext);
            v.setMinimumHeight(0);
            v.setMinimumWidth(0);
            return v;
        }
    }
    private class TabsAdapter extends FragmentPagerAdapter
                implements TabHost.OnTabChangeListener,ViewPager.OnPageChangeListener
    {
        private Context mContext;
        private TabHost mTabHost;
        private ViewPager mViewPager;
        private ArrayList<TabInfo> mTabs=new ArrayList<TabInfo>();

        public TabsAdapter(FragmentActivity activity,TabHost tabHost,ViewPager pager)
        {
            super(activity.getSupportFragmentManager());
            mContext=activity;
            mTabHost=tabHost;
            mViewPager=pager;
            mTabHost.setOnTabChangedListener(this);
            mViewPager.setAdapter(this);
            mViewPager.setOnPageChangeListener(this);
        }

        public void addTab(TabHost.TabSpec tabSpec,Class<?> clss,Bundle args)
        {
            tabSpec.setContent(new DummyTabFactory(mContext));
            String tag=tabSpec.getTag();

            TabInfo info=new TabInfo(tag,clss,args);
            mTabs.add(info);
            mTabHost.addTab(tabSpec);
            notifyDataSetChanged();
        }

        @Override
        public int getCount()
        {
            return mTabs.size();
        }

        @Override
        public Fragment getItem(int position)
        {
            TabInfo info=mTabs.get(position);
            return Fragment.instantiate(mContext,info.clss.getName(),info.args);
        }

        @Override
        public void onTabChanged(String tabId)
        {
            int position=mTabHost.getCurrentTab();
            mViewPager.setCurrentItem(position);
            if(position==0)
            {
                tabTv1.setText("原创");
                tabTv1.setTextColor(getResources().getColor(R.color.orange));
                tabLine1.setBackgroundColor(getResources().getColor(R.color.orange));

                tabTv2.setText("赞过");
                tabTv2.setTextColor(getResources().getColor(R.color.black));
                tabLine2.setBackgroundColor(getResources().getColor(R.color.linebg));
            }else if(position==1)
            {
                tabTv2.setText("赞过");
                tabTv2.setTextColor(getResources().getColor(R.color.orange));
                tabLine2.setBackgroundColor(getResources().getColor(R.color.orange));

                tabTv1.setText("原创");
                tabTv1.setTextColor(getResources().getColor(R.color.black));
                tabLine1.setBackgroundColor(getResources().getColor(R.color.linebg));
            }
//            String tmp=mTabHost.getCurrentTabTag();
//            mTabHost.getCurrentTabView().set
        }

        @Override
        public void onPageScrolled(int position,float positionOffset,int positionOffsetPixels)
        {
        }

        @Override
        public void onPageSelected(int position)
        {
            TabWidget widget=mTabHost.getTabWidget();
            int oldFocusability=widget.getDescendantFocusability();
            widget.setDescendantFocusability(ViewGroup.FOCUS_BLOCK_DESCENDANTS);
            mTabHost.setCurrentTab(position);
            widget.setDescendantFocusability(oldFocusability);
        }
        @Override
        public void onPageScrollStateChanged(int state)
        {

        }
    }
}