ViewPager 、TabLayout和Fragment实现标签滑动

• 之前记录过一篇实现“标签滑动导航栏”的博客ViewPager与PagerTabStrip，在查看过其他前辈的博客后，写了demo感觉效果也挺好的！记录并且分享……

1：添加TabLayout的依赖库：
compile 'com.android.support:design:24.2.1'
compile 'com.android.support:support-v4:24.2.1'

2：这是要用到的XML布局

3：在页面中我设置了五个Tab, 所以需要Tabs 和 五个fragment 和 ViewPager来实现
定义五个fragment文件，以及fragment的 布局文件，
【TabFragmentAllOrder】

package ......;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
......

/**
 * Created by xxx on 2016/9/19.
 * 订单界面
 */

public class TabFragmentAllOrder extends BaseFragment {
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_All_Order,container,false);
        return view;
    }
}

fragment布局文件

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.xxxxxx.xxxxxx.xxxxxx.percenter.TabFragmentAllOrder ">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#cf9fcf"
        android:text="tab----2"
        android:textSize="35sp"
        android:gravity="center"
        />
</FrameLayout>

其他的Fragment与布局文件和上面是一样的，所以就不依次累述了……

这里来看一下具体实现的Activity:

package ......;

import android.graphics.Color;
import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.view.ViewPager;
......;

/**
 * Created by xxx on 2016/9/18.
 * 主界面
 */

public class MyOrderActivity extends BaseNetActivity {
    private TabLayout mTabLayout;
    private ViewPager mViewPager;
    private String tabTitle[]={"全部订单","待付款","待发货","待收货","退货"};
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.center_personal_my_order_activity);
        intiUI();
        initData();
    }

    //初始化控件
    private void intiUI() {
        mTabLayout = (TabLayout) findViewById(R.id.mTabLayout);
        mViewPager = (ViewPager) findViewById(R.id.mViewPager);
    }
    //初始化数据
    private void initData() {
    //将标签全部加进去TabLayout
        for(int i=0;i<tabTitle.length;i++){
            mTabLayout.addTab(mTabLayout.newTab().setText(tabTitle[i]));
        }
        //设置文字居中
        mTabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
        //设置顶部标签指示条的颜色
        mTabLayout.setSelectedTabIndicatorColor(Color.parseColor("#4ac2b4"));
        //设置标签 “未选中" 和 “选中” 的颜色
        mTabLayout.setTabTextColors(Color.parseColor("#656565"),Color.parseColor("#4ac2b4"));
        /**
         * 需要注意的是:
         * 因为在fragment中创建的MyFragmentStatePagerAdapter,所以要传getSupportFragmentManager进去
         */
        mViewPager.setAdapter(new MyFragmentPagerAdapter(getSupportFragmentManager(),tabTitle));
        //在设置viewPager界面滑动时，创建tab滑动监听
        mViewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(mTabLayout));

        mTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener(){

            @Override
            public void onTabSelected(TabLayout.Tab tab) {
//在选中的顶部标签时，为viewpager设置currentitem,显示viewPager对应的界面
                mViewPager.setCurrentItem(tab.getPosition());
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {

            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });
    }
}

MyFragmentPagerAdapter 适配器

package ......;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;

/**
 * Created by xxx on 2016/9/19.
 * MyFragmentPagerAdapter 
 */

public class MyFragmentPagerAdapter extends FragmentStatePagerAdapter {
    private String[] mTabTitles;

    public MyFragmentPagerAdapter(FragmentManager fm, String[] tabTitles) {
        super(fm);
        this.mTabTitles = tabTitles;
    }

    @Override
    public Fragment getItem(int position) {
        switch (position){
            case 0:
                return new TabFragment1();  //全部订单
            case 1:
                return new TabFragment2();  //待付款
            case 2:
                return new TabFragment3();  //待发货
            case 3:
                return new TabFragment4();  //待收货
            case 4:
                return new TabFragment5();  //退货
        }
        return null;
    }

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

运行后的大致界面……

---

---

参考链接：http://blog.csdn.net/ppyyzz628/article/details/52335618
http://blog.csdn.net/fumier/article/details/46793153