简单使用效果:
简单使用布局:
<?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中: