MagicIndicator入门 （标签，指示器） -- 引入并初步使用

为知外链 （排版比较整洁，带图

源码下载地址
https://u17406703.ctfile.com/fs/17406703-290001393

项目源码引入方式(可以修改源码) ：

1. 项目中新建Module

2. 修改以下各项信息，其中包名从下载的MagicIndicator源码中获取。

3. 将MagicIndicator源码中的代码复制过来，如图所示。

4. 在项目中引入该模块即可

原项目案例导入查看

1. 修改项目下的所有build.gradle的gradle版本号为你常用的版本号，这样可以不用下载新的gradle版本。

2. 删除源码中不需要的文件，

3. 导入项目到studio即可。

使用案例：

1. xml代码如下 ：

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <net.lucode.hackware.magicindicator.MagicIndicator
            android:id="@+id/magic_indicator"
            android:layout_width="match_parent"
            android:layout_height="@dimen/common_navigator_height"
            android:layout_marginTop="@dimen/navigator_margin_top" />

        <android.support.v4.view.ViewPager
            android:id="@+id/vp"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>

    </LinearLayout>
</FrameLayout>

1. java代码如下 ：

public class SellerDetailActivity extends BaseActivityL {

    @InjectView(R.id.magic_indicator)
    MagicIndicator mMagicIndicator;

    @InjectView(R.id.vp)
    ViewPager mViewPager;

    @InjectView(R.id.seller_detail_container)
    FrameLayout mSellerDetailContainer;

    private String[] titles = new String[]{"商品", "评价", "商家"};
    private MyAdapter adapter;
    private long sellerId;

    @Override
    protected int setContentLayout() {
        return R.layout.activity_seller_detail;
    }

    @Override
    protected void initView() {
        ButterKnife.inject(this);

        initMagicIndicator();
        adapter = new MyAdapter(getSupportFragmentManager());
        mViewPager.setAdapter(adapter);
    }

    @Override
    protected void initData() {

    }

    @Override
    protected void bindEvent() {

    }

    private void initMagicIndicator() {
        mMagicIndicator.setBackgroundColor(Color.WHITE);
        CommonNavigator commonNavigator = new CommonNavigator(this);
        commonNavigator.setAdjustMode(true);  //ture 即标题平分屏幕宽度的模式
        commonNavigator.setAdapter(new CommonNavigatorAdapter() {
            @Override
            public int getCount() {
                return titles == null ? 0 : titles.length;
            }

            @Override
            public IPagerTitleView getTitleView(Context context, final int index) {
                SimplePagerTitleView simplePagerTitleView = new ScaleTransitionPagerTitleView(context);
                simplePagerTitleView.setText(titles[index]);
                simplePagerTitleView.setTextSize(18);
                simplePagerTitleView.setNormalColor(Color.GRAY);
                simplePagerTitleView.setSelectedColor(Color.BLACK);
                simplePagerTitleView.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        mViewPager.setCurrentItem(index);
                    }
                });
                return simplePagerTitleView;
            }

            @Override
            public IPagerIndicator getIndicator(Context context) {
                BezierPagerIndicator indicator = new BezierPagerIndicator(context);
                indicator.setColors(Color.parseColor("#ff4a42"), Color.parseColor("#fcde64"), Color.parseColor("#73e8f4"), Color.parseColor("#76b0ff"), Color.parseColor("#c683fe"));
                return indicator;
            }
        });
        mMagicIndicator.setNavigator(commonNavigator);
        ViewPagerHelper.bind(mMagicIndicator, mViewPager);
    }

    @Override
    public void onWindowFocusChanged(boolean hasFocus) {
        super.onWindowFocusChanged(hasFocus);
    }

    private class MyAdapter extends FragmentPagerAdapter {

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

        @Override
        public Fragment getItem(int position) {
            return new BlankFragment();
        }

        @Override
        public int getCount() {
            return titles.length;
        }

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

注意 ： FragmentPagerAdapter中返回的Fragment不能直接new Fragment（）,测试的时候直接返回，导致标签栏滚动异常。

1. Fragment代码如下 ：

public class BlankFragment extends Fragment {

    public BlankFragment() {
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_default, container, false);
    }

    @Override
    public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
    }
}

1. 标题是否平分屏幕又以下代码控制

   1. 设置为ture时
      commonNavigator.setAdjustMode(true); //ture 即标题平分屏幕宽度的模式
      

   2. 设置为false时（默认为false）