IOS：具有无限分页视图的 UIScrollView

Question

我有这个滚动视图的代码来显示 3 张图片：

const CGFloat kScrollObjHeight = 150.0;
const CGFloat kScrollObjWidth = 320.0;
const NSUInteger kNumImages = 3;


- (void)layoutScrollImages
{
UIImageView *view = nil;
NSArray *subviews = [scrollView1 subviews];

// reposition all image subviews in a horizontal serial fashion
CGFloat curXLoc = 0;
for (view in subviews)
{
    if ([view isKindOfClass:[UIImageView class]] && view.tag > 0)
    {
        CGRect frame = view.frame;
        frame.origin = CGPointMake(curXLoc, 0);
        view.frame = frame;

        curXLoc += (kScrollObjWidth);
    }
}


// set the content size so it can be scrollable
[scrollView1 setContentSize:CGSizeMake((kNumImages * kScrollObjWidth), [scrollView1 bounds].size.height)];

}

- (void)viewDidLoad
{
self.view.backgroundColor = [UIColor viewFlipsideBackgroundColor];

// 1. setup the scrollview for multiple images and add it to the view controller
//
// note: the following can be done in Interface Builder, but we show this in code for clarity
[scrollView1 setBackgroundColor:[UIColor blackColor]];
[scrollView1 setCanCancelContentTouches:NO];
scrollView1.indicatorStyle = UIScrollViewIndicatorStyleWhite;
scrollView1.clipsToBounds = YES;        // default is NO, we want to restrict drawing within our scrollview
scrollView1.scrollEnabled = YES;

// pagingEnabled property default is NO, if set the scroller will stop or snap at each photo
// if you want free-flowing scroll, don't set this property.
scrollView1.pagingEnabled = YES;
scrollView2.pagingEnabled = YES;
scrollView3.pagingEnabled = YES;

// load all the images from our bundle and add them to the scroll view
NSUInteger i;
for (i = 1; i <= kNumImages; i++)
{
    NSString *imageName = [NSString stringWithFormat:@"image%d.jpg", i];
    UIImage *image = [UIImage imageNamed:imageName];
    UIImageView *imageView = [[UIImageView alloc] initWithImage:image];

    // setup each frame to a default height and width, it will be properly placed when we call "updateScrollList"
    CGRect rect = imageView.frame;
    rect.size.height = kScrollObjHeight;
    rect.size.width = kScrollObjWidth;
    imageView.frame = rect;
    imageView.tag = i;  // tag our images for later use when we place them in serial fashion
    [scrollView1 addSubview:imageView];
    //[scrollView2 addSubview:imageView];
    //[scrollView3 addSubview:imageView];
    [imageView release];
}

[self layoutScrollImages];  // now place the photos in serial layout within the scrollview

}

但是现在我想做一个滚动视图，当我在滚动视图的第一张图片之后显示最后一张图片时，如果我返回第一张图片，它必须显示最后一张图片；所以我想创建一个分页循环。

Answer 1

基本思想是将自己设置为 UIScrollViewDelegate 并对滚动位置应用一些模运算以将其环绕。

这个想法有两种基本的变化。假设您的图像是 A、B、C，因此您当前在滚动视图中将它们按 ABC 排序。

在逻辑上更令人满意的解决方案中——尤其是如果你有很多很多图像——你观察滚动位置，一旦它到达视图被向右推并且 C 离开屏幕的位置，你重新排序图像作为 CAB 并将当前滚动位置向右移动一个点，以便用户看不到移动。换句话说，滚动位置被限制在两个屏幕的区域内，以 B 的中间为中心（因此，您将获得所有 B 和两侧的半个屏幕）。每当您将其从左侧某处包装到右侧某处时，您都会将所有图像视图向右移动一个位置。反之亦然。

在稍微容易实现的变体中，不是创建一个滚动视图，图像排列为 ABC，然后排列为 CABCA。然后将相同的环绕逻辑应用到四个屏幕的中心区域，并且不要进行任何视图重新洗牌。

确保只使用setContentOffset:（或点符号，如scrollView.contentOffset =）作为setter。 setContentOffset:animated: 将抵消速度。