IOS：具有无限分页视图的UIScrollView [英] IOS: UIScrollView with an infinite paging view

问题描述

我有一个滚动视图的代码来显示3个图像：

I have this code for a scrollview to showe 3 images:

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

}

但是现在我想做一个滚动视图，当滚动视图的第一个图像显示在最后一个图像时，如果我回去的话，当我有第一个图像时，它同样的东西，它必须显示最后一个图像;所以我想创建一个分页循环。

But now I want to do a scrollview that when is in last image show me after the first image of scroll view and the same thing when I have the first image if I go back, it must show the last image; so I want create a paging loop.

推荐答案

基本思路是将自己设置为UIScrollViewDelegate并将一些模运算应用于滚动位置以包裹它。

The basic idea is to set yourself as a UIScrollViewDelegate and apply some modulo arithmetic to the scroll position in order to wrap it around.

这个想法有两个基本的变化。假设你的图像是A，B，C，那么你现在将它们放在以ABC命名的滚动视图中。

There are two basic variations on the idea. Suppose your images are A, B, C, so you currently have them within the scrollview ordered as ABC.

在更符合逻辑的解决方案中 - 特别是如果你有很多和很多图像 - 你看滚动位置，一旦它到达向右推动视图的位置，C离开屏幕，你将图像重新排序为CAB并将当前滚动位置向右移动一个点移动对用户是不可见的。换句话说，滚动位置被限制在两个屏幕的区域，以B的中间为中心（因此，你得到所有的B和半边的屏幕）。无论何时将其从左侧某处包装到右侧某处，您都可以将所有图像视图向右移动一个位置。反之亦然。

In the more logically pleasing solution — especially if you had lots and lots of images — you watch the scroll position and as soon as it gets to a position where the view is being pushed rightward and C has left the screen, you reorder the images as CAB and shift the current scroll position one spot to the right so that the move is invisible to the user. To put that another way, the scroll position is restrained to an area of two screens, centred on the middle of B (so, you get all of B and half a screen either side). Whenever you wrap it from somewhere on the left to somewhere on the right you shift all your image views one place to the right. And vice versa.

在稍微容易实现的变体中，不是创建带有ABC排列图像的滚动视图，而是安排为CABCA。然后将相同的环绕应用于四个屏幕的中心区域，并且不进行任何视图重组。

In the slightly easier to implement variation, instead of creating a scroll view with images arranged ABC, arrange then as CABCA. Then apply the same wrap around logic but to a central area of four screens and don't do any view reshuffling.

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

Make sure you use just setContentOffset: (or the dot notation, as in scrollView.contentOffset =) as a setter. setContentOffset:animated: will negate velocity.

这篇关于IOS：具有无限分页视图的UIScrollView的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！