Android ViewPagerIndicator小圆点效果实现

1，实现效果 

• 默认效果 

• 通过属性更改

【1】ViewPagerIndicator项目导入

* 自己项目下添加依赖

compile 'com.github.JakeWharton:ViewPagerIndicator:2.4.1'

* 整体项目添加 maven

allprojects {

    repositories {

        jcenter()

        mavenCentral()

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

    }

}

2，实现逻辑 

【1】布局中添加

    

• app:strokeWidth 是圆点之间的距离

• app:radius="3dp"  的大小

• app:strokeColor="#FF000000" 圆点的颜色

• app:pageColor="#888888" 背景颜色

• app:fillColor="#FF0000" 充满的颜色

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:app="http://schemas.android.com/apk/res-auto"

    android:layout_width="match_parent"

    android:layout_height="wrap_content"

    android:orientation="vertical" >





    <RelativeLayout

        android:layout_width="match_parent"

        android:layout_height="180dp" >

        <com.itheima.zhbj96.view.HorizontalScrollViewPager

            android:id="@+id/vp_detail"

            android:layout_width="match_parent"

            android:layout_height="match_parent" />

        <RelativeLayout

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:layout_alignParentBottom="true"

            android:background="#9000"

            android:padding="7dp" >

            <TextView

                android:id="@+id/tv_top_title"

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:layout_centerVertical="true"

                android:text="标题"

                android:textColor="#fff"

                android:textSize="17sp" />

            <com.viewpagerindicator.CirclePageIndicator

                android:id="@+id/indicator"

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:layout_alignParentRight="true"

                android:layout_centerVertical="true"

                android:padding="5dip"

                app:fillColor="#FF0000"

                app:pageColor="#888888"

                app:radius="3dp"

                app:strokeColor="#FF000000"

                app:strokeWidth="0dp" />

        </RelativeLayout>

    </RelativeLayout>





</LinearLayout>

【3】找到控件

public CirclePageIndicator mIndicator;// 小圆点

【4】设置圆点        

    // viewpager和小圆点关联

            mIndicator.setViewPager(mVp);

            mIndicator.setSnap(true);// 取消圆点的跟随手指滑动效果

            // mIndicator.setCurrentItem(0);// 0的时候 如果设置了setSnap(true) 会不触发监听

            // 让小圆点默认显示在第0个

            mIndicator.onPageSelected(0);

【5】更新标题      

     mIndicator.setOnPageChangeListener(new OnPageChangeListener() {

                @Override

                public void onPageSelected(int position) {

                    TopNewsInfo topNewsInfo = topnews.get(position);

                    // 更新小标题

                    tvTitle.setText(topNewsInfo.title);

                }

                @Override

                public void onPageScrolled(int position, float positionOffset,

                        int positionOffsetPixels) {

                }

                @Override

                public void onPageScrollStateChanged(int state) {





                }

            });