Android ViewPager导航小圆点实现无限循环效果

2023-09-26 03:55:06 55

之前用ViewPager做了一个图片切换的推荐栏（就类似与淘宝、头条客户端顶端的推荐信息栏），利用ViewPager很快就能实现，但是一次无意间使用淘宝APP的时候，突然发现它的效果和我做的还不一样，淘宝APP的推荐栏可以左右无限循环切换，而ViewPager自身其实并没有支持这个功能。

其实实现这个无限循环不难，只需要在数据源的首尾各添加一张多余的图片，在onPagerChangeListener()中监听position<1和position>(总数据条目-1)就可以了。另外一点需要注意的是，这里的数据源+2，而导航小圆点却比数据源少2，这样在无限循环的时候，小圆点的切换就不好办了。本人最开始也是写逻辑在onPageSelected()里面判断条件，总感觉挺麻烦的，有没有更好的实现方式呢。答案是肯定的。只需将小圆点也首尾各家一个，并设置为invisible不就好了？

我的代码实现如下：

xml布局：

界面实现：

publicclassHomePageFragmentextendsBaseFragment{

privateViewview;
privateViewPagermViewPager;//顶部信息推荐栏
privateMyViewPagerAdaptermViewPagerAdapter;
privateLinearLayoutll_dots_homepage_top;//顶部信息推荐栏导航点
privateintGUIDE_NUMBER=4;//顶部信息推荐栏的数量
privateImageView[]dotImages;//顶部信息推荐栏引导小圆点
privateintdotCurrentIndex;//顶部信息推荐栏小圆点偏移量
privateMyOnPageChangeListenermOnPageChangeListener;

privateListmListDataViewPage;
privateContextcontext;

@Override
publicvoidonAttach(Contextcontext){
super.onAttach(context);
this.context=context;
}

@Nullable
@Override
publicViewonCreateView(LayoutInflaterinflater,@NullableViewGroupcontainer,@Nullable
BundlesavedInstanceState){
view=inflater.inflate(R.layout.frament_homepage,container,false);

initData();
initView();

returnview;
}

/**
*初始化一些基础数据
*/
privatevoidinitData(){
if(mListDataViewPage!=null){
mListDataViewPage.clear();
mListDataViewPage=null;
}else{
mListDataViewPage=newArrayList<>();
//为了实现无限循环，首位两张图片都是重复的
int[]resource=newint[]{
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(inti=0;i<6;i++){
WeakReferencebitmao=newWeakReference(BitmapFactory
.decodeResource(getResources(),resource[i]));
ImageViewimageView=newImageView(context);
imageView.setImageBitmap(bitmao.get());
imageView.setScaleType(ImageView.ScaleType.FIT_XY);
mListDataViewPage.add(imageView);
}

}

}

/**
*初始化底部推信息推荐栏引导小圆点View
*/
privatevoidinitDots(){
dotImages=newImageView[mListDataViewPage.size()];
for(inti=0;imListDataViewPage.size()||position==dotCurrentIndex){
return;
}

if(mListDataViewPage.size()>1){//多于1，才会循环跳转
if(position<1){//首位之前，跳转到末尾（N）
position=4;
mViewPager.setCurrentItem(position,false);
}elseif(position>4){//末位之后，跳转到首位（1）
position=1;
mViewPager.setCurrentItem(position,false);//false:不显示跳转过程的动画

}else{
dotImages[dotCurrentIndex].setEnabled(false);
dotImages[position].setEnabled(true);
dotCurrentIndex=position;
}
}


}

@Override
publicvoidonPageScrollStateChanged(intstate){

}
}
}

注意代码中加粗的代码。初始的小圆点选中和ViewPager的position选中。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

Android ViewPager导航小圆点实现无限循环效果

热门推荐

随机推荐