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

时间:2011-07-31 20:02:37

标签: ios xcode loops uiscrollview

我有滚动视图的代码来显示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

}

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

1 个答案:

答案 0 :(得分:8)

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

这个想法有两个基本的变化。假设您的图像是A,B,C,那么您当前将它们放在按ABC排序的滚动视图中。

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

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

确保仅使用setContentOffset:(或点符号,如scrollView.contentOffset =)作为设置器。 setContentOffset:animated:将否定速度。