TabLayout、ViewPager与Fragment

1、前言：TabLayout是一种比较常见的布局控件，在很多地方我们经常能看到一些类似于指示器的东西，在这里，通过与ViewPager的结合来构建一个Android界面的基本框架，FragmentPagerAdapter 来 适配我们的ViewPager与Fragment。此次实践进行了对Tablayout与ViewPager嵌套。
2、布局：
第一层TabLayout的布局xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.TabLayout
        android:background="@color/color_mine"
        android:id="@+id/table"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true">
    </android.support.design.widget.TabLayout>

    <com.indicator.NoScrollViewPager
        android:background="@color/color_mine"
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@id/table" />
    
</RelativeLayout>

这里为了让ViewPager不能滑动，所以采用新建一个NoScrollViewPager继承ViewPager的方法，重写onTouchEvent、onInterceptTouchEvent方法如下：

/**
 * Created by Administrator on 2017/5/31.
 * 禁止ViewPager的滑动
 *
 * ViewPager非常好用，但有时候需要在ViewPager的里面再嵌入ViewPager，那么就有冲突了，简单粗暴的方法就是直接把一个ViewPager禁止滑动。

 注意：禁止滑动的同时不能禁止 setCurrentItem 方法。

 实现思路：重写ViewPager，覆盖 onTouchEvent 和 onInterceptTouchEvent 方法，使其返回false，这样就等于禁止了ViewPager上的滑动事件。
 */

public class NoScrollViewPager extends ViewPager {
    public NoScrollViewPager(Context context) {
        super(context);
    }

    public NoScrollViewPager(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    public boolean onTouchEvent(MotionEvent arg0) {
        return false;
    }

    @Override
    public boolean onInterceptTouchEvent(MotionEvent arg0) {
        return false;
    }
}

第一层TabLayout与NoScrollViewPager 的使用：

public class StartActivity extends AppCompatActivity {


    private String[] mTitles = {"Home","Mine"};
    private ArrayList<Fragment> mFragments = new ArrayList<>();

    private NoScrollViewPager mViewPager;
    private TabLayout tabLayout;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_start);
        initViews();
        addFragments();
        setmViewPager();
    }

    private void setmViewPager(){

        TabAdapter tabAdapter = new TabAdapter(getSupportFragmentManager(),mFragments,mTitles);
        mViewPager.setAdapter(tabAdapter);
        tabLayout.setTabTextColors(getResources().getColor(R.color.colorAccent), getResources().getColor(R.color.colorPrimary));//设置文本在选中和为选中时候的颜色
        tabLayout.setupWithViewPager(mViewPager);
    }

    private void addFragments(){
        mFragments.add(new MainFragment());
        mFragments.add(MineFragment.newInstance(1));
    }

    private void initViews(){
        mViewPager = (NoScrollViewPager) findViewById(R.id.viewPager);
        tabLayout = (TabLayout)findViewById(R.id.table);
    }


}

TabAdapter对Fragement进行适配和加载：

public class TabAdapter extends FragmentPagerAdapter {

    private List<Fragment> mFragments;
    private String[] mTitles;

    public TabAdapter(FragmentManager fm, ArrayList<Fragment> fragments,String[] titles){
        super(fm);
        mFragments = fragments;
        mTitles = titles;
    }
    @Override
    public int getCount() {
        return mFragments.size();
    }

    @Override
    public Fragment getItem(int position) {
        return mFragments.get(position);
    }

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

第二层TabLayout与ViewPager的布局xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.indicator.MainFragment">

    <android.support.design.widget.TabLayout
        android:background="@color/colorPrimary"
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="30dp">

    </android.support.design.widget.TabLayout>

    <android.support.v4.view.ViewPager

        android:layout_below="@id/tab_layout"
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />

</RelativeLayout>

在MainFragment嵌套了第二层TabLayout

public class MainFragment extends Fragment {


    private SectionsPagerAdapter mSectionsPagerAdapter;

    private ViewPager mViewPager;


    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {

        mSectionsPagerAdapter = new SectionsPagerAdapter(getFragmentManager());

        View v = inflater.inflate(R.layout.main_frag,null);

        mViewPager = (ViewPager) v.findViewById(R.id.container);
        mViewPager.setAdapter(mSectionsPagerAdapter);

        TabLayout   tabLayout = (TabLayout) v.findViewById(R.id.tab_layout);
//        ShapeIndicatorView shapeIndicatorView = (ShapeIndicatorView) v.findViewById(R.id.custom_indicator);

        tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
        tabLayout.setupWithViewPager(mViewPager);

//        shapeIndicatorView.setupWithTabLayout(tabLayout);
//        shapeIndicatorView.setupWithViewPager(mViewPager);

        return v;

    }


    /**
     * A placeholder fragment containing a simple view.
     */
    public static class PlaceholderFragment extends Fragment {
        /**
         * The fragment argument representing the section number for this
         * fragment.
         */
        private static final String ARG_SECTION_NUMBER = "section_number";

        public PlaceholderFragment() {
        }

        /**
         * Returns a new instance of this fragment for the given section
         * number.
         */
        public static PlaceholderFragment newInstance(int sectionNumber) {
            PlaceholderFragment fragment = new PlaceholderFragment();
            Bundle args = new Bundle();
            args.putInt(ARG_SECTION_NUMBER, sectionNumber);
            fragment.setArguments(args);
            return fragment;
        }

        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
                                 Bundle savedInstanceState) {
            View rootView = inflater.inflate(R.layout.fragment_main, container, false);
            TextView textView = (TextView) rootView.findViewById(R.id.section_label);
            textView.setText(getString(R.string.section_format, getArguments().getInt(ARG_SECTION_NUMBER)));
            return rootView;
        }
    }

    /**
     * A {@link FragmentPagerAdapter} that returns a fragment corresponding to
     * one of the sections/tabs/pages.
     */
    public class SectionsPagerAdapter extends FragmentPagerAdapter {

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

        @Override
        public Fragment getItem(int position) {
            // getItem is called to instantiate the fragment for the given page.
            // Return a PlaceholderFragment (defined as a static inner class below).
            return PlaceholderFragment.newInstance(position + 1);
        }

        @Override
        public int getCount() {
            // Show 3 total pages.
            return 7;
        }

        @Override
        public CharSequence getPageTitle(int position) {

            return "SECTION "  + position;
        }
    }
}

最后实现的效果如下图所示：

 ](https://img.haomeiwen.com/i6179054/daa60db8e830fc99.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)