之前用View Pager做了一个图片切换的推荐栏(就类似与淘宝、头条客户端顶端的推荐信息栏),利用View Pager很快就能实现,但是一次无意间使用淘宝APP的时候,突然发现它的效果和我做的还不一样,淘宝APP的推荐栏可以左右无限循环切换,而ViewPager自身其实并没有支持这个功能。
其实实现这个无限循环不难,只需要在数据源的首尾各添加一张多余的图片,在onPagerChangeListener()中监听position<1和position>(总数据条目-1)就可以了。另外一点需要注意的是,这里的数据源+2,而导航小圆点却比数据源少2,这样在无限循环的时候,小圆点的切换就不好办了。本人最开始也是写逻辑在onPageSelected()里面判断条件,总感觉挺麻烦的,有没有更好的实现方式呢。答案是肯定的。只需将小圆点也首尾各家一个,并设置为invisible不就好了?
我的代码实现如下:
xml布局:
<&#63;xml version="1.0" encoding="utf-8"&#63;>
界面实现:
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 ListmListDataViewPage; 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 bitmao = new WeakReference (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() || 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选中。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。