App主界面Tab的四种实现方法（上）

慕课网有门讲解 Android App 中带有多个 tab 页面切换（比如微信的四个tab）的四种实现方式的课，早就看完了，觉得不错，在这里记录一下，代码不会贴全，但我会把关键代码都贴上，附上关键步骤的实现介绍。希望能帮到需要的人。有任何不明白的点，可以在下面留言，我看到后会在第一时间回复你。
四种方式我都会先贴上布局代码，然后贴上实现布局需要的适配器或者 Fragment 代码，最后贴主 Activity 代码。文章内容较多，我会分上下两篇文章介绍，本篇介绍 ViewPager 实现 Tab 和 Fragment 实现 Tab，下篇介绍 FragmentPagerAdapter+ViewPager 实现 Tab 和 ViewPagerIndicator+ViewPager 实现 Tab。

先附上一张效果图，1-3种方法都是仿微信的 tab 界面

1.ViewPager实现Tab

main_layout.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <include layout="@layout/top" />

    <android.support.v4.view.ViewPager
        android:id="@+id/id_viewpager"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1" >
    </android.support.v4.view.ViewPager>

    <include layout="@layout/bottom" />

</LinearLayout>

我们会在主 Activity 里面对上面的 ViewPager 填充需要添加的 tab，至于上面id为 top 和 bottom 的两个布局不需要关心，只是为了美观仿真而已。

item_tab01.xml

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

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:gravity="center"
        android:text="This is Weixin Tab"
        android:textSize="30sp"
        android:textStyle="bold" />

</LinearLayout>

这里我只贴了一个 tab，因为其他 tab都基本一致，只是 TextView 里面显示的文本不一样而已，我就不全贴了，下面三种方式也是如此。
下面是部分关键的主 Activity 代码，总共三步，我在里面添加了详细的注释

MainActivity.class

// 1.我们需要三个元素 viewpager 适配器 List<view>数据
private ViewPager mViewPager;
private PagerAdapter mAdapter;
private List<View> mViews = new ArrayList<View>();

// 2.将需要显示的 tab view 添加到 List<View> 中
LayoutInflater mInflater = LayoutInflater.from(this);
View tab01 = mInflater.inflate(R.layout.tab01, null);
View tab02 = mInflater.inflate(R.layout.tab02, null);
View tab03 = mInflater.inflate(R.layout.tab03, null);
View tab04 = mInflater.inflate(R.layout.tab04, null);
mViews.add(tab01);
mViews.add(tab02);
mViews.add(tab03);
mViews.add(tab04);

// 3.创建 ViewPager 适配器，并添加到 ViewPager 中
mAdapter = new PagerAdapter() {

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView(mViews.get(position));
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {

        View view = mViews.get(position);
        container.addView(view);
        return view;
    }

    @Override
    public boolean isViewFromObject(View arg0, Object arg1) {
        return arg0 == arg1;
    }

    @Override
    public int getCount() {
        return mViews.size();
    }
};
// 将适配器添加到 ViewPager 中
mViewPager.setAdapter(mAdapter);

// 此外，还可以使用mViewPager.setCurrentItem(int) 控制现在显示的 viewPager 项
// mViewPager.setOnPageChangeListener(new OnPageChangeListener(){......}）监听 ViewPager 的滑动事件
mViewPager.setOnPageChangeListener(new OnPageChangeListener() {

     @Override
     public void onPageSelected(int arg0) {
         int currentItem = mViewPager.getCurrentItem();
         switch (currentItem) {
             // 在这里根据当前的 tab 可以设置相应的响应事件
         }
     }

     @Override
     public void onPageScrolled(int arg0, float arg1, int arg2) {

     }

     @Override
     public void onPageScrollStateChanged(int arg0) {
     }
});

2.Fragment实现Tab

main_activity.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <include layout="@layout/top" />

    <FrameLayout
        android:id="@+id/id_content"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        ></FrameLayout>

    <include layout="@layout/bottom" />

</LinearLayout>

我们会在 FrameLayout 里面填充需要添加的 tab

tab01.xml

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

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:gravity="center"
        android:text="This is Weixin Tab"
        android:textSize="30sp"
        android:textStyle="bold" />

</LinearLayout>

WeixinFragment.class

public class WeixinFragment extends Fragment{

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState){

        return inflater.inflate(R.layout.tab01, container, false);
    }
}

要想使用 Fragment，我们需要像上面这样，创建一个类继承 Fragment，在这个类里面获取到布局文件，添加这个 Fragment 的逻辑。

MainActivity.class

// 添加一个 Fragment
FragmentManager fm = getSupportFragmentManager();
FragmentTransaction transaction = fm.beginTransaction();

// 显示指定 tab 页
// 先判断是否 tab 页面是否为空，为空则新建 WeixinFragment，否则直接显示即可
if (mTab01 == null){
        mTab01 = new WeixinFragment();
        transaction.add(R.id.id_content, mTab01);
    } else {
    transaction.show(mTab01);
}

// 此外，当需要切换tab页面时，需要使用事务将其他 tab 隐藏
// ft 为事务，fragment 为需要隐藏的 tab
private void hideFragment(Fragment fragment, FragmentTransaction ft) {
    if (fragment != null) {
        ft.hide(fragment);
    }
}

下篇会继续介绍另外两种实现方式。。。