安卓ViewPager 指示器

以你之姓@ 2023-07-22 12:26 17阅读 0赞

介绍2款比较热的ViewPager 指示器框架  
[MagicIndicator][] 和 [FlycoTabLayout][]

### MagicIndicator ###

[https://github.com/hackware1993/MagicIndicator][MagicIndicator]

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>

find MagicIndicator through code, initialize it:

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 getTitleView(Context context, final int index) {
            ColorTransitionPagerTitleView colorTransitionPagerTitleView = new ColorTransitionPagerTitleView(context);
            colorTransitionPagerTitleView.setNormalColor(Color.GRAY);
            colorTransitionPagerTitleView.setSelectedColor(Color.BLACK);
            colorTransitionPagerTitleView.setText(mTitleDataList.get(index));
            colorTransitionPagerTitleView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    mViewPager.setCurrentItem(index);
                }
            });
            return colorTransitionPagerTitleView;
        }
    
        @Override
        public IPagerIndicator getIndicator(Context context) {
            LinePagerIndicator indicator = new LinePagerIndicator(context);
            indicator.setMode(LinePagerIndicator.MODE_WRAP_CONTENT);
            return indicator;
        }
    });
    magicIndicator.setNavigator(commonNavigator);

work with ViewPager:

ViewPagerHelper.bind(magicIndicator, mViewPager);

### FlycoTabLayout ###

详见下面地址：  
[https://github.com/H07000223/FlycoTabLayout][FlycoTabLayout]

[MagicIndicator]: https://github.com/hackware1993/MagicIndicator
[FlycoTabLayout]: https://github.com/H07000223/FlycoTabLayout