ViewPagerIndicator

关注

原创最新推荐文章于 2026-08-07 08:41:09 发布 4k 阅读 AI 写同款· GEO 优化 ›

ViewPager Indicator 自定义标题和指示器样式本篇文章主要讲述自定义indicator，实现样式和滑动逻辑完全解耦，样式可以随便自定义。根据不同的UI设计随意修改1.indicator的截图显示title区，可设置color size 和gravity2.指示器下划线的样式指示器区域可设置大小颜色//可自定义 } @Override protected IndicatorParameter provideIndicatorParameter() {//可自定义 } @NonNull//可自定义 } }; 阅读详情

一个简单好用的ViewPagerIndicator，提供了五种类型，采用在XML布局中定制颜色大小等参数，在JAVA代码中只需二行代码就能为viewpager添加酷炫效果，并且支持轮播图。

github 地址：https://github.com/LinweiJ/ViewPagerIndicator

如何使用它？

先在 project的build.gradle 添加:

allprojects {
        repositories {
            ...
            maven { url "https://jitpack.io" }
        }
    }

然后在module的build.gradle 添加:

dependencies {
            compile 'com.github.LinweiJ:ViewPagerIndicator:0.1.0'
    }

使用

将ViewPagerIndicator 添加到xml

<com.lwj.widget.viewpagerindicator.ViewPagerIndicator
                android:id="@+id/viewPagerIndicator"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:background="#efefef"
                app:vpi_default_color="#cdcdcd"
                app:vpi_distance="800dp"
                app:vpi_distanceType="BY_LAYOUT"
                app:vpi_indicatorType="LINE"
                app:vpi_length="24dp"
                app:vpi_radius="8dp"
                app:vpi_selected_color="#FF23EEF5"
            />

Properties:

app:vpi_selected_color
app:vpi_default_color (如果 indicatorType=CIRCLE_LINE default_color 为指示器唯一颜色 ,selected_color 不起作用)
app:vpi_radius (点的大小,在indicatorType= CIRCLE_LINE 的情况下 radius 是点的高)
app:vpi_length (只作用在 indicatorType=CIRCLE_LINE 的情况下,为指示器点的长度)
app:vpi_distance (只作用在 distanceType=BY_DISTANCE 的情况下)
app:vpi_num
app:vpi_indicatorType (LINE; CIRCLE; CIRCLE_LINE; BEZIER;SPRING)

LINE：线 ; CIRCLE：圆点(默认) ; CIRCLE_LINE：圆角矩形; BEZIER：弹性球 ; SPRING：弹簧粘性球

app:vpi_distanceType (BY_RADIUS; BY_DISTANCE ; BY_LAYOUT )

BY_RADIUS：3倍radius ; BY_DISTANCE ：定义固定距离 ;BY_LAYOUT ：根据layout_width均分得到距离

app:vpi_animation(默认为true:动画开启 ; false:关闭动画)

2 . java

  mViewPagerIndicator = (ViewPagerIndicator) findViewById(R.id.viewPagerIndicator);

   //viewpager是固定页数, 传入viewpager即可
   mViewPagerIndicator.setViewPager(mViewpager);

   //viewpager是轮播图 ,如:总数为100000个 实际展示页为6个 
   //需要传入实际展示个数num
   mViewPagerIndicator.setViewPager(mViewpager,num);

   //真无限循环BannerView,配合BannerView,增加以下setViewPager
   //https://github.com/LinweiJ/BannerView
   // 两种情况 更多细节请看demo/BannerViewActivity
   // if mBannerView.setCircle(true);无限循环
   mIndicatorDefault.setViewPager(mBannerView.getViewPager(),true);
   // if mBannerView.setCircle(false);固定 不循环
   mIndicatorDefault.setViewPager(mBannerView.getViewPager(),false);