HarveyLee1228 / MagicIndicator

A powerful, customizable and extensible ViewPager indicator framework —— 强大、可定制、易扩展的 ViewPager 指示器框架。轻轻松松打造各式各样的指示效果。支持角标功能，可将任意的 View 设置成角标。无第三方依赖，兼容 Android 4.0+（更低版本未测试）。进入我的博客 http://hackware.lucode.net 查看关于 MagicIndicator 的更多文章 >>>

MagicIndicator

A powerful, customizable and extensible ViewPager indicator framework.

Usage

Simple steps, you can integrate MagicIndicator:

1. checkout out MagicIndicator, which contains source code and demo
2. import module magicindicator and add dependency:

compile project(':magicindicator')

3. add magicindicator to your layout xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="net.lucode.hackware.magicindicatordemo.MainActivity">

<net.lucode.hackware.magicindicator.MagicIndicator
    android:id="@+id/magic_indicator"
    android:layout_width="match_parent"
    android:layout_height="40dp" />

<android.support.v4.view.ViewPager
    android:id="@+id/view_pager"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1" />

</LinearLayout>

4. find magicindicator through code, initialize it:

final MagicIndicator magicIndicator = (MagicIndicator) findViewById(R.id.magic_indicator);
CommonNavigator commonNavigator = new CommonNavigator(this);
commonNavigator.setAdapter(new CommonNavigatorAdapter() {

@Override
public int getCount() {
    return mTitleDataList == null ? 0 : mTitleDataList.size();
}

@Override
public IPagerTitleView getItemView(Context context, final int index) {
    ClipPagerTitleView clipPagerTitleView = new ClipPagerTitleView(context);
    clipPagerTitleView.setText(mTitleDataList.get(index));
    clipPagerTitleView.setTextColor(Color.parseColor("#f2c4c4"));
    clipPagerTitleView.setClipColor(Color.WHITE);
    clipPagerTitleView.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            mPager.setCurrentItem(index);
        }
    });
    return clipPagerTitleView;
}

@Override
public IPagerIndicator getIndicator(Context context) {
    return null;
}
});
magicIndicator.setNavigator(commonNavigator);

5. bind magicindicator to ViewPager:

mPager.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);
  }
});

Now, enjoy yourself!

More effects adding...

Who developed?

[e-mail]

[e-mail]

An intermittent perfectionist.

Visit My Blog for more articles about MagicIndicator.