MagicIndicator+ViewPager的简单使用 与 嵌套使用

简单使用效果：

简单使用布局：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <net.lucode.hackware.magicindicator.MagicIndicator
        android:id="@+id/indicator_one"
        android:layout_width="0dp"
        android:layout_height="50dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/indicator_one" />

</android.support.constraint.ConstraintLayout>

简单使用源码：

public class MainActivity extends AppCompatActivity {
    private MagicIndicator indicator_one; //指示器
    private ViewPager viewpager;
    private Fragment fragmentOne, fragmentTwo, fragmentThree, fragmentFour, fragmentFive, fragmentSix;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        indicator_one = findViewById(R.id.indicator_one);
        viewpager = findViewById(R.id.viewpager);
        initViewPager(); //初始化viewpager
        initIndicator(); //初始化指示器
    }

    private void initViewPager() {
        List<Fragment> fragmentList = new ArrayList<>();
        if (fragmentOne == null) {
            fragmentOne = new FragmentOne();
        }
        fragmentList.add(fragmentOne);
        if (fragmentTwo == null) {
            fragmentTwo = new FragmentTwo();
        }
        fragmentList.add(fragmentTwo);
        if (fragmentThree == null) {
            fragmentThree = new FragmentThree();
        }
        fragmentList.add(fragmentThree);
        if (fragmentFour == null) {
            fragmentFour = new FragmentFour();
        }
        fragmentList.add(fragmentFour);
        if (fragmentFive == null) {
            fragmentFive = new FragmentFive();
        }
        fragmentList.add(fragmentFive);
        if (fragmentSix == null) {
            fragmentSix = new FragmentSix();
        }
        fragmentList.add(fragmentSix);

        ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager(), fragmentList);
        viewpager.setAdapter(adapter); //设置viewpager适配器

    }

    private void initIndicator() {
        String[] str = {"水果", "熟食", "甜品", "蔬菜", "豆制品", "补品"}; //设置指示器title
        CommonNavigator navigator = new CommonNavigator(this); //新建指示器的导航栏
        navigator.setAdjustMode(true); //设置title宽度自适应
        navigator.setEnablePivotScroll(true); //多指示器模式，可以滑动
        NavigatorAdapter adapter = new NavigatorAdapter(this, str);
        navigator.setAdapter(adapter); //设置导航栏适配器
        indicator_one.setNavigator(navigator); //把导航栏设置给指示器
        ViewPagerHelper.bind(indicator_one, viewpager); //绑定指示器与viewpager
    }


    // viewpager适配器
    private class ViewPagerAdapter extends FragmentPagerAdapter {
        List<Fragment> fragmentList;

        ViewPagerAdapter(FragmentManager fm, List<Fragment> list) {
            super(fm);
            this.fragmentList = list;
        }

        @Override
        public Fragment getItem(int i) {
            return fragmentList.get(i);
        }

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

    // 导航适配器
    private class NavigatorAdapter extends CommonNavigatorAdapter {
        String[] str; //title
        Context context;

        NavigatorAdapter(Context context, String[] str) {
            this.str = str;
            this.context = context;
        }

        @Override  //返回title长度
        public int getCount() {
            return str.length;
        }

        @Override  //设置title的属性样式
        public IPagerTitleView getTitleView(Context context, final int index) {
            SimplePagerTitleView titleView = new SimplePagerTitleView(context); //新建简单titleView
            titleView.setText(str[index]); //设置title内容
            titleView.setTextSize(16); //设置title字体大小
            titleView.setSelectedColor(Color.BLUE); //设置选中时的title颜色
            titleView.setNormalColor(Color.BLACK); //设置未选中时的title颜色
            titleView.setOnClickListener(new View.OnClickListener() { //title的点击事件
                @Override
                public void onClick(View v) {
                    viewpager.setCurrentItem(index); //切换到相应的viewpager页面
                }
            });
            return titleView;
        }

        @Override //设置指示条的属性样式
        public IPagerIndicator getIndicator(Context context) {
            LinePagerIndicator indicator = new LinePagerIndicator(context); //新建指示条
            indicator.setMode(LinePagerIndicator.MODE_WRAP_CONTENT); //设置指示条与内容同宽
            indicator.setRoundRadius(5); //设置指示条圆角度
            indicator.setColors(Color.BLUE); //设置指示条颜色（此方法可设置多个颜色）
            indicator.setStartInterpolator(new AccelerateDecelerateInterpolator()); //设置指示条插值器
            return indicator;
        }
    }
}

嵌套使用效果：

实现：嵌套使用就是在fragment中再加一个指示器和viewpager就能实现以上效果，额…就是这么简单

注意 :在fragment中的getSupportFragmentManager()一定要用getChildFragmentManager()来代替,不然会导致fragment中的viewpager画面卡住无法使用

Activity中：

Fragment中：