上一篇我們介紹了 ViewPager 實現 Tab 和 Fragment 實現 Tab，本篇會繼續介紹剩下的兩種。FragmentPagerAdapter+ViewPager 實現 Tab 和 ViewPagerIndicator+ViewPager 實現 Tab。

3.FragmentPagerAdapter+ViewPager 實現 Tab

大概做法就是將 Fragments 作為 ViewPager 的 View 填充到介面卡裡。

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>

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 類似，就不貼程式碼了。

MainActivity.class

// 三個元素，ViewPager 介面卡 List<Fragment>
private ViewPager mViewPager;
private FragmentPagerAdapter mAdapter;
private List<Fragment> mFragments;

// 將四個 Fragment 新增到 List<Fragment> 中
mFragments = new ArrayList<Fragment>();
Fragment mTab01 = new WeixinFragment();
Fragment mTab02 = new FrdFragment();
Fragment mTab03 = new AddressFragment();
Fragment mTab04 = new SettingFragment();
mFragments.add(mTab01);
mFragments.add(mTab02);
mFragments.add(mTab03);
mFragments.add(mTab04);

// FragmentPagerAdapter 介面卡
mAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {

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

    @Override
    public Fragment getItem(int arg0) {
        return mFragments.get(arg0);
    }
};
// 將介面卡新增到 ViewPager
mViewPager.setAdapter(mAdapter);

// ViewPager 的滑動事件監聽
mViewPager.setOnPageChangeListener(new OnPageChangeListener() {

            @Override
            public void onPageSelected(int arg0) {
                int currentItem = mViewPager.getCurrentItem();
                // 這裡可以根據當前的 currentItem 做不同的處理
            }

            @Override
            public void onPageScrolled(int arg0, float arg1, int arg2) {
                // TODO Auto-generated method stub

            }

            @Override
            public void onPageScrollStateChanged(int arg0) {
                // TODO Auto-generated method stub

            }
        });

4.ViewPagerIndicator+ViewPager實現Tab

ViewPagerIndicator 是Android的一個開源控制元件，不瞭解的同學可以先去自行百度一下。第四種方式實現的介面和之前不同，在這裡貼上一張效果圖。

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:background="#C5DAED"
    android:orientation="vertical" >

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

    <com.viewpagerindicator.TabPageIndicator
        android:id="@+id/id_indicator"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/transparent" >
    </com.viewpagerindicator.TabPageIndicator>

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

</LinearLayout>

LinearLayout 裡面的第一個控制元件就是 ViewPagerIndicator 指示器，我們要在第二個控制元件（ViewPager）填充 Fragment

TabFragment.class

@SuppressLint("ValidFragment")
public class TabFragment extends Fragment {

    private int pos;

    @SuppressLint("ValidFragment")
    public TabFragment(int pos) {
        this.pos = pos;
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.frag, container, false);
        TextView tv = (TextView) view.findViewById(R.id.id_tv);
        tv.setText(TabAdapter.TITLES[pos]);
        return view;
    }

}

上面就是我們建立的 Fragment，佈局裡面有一個 TextView，裡面顯示的文字資訊通過下面的介面卡獲取。

TabAdapter.class

public class TabAdapter extends FragmentPagerAdapter {

    public static String[] TITLES = new String[]
            {"課程", "問答", "求課", "學習", "計劃"};

    public TabAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public Fragment getItem(int arg0) {
        TabFragment fragment = new TabFragment(arg0);
        return fragment;
    }

    @Override
    public int getCount() {
        return TITLES.length;
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return TITLES[position];
    }
}

上面程式碼應該都是很簡單很清晰的，寫完介面卡和 TabFragment，剩下的就很簡單了。

MainActivity.class

public class MainActivity extends FragmentActivity {

    // 三個元素，指定填充 Fragment 位置的 ViewPager，指示器，介面卡
    private ViewPager mViewPager;
    private TabPageIndicator mTabPageIndicator;
    private TabAdapter mAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);

        initView();
    }

    private void initView() {
        mViewPager = (ViewPager) findViewById(R.id.id_viewpager);
        mAdapter = new TabAdapter(getSupportFragmentManager());
        mViewPager.setAdapter(mAdapter);

        // 將 mViewPager 傳給指示器
        mTabPageIndicator = (TabPageIndicator) findViewById(R.id.id_indicator);
        mTabPageIndicator.setViewPager(mViewPager, 0);
    }
}

由於個人水平有限，文章所介紹的知識有錯誤和不準確的地方，歡迎大家在下面留言區指出，我會第一時間回覆。與君共勉，一起進步。