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

// 添加一个 FragmentFragmentManager 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 为需要隐藏的 tabprivate void hideFragment(Fragment fragment, FragmentTransaction ft) {    if (fragment != null) {        ft.hide(fragment);    }}

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