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) {
}
});