多种多样的App主界面Tab实现方法——利用ViewPager+FragmentPagerAdapter实现Tab

视频地址：http://www.imooc.com/video/5904

这次实例的依旧可以利用上篇文章中的布局文件以及图片资源，不过，需要修改一下主布局：

<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"
    tools:context=".MainActivity">

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

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

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

</LinearLayout>

将上篇文章中的FragmentLayout替换成了android.support.v4.view.ViewPager。

---

然后是代码的实现：

public class MainActivity extends AppCompatActivity implements View.OnClickListener {
    private ViewPager mViewPager;
    private FragmentPagerAdapter mAdapter;
    private List<Fragment> mFragments=new ArrayList<>();

    private LinearLayout mTabWeixin;
    private LinearLayout mTabFrd;
    private LinearLayout mTabAddress;
    private LinearLayout mTabSetting;

    private ImageButton mWeixinImg;
    private ImageButton mFrdImg;
    private ImageButton mAddressImg;
    private ImageButton mSettingImg;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        getSupportActionBar().hide();

        initView();
        initEvent();

        setSelect(1);
    }

    private void initEvent() {
        mTabWeixin.setOnClickListener(this);
        mTabFrd.setOnClickListener(this);
        mTabAddress.setOnClickListener(this);
        mTabSetting.setOnClickListener(this);

        mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            }

            @Override
            public void onPageSelected(int position) {
                int current=mViewPager.getCurrentItem();
                setTab(current);
            }

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

    private void initView() {
        mViewPager= (ViewPager) findViewById(R.id.id_viewpager);
        // tabs
        mTabWeixin = (LinearLayout) findViewById(R.id.id_tab_weixin);
        mTabFrd = (LinearLayout) findViewById(R.id.id_tab_frd);
        mTabAddress = (LinearLayout) findViewById(R.id.id_tab_address);
        mTabSetting = (LinearLayout) findViewById(R.id.id_tab_settings);
        // ImageButton
        mWeixinImg = (ImageButton) findViewById(R.id.id_tab_weixin_img);
        mFrdImg = (ImageButton) findViewById(R.id.id_tab_frd_img);
        mAddressImg = (ImageButton) findViewById(R.id.id_tab_address_img);
        mSettingImg = (ImageButton) findViewById(R.id.id_tab_settings_img);

        mFragments.add(new WeixinFragment());
        mFragments.add(new FrdFragment());
        mFragments.add(new AddressFragment());
        mFragments.add(new SettingsFragment());

        mAdapter=new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public Fragment getItem(int position) {
                return mFragments.get(position);
            }

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

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.id_tab_weixin:
                setSelect(0);
                break;
            case R.id.id_tab_frd:
                setSelect(1);
                mFrdImg.setImageResource(R.drawable.tab_find_frd_pressed);
                break;
            case R.id.id_tab_address:
                setSelect(2);
                break;
            case R.id.id_tab_settings:
                setSelect(3);
                break;
            default:
                break;
        }
    }

    private void setSelect(int i) {
        setTab(i);
        mViewPager.setCurrentItem(i);
    }

    private void setTab(int i) {
        resetImg();
        switch (i) {
            case 0:
                mWeixinImg.setImageResource(R.drawable.tab_weixin_pressed);
                break;
            case 1:
                mFrdImg.setImageResource(R.drawable.tab_find_frd_pressed);
                break;
            case 2:
                mAddressImg.setImageResource(R.drawable.tab_address_pressed);
                break;
            case 3:
                mSettingImg.setImageResource(R.drawable.tab_settings_pressed);
                break;
            default:break;
        }
    }

    private void resetImg() {
        mWeixinImg.setImageResource(R.drawable.tab_weixin_normal);
        mFrdImg.setImageResource(R.drawable.tab_find_frd_normal);
        mAddressImg.setImageResource(R.drawable.tab_address_normal);
        mSettingImg.setImageResource(R.drawable.tab_settings_normal);
    }
}

在这次的实现方法中，ViewPager所用的适配器为FragmentPagerAdapter，需要注意，该适配器在初始化的时候需要传入一个FragmentManager类型的参数，可以通过getSupportFragmentManager()方法获得。

在看过实现的过程之后，是不是感觉就像是前两篇文章中使用的方法的综合？确实差不多。
这种综合的实现方法，互补了前两篇文章中各自方法的不足之处，如单独使用ViewPager造成MainActivity的冗余、单独使用Fragment而无法实现左右滑动等,，同时也保留了相应的优点。不过，这种方法也不可避免的保留了单独使用ViewPager时所说的一个问题，即切换到间隔Tab时，需要经过夹在中的Tab所对应的布局内容，这次我特地将中间两个Tab对应的布局的背景换了颜色，在测试的时候应该会感觉明显一些。

最后，还是需要说明一下，这次的实现方法还是存在切换到间隔Tab时会经过夹在中间的Tab

源码：http://download.csdn.net/download/qq_22804827/9458684