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

上一篇我们介绍了 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);
    }
}

由于个人水平有限，文章所介绍的知识有错误和不准确的地方，欢迎大家在下面留言区指出，我会第一时间回复。与君共勉，一起进步。