UIScrollView图片循环

UIScrollView循环显示图片:

假设有图片A、B、C,希望达到以下效果:
A->B->C->A->B或者C->B->A->C->B

这种情况下,切合实际的做法是定义比图片多2个的UIImageView,排列如下:
1C–1A–B–2C–2A (1C=2C;1A=2A)

  • 当1A向左滑动即1A->1C,在界面显示成1C时,使UIScrollView的偏移值为2C对应的坐标
  • 当2C向右滑动即2C->2A,在界面显示成2A时,使UIScrollView的偏移值为1A对应的坐标

改变UIScrollView的偏移值在以下方法中实现:

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView // 减速滑动结束时调用

改变UIScrollView的偏移值使用方法:

[scrollView setContentOffset:CGPointMake(x, 0) animated:NO]; // 动画效果需要关闭

建议:
bounces // 弹跳属性
最好把UIScrollView的bounces关闭,否则在A--C之间转换过快时会出现弹出部分白色边界情况

UIScrollView使用3个UIImageView实现多图片循环显示:

假设有图片A、B、C、D、E、F、G,希望使用3个UIImageView实现图片的显示。

定义3个UIImageView对象,U1、U2、U3:

  • U1、U2、U3中image默认对应的图片分别是A、B、C;
  • 默认显示的图片是B,即UIScrollView的偏移值为U2对应的坐标;
  • 当U2向左滑动即U2->U1,在界面显示成U1时,更改U1、U2、U3的image对应图片为G、A、B,并同时设置UIScrollView的偏移值为U2对应的坐标;
  • 当U2向右滑动即U2->U3,在界面显示成U3时,更改U1、U2、U3的image对应图片为B、C、D,并同时设置UIScrollView的偏移值为U2对应的坐标;

更多操作时同理。

核心操作---始终显示的UIImageView为U2;

改变UIScrollView的偏移值在以下方法中实现:

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView // 减速滑动结束时调用

改变UIScrollView的偏移值使用方法:

[scrollView setContentOffset:CGPointMake(x, 0) animated:NO]; // 动画效果需要关闭

编码提示:

必要宏和成员说明

IMAGE_NUMBER    // 图片数量
_centerImageIndex  // 中心图片名索引
_imageNameArray // 图片名数组
_leftImageView; // 左边图片对应UIImageView
_rightImageView; // 右边图片对应UIImageView
_centerImageView; // 中心图片对应UIImageView

向左滑动时,中心图片名索引对应值

_centerImageIndex = (_centerImageIndex + IMAGE_NUMBER - 1) % IMAGE_NUMBER // 图片名索引(0~IMAGE_NUMBER - 1)

向右滑动时,中心图片名索引对应值

_centerImageIndex = (_centerImageIndex + 1) % IMAGE_NUMBER

左边图片名索引

(_centerImageIndex + IMAGE_NUMBER - 1) % IMAGE_NUMBER

右边图片名索引

(_centerImageIndex + 1) % IMAGE_NUMBER

建议:
bounces // 弹跳属性
最好把UIScrollView的bounces关闭,否则转换过快时会出现弹出部分白色边界情况

你可能感兴趣的:(UIScrollView图片循环)