MagicIndicator这个网上开源的一个指示器。存在挺长时间了，扩展性也很强。
之前也一直没有时间去自己的了解一番。今天，就用它来实现一个可以自定义效果的tab指示器。
首先。先来添加依赖：
repositories {
...
maven {
url "https://jitpack.io"
}
}
implementation 'com.github.hackware1993:MagicIndicator:1.5.0'
下面就来介绍一下在xml中的使用：
<net.lucode.hackware.magicindicator.MagicIndicator
android:id="@+id/magic_indicator"
android:layout_width="match_parent"
android:layout_height="@dimen/navigator_common_height"
android:background="#d43d3d" />
下面就是正式的使用方法了，在使用之前，先讲解一下官方自定义的效果，实现 今日头条 的滑动效果，先来看一下效果：
下面是具体的代码实现：
//初始化view
MagicIndicator magicIndicator = findViewById(R.id.magic_indicator);
final CommonNavigator commonNavigator = new CommonNavigator(this);
commonNavigator.setAdapter(new CommonNavigatorAdapter() {
@Override
public int getCount() {
return mDataList == null ? 0 : mDataList.size();
}
@Override
public IPagerTitleView getTitleView(Context context, final int index) {
ClipPagerTitleView clipPagerTitleView = new ClipPagerTitleView(context);
clipPagerTitleView.setText("测试" + index);
clipPagerTitleView.setTextColor(Color.parseColor("#f2c4c4"));
clipPagerTitleView.setClipColor(Color.WHITE);
clipPagerTitleView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
viewPager.setCurrentItem(index);
}
});
return clipPagerTitleView;
//此为tab指示器回调
@Override
public IPagerIndicator getIndicator(Context context) {
/*TriangularPagerIndicator indicator = new TriangularPagerIndicator(context);
indicator.setLineColor(Color.parseColor("#999999"));
return indicator;*/
return null;
}
});
//设置给magicIndicator
magicIndicator.setNavigator(commonNavigator);
如此简单，今日头条的效果就实现好了。
以上是官方的。下面我们来说一下自定义tab，
自定义的tab也不难，只需要在给commonNavigator设置adapter的时候，在 getTitleView 方法中，初始化CommonPagerTitleView即可。
下面来看一下效果图：
示例代码如下：
@Override
public IPagerTitleView getTitleView(Context context, final int index) {
//初始化CommonPagerTitleView
CommonPagerTitleView commonPagerTitleView = new CommonPagerTitleView(MainActivity.this);
//设置自定义布局文件及view赋值
commonPagerTitleView.setContentView(R.layout.item_magicIndicator_layout);
final TextView tvTitle = commonPagerTitleView.findViewById(R.id.intitle);
final TextView tvDian = commonPagerTitleView.findViewById(R.id.dian);
tvTitle.setText("测试" + index);
//此处为我测试添加顶部圆点的的代码
if (tvTitle.getText().equals("测试4")) {
tvDian.setVisibility(View.VISIBLE);
} else {
tvDian.setVisibility(View.GONE);
}
//tab切换监听
commonPagerTitleView.setOnPagerTitleChangeListener(new CommonPagerTitleView.OnPagerTitleChangeListener() {
@Override
public void onSelected(int index, int totalCount) {
tvTitle.setTextSize(60);
tvTitle.setBackground(getResources().getDrawable(R.drawable.bg_title_text));
}
@Override
public void onDeselected(int index, int totalCount) {
tvTitle.setTextSize(40);
tvTitle.setBackgroundColor(0xffffffff);
}
@Override
public void onLeave(int index, int totalCount, float leavePercent, boolean leftToRight) {
}
@Override
public void onEnter(int index, int totalCount, float enterPercent, boolean leftToRight) {
}
});
//tab单个item点击事件监听
commonPagerTitleView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
viewPager.setCurrentItem(index);
}
});
return commonPagerTitleView;
}
到此，自定义tab的代码就完成了。可根据自己的业务来实现不同的效果。最后补充一下，viewPager结合MagicIndicator使用。否则tab item切换可能存在问题。
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
magicIndicator.onPageScrolled(position, positionOffset, positionOffsetPixels);
}
@Override
public void onPageSelected(int position) {
magicIndicator.onPageSelected(position);
}
@Override
public void onPageScrollStateChanged(int state) {
magicIndicator.onPageScrollStateChanged(state);
}
});
最后，附上GitHub地址，如需源码和更多的使用方式，可自行阅读源码：
https://github.com/hackware1993/MagicIndicator