ViewPager加上小圆点指示器效果

分析

本篇文章着重介绍ViewPager结合第三方库实现小圆点指示器效果，第三方库https://github.com/ongakuer/CircleIndicator

环境

• 环境：Android Studio 4.0
• 语言：Java
• 特点：简单，易懂，效果爆炸

效果

效果2.gif

ViewPager类的来历

• ViewPager是android扩展包v4包中的类，这个类可以让用户左右切换当前的view，它直接继承了ViewGroup类，所有它是一个容器类，可以在其中添加其他的view类。
• ViewPager类需要一个PagerAdapter适配器类给它提供数据。
• ViewPager经常和Fragment一起使用，并且提供了专门的FragmentPagerAdapter和FragmentStatePagerAdapter类供Fragment中的ViewPager使用。

适配器

实现一个最基本的PagerAdapter,有四个必须实现的方法

  @Override
    public int getCount() {//必须实现
        return mViewList.size();
    }

    @Override
    public boolean isViewFromObject(View view, Object object) {//必须实现
        return view == object;
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {//必须实现，实例化
        container.addView(mViewList.get(position));
        return mViewList.get(position);
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {//必须实现，销毁
        container.removeView(mViewList.get(position));
    }

同理，实现一个FragmentPagerAdapter，也必须实现这4个方法,只是具体数据由View变为Fragment，因为它更关注具体某一页的实现

import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentPagerAdapter;

import java.util.List;

public class QuickFragmentPageAdapter<T extends Fragment> extends FragmentPagerAdapter {

    private List<T> mList;

    private String[] mStrings;

    public QuickFragmentPageAdapter(FragmentManager fm, List<T> list, String[] titles) {
        super(fm);
        mList = list;
        mStrings = titles;
    }

    @Override
    public Fragment getItem(int position) {
        return mList.get(position);
    }

    @Override
    public int getCount() {
        return mList.size();
    }

    @Nullable
    @Override
    public CharSequence getPageTitle(int position) {
        return mStrings == null ? super.getPageTitle(position) : mStrings[position];
    }
}

FragmentStatePagerAdapter和FragmentPagerAdapter的实现过程一模一样，这里就不再介绍了，二者的区别在于前者适合大量页面的使用，后者适合少许页面的应用，所有接下来，我就使用后者来实现开篇提到的效果

使用第三方库

首先添加依赖

implementation 'me.relex:circleindicator:2.1.4'

然后在xml文件引用

 <me.relex.circleindicator.CircleIndicator
       android:id="@+id/indicator"
       android:layout_width="match_parent"
       android:layout_height="48dp"
       tools:ignore="MissingConstraints"
       app:layout_constraintBottom_toBottomOf="@id/viewPager"/>

最后在activity中实现

 /**
     * 实现小圆点指示器功能
     * */
    private void initCircleIndicator(){
        CircleIndicator indicator = (CircleIndicator) findViewById(R.id.indicator);
        indicator.setViewPager(mViewPager);
    }

下面我们具体来看看它是怎么实现的

  private final ViewPager.OnPageChangeListener mInternalPageChangeListener =
            new ViewPager.OnPageChangeListener() {

                @Override
                public void onPageScrolled(int position, float positionOffset,
                                           int positionOffsetPixels) {
                }

                @Override
                public void onPageSelected(int position) {

                    if (mViewpager.getAdapter() == null
                            || mViewpager.getAdapter().getCount() <= 0) {
                        return;
                    }
                    animatePageSelected(position);
                }

                @Override
                public void onPageScrollStateChanged(int state) {
                }
            };

    private void createIndicators() {
        PagerAdapter adapter = mViewpager.getAdapter();
        int count;
        if (adapter == null) {
            count = 0;
        } else {
            count = adapter.getCount();
        }
        createIndicators(count, mViewpager.getCurrentItem());
    }

    public void setViewPager(@Nullable ViewPager viewPager) {
        mViewpager = viewPager;
        if (mViewpager != null && mViewpager.getAdapter() != null) {
            mLastPosition = -1;
            createIndicators();
            mViewpager.removeOnPageChangeListener(mInternalPageChangeListener);
            mViewpager.addOnPageChangeListener(mInternalPageChangeListener);
            mInternalPageChangeListener.onPageSelected(mViewpager.getCurrentItem());
        }
    }

上面首先根据adapter传过来的ViewPager页面数量来创建对应的小圆点，然后实现了对ViewPager页面变化的监听，并开启小圆点缩放的动画，比较简单易懂
总结，在网上参考了一些博主的文章，借用了许多代码，十分感谢，原文简书地址
https://www.jianshu.com/p/e5abbda4a71c