万能指示器(MagicIndicator) 之 ----- 打造自定义tab效果

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