之前用view pager做了一个图片切换的推荐栏（就类似与淘宝、头条客户端顶端的推荐信息栏），利用view pager很快就能实现，但是一次无意间使用淘宝app的时候，突然发现它的效果和我做的还不一样，淘宝app的推荐栏可以左右无限循环切换，而viewpager自身其实并没有支持这个功能。
其实实现这个无限循环不难，只需要在数据源的首尾各添加一张多余的图片，在onpagerchangelistener()中监听position<1和position>(总数据条目-1)就可以了。另外一点需要注意的是，这里的数据源+2，而导航小圆点却比数据源少2，这样在无限循环的时候，小圆点的切换就不好办了。本人最开始也是写逻辑在onpageselected()里面判断条件，总感觉挺麻烦的，有没有更好的实现方式呢。答案是肯定的。只需将小圆点也首尾各家一个，并设置为invisible不就好了？
我的代码实现如下：
xml布局：
我要评论
<?xml version="1.0" encoding="utf-8"?>
<relativelayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.view.viewpager
android:id="@+id/vp_homepage"
android:layout_width="match_parent"
android:layout_height="match_parent"
></android.support.v4.view.viewpager>
<linearlayout
android:id="@+id/ll_dots_homepage_top"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignparentbottom="true"
android:layout_marginbottom="8dp"
android:gravity="center"
android:orientation="horizontal">
<imageview
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:padding="5dp"
android:visibility="invisible"
android:src="@drawable/dots"/>
<imageview
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:padding="5dp"
android:src="@drawable/dots"/>
<imageview
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:padding="5dp"
android:src="@drawable/dots"/>
<imageview
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:padding="5dp"
android:src="@drawable/dots"/>
<imageview
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:padding="5dp"
android:src="@drawable/dots"/>
<imageview
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:padding="5dp"
android:visibility="invisible"
android:src="@drawable/dots"/>
</linearlayout>
</relativelayout>
界面实现：
public class homepagefragment extends basefragment {
private view view;
private viewpager mviewpager;//顶部信息推荐栏
private myviewpageradapter mviewpageradapter;
private linearlayout ll_dots_homepage_top;//顶部信息推荐栏导航点
private int guide_number = 4; //顶部信息推荐栏的数量
private imageview[] dotimages; //顶部信息推荐栏引导小圆点
private int dotcurrentindex; //顶部信息推荐栏小圆点偏移量
private myonpagechangelistener monpagechangelistener;
private list<view> mlistdataviewpage;
private context context;
@override
public void onattach(context context) {
super.onattach(context);
this.context = context;
}
@nullable
@override
public view oncreateview(layoutinflater inflater, @nullable viewgroup container, @nullable
bundle savedinstancestate) {
view = inflater.inflate(r.layout.frament_homepage, container, false);
initdata();
initview();
return view;
}
/**
* 初始化一些基础数据
*/
private void initdata() {
if (mlistdataviewpage != null) {
mlistdataviewpage.clear();
mlistdataviewpage = null;
} else {
mlistdataviewpage = new arraylist<>();
// 为了实现无限循环，首位两张图片都是重复的
int[] resource = new int[]{
r.drawable.test_viewpager_homepage_4, r.drawable.test_viewpager_homepage_1, r.drawable.test_viewpager_homepage_2, r
.drawable.test_viewpager_homepage_3, r.drawable.test_viewpager_homepage_4,r.drawable.test_viewpager_homepage_1,};
for (int i = 0; i < 6; i++) {
weakreference<bitmap> bitmao = new weakreference<bitmap>(bitmapfactory
.decoderesource(getresources(), resource[i]));
imageview imageview = new imageview(context);
imageview.setimagebitmap(bitmao.get());
imageview.setscaletype(imageview.scaletype.fit_xy);
mlistdataviewpage.add(imageview);
}
}
}
/**
* 初始化底部推信息推荐栏引导小圆点view
*/
private void initdots() {
dotimages = new imageview[mlistdataviewpage.size()];
for (int i = 0; i < mlistdataviewpage.size(); i++) {
dotimages[i] = (imageview) ll_dots_homepage_top.getchildat(i);
dotimages[i].setenabled(false);
}
**//将第一个小圆点设置为高亮，这里的第一个偏移量是1，不是0
dotimages[1].setenabled(true);
dotcurrentindex = 1;**
}
/**
* initview
*/
private void initview() {
findlayout();
findview();
}
/**
* findlayout
*/
private void findlayout() {
ll_dots_homepage_top = (linearlayout) view.findviewbyid(r.id.ll_dots_homepage_top);
initdots();
}
/**
* 初始化控件
*/
private void findview() {
mviewpager = (viewpager) view.findviewbyid(r.id.vp_homepage)；
mviewpageradapter = new myviewpageradapter(mlistdataviewpage);
monpagechangelistener = new myonpagechangelistener();
mviewpager.setadapter(mviewpageradapter);
mviewpager.setonpagechangelistener(monpagechangelistener);
**mviewpager.setcurrentitem(1,false); //默认选中第二张图片**
}
private class myonpagechangelistener implements viewpager.onpagechangelistener {
@override
public void onpagescrolled(int position, float positionoffset, int positionoffsetpixels) {
}
@override
public void onpageselected(int position) {
if (position < 0 || position > mlistdataviewpage.size() || position == dotcurrentindex) {
return;
}
if ( mlistdataviewpage.size() > 1) { //多于1，才会循环跳转
if ( position < 1) { //首位之前，跳转到末尾（n）
position = 4;
mviewpager.setcurrentitem(position,false);
} else if ( position > 4) { //末位之后，跳转到首位（1）
position = 1;
mviewpager.setcurrentitem(position,false); //false:不显示跳转过程的动画
}else {
dotimages[dotcurrentindex].setenabled(false);
dotimages[position].setenabled(true);
dotcurrentindex = position;
}
}
}
@override
public void onpagescrollstatechanged(int state) {
}
}
}
注意代码中加粗的代码。初始的小圆点选中和viewpager的position选中。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问， 点击进行留言回复！！
LongClick原理、上下文菜单原理、EditText长按弹窗原理、WebView长按弹窗自定义、修复WebView全选重复bug ———————————————— 版权声明：本文为CSDN博主「
JobScheduler 实现 特定时间，特定条件（系统空闲，电池电量，磁盘空间 ……）下执行任务
网友评论