如何在视图之间创建具有空间的分页滚动视图

Question

我遵循了有关如何创建滚动视图页面控件的教程：http://www.iosdevnotes.com/2011/03/uiscrollview-paging/

本教程非常好，我很好地实现了代码。这是我的问题：

我想在我的 PageViews 之间放置一个空格，但是当它更改页面时，它会在下一页中显示视图之间的空格。当我更改页面时，滚动必须在空格后停止。

我这里改了教程代码：

- (void)viewDidLoad {
    [super viewDidLoad];

    NSArray *colors = [NSArray arrayWithObjects:[UIColor redColor], [UIColor greenColor], [UIColor blueColor], nil];

    #define space 20

    for (int i = 0; i < colors.count; i++) {
        CGRect frame;
        frame.origin.x = (self.scrollView.frame.size.width + space) * i;
        frame.origin.y = 0;
        frame.size = self.scrollView.frame.

        UIView *subview = [[UIView alloc] initWithFrame:frame];
        subview.backgroundColor = [colors objectAtIndex:i];
        [self.scrollView addSubview:subview];
        [subview release];
    }

    self.scrollView.contentSize = CGSizeMake(self.scrollView.frame.size.width * colors.count+ space*(colors.count-1), self.scrollView.frame.size.height);
}

Answer 1

听起来您想要在页面之间设置一个“gutter”，以便每个页面都填充滚动视图，并且该 gutter 仅在用户拖动视图时可见。例如，内置的照片应用程序会执行此操作。

将滚动视图扩大space 点。例如，如果您希望滚动视图看起来与屏幕一样宽（320 点），项目之间有 20 点的边距，那么将滚动视图设置为 340 点宽，额外的 20 点悬挂在右边缘屏幕。

- (void)viewDidLoad {
    [super viewDidLoad];

    NSArray *colors = [NSArray arrayWithObjects:[UIColor redColor], [UIColor greenColor], [UIColor blueColor], nil];

    #define kGutterWidth 20

    UIScrollView *scrollView = self.scrollView;
    CGRect scrollViewFrame = scrollView.frame;
    scrollViewFrame.size.width += kGutterWidth;
    scrollView.frame = scrollViewFrame;

    CGSize scrollViewSize = scrollView.bounds.size;

    for (int i = 0; i < colors.count; i++) {
        CGRect frame = CGRectMake(scrollViewSize.width * i, 0,
            scrollViewSize.width - kGutterWidth, scrollViewSize.height);
        UIView *subview = [[UIView alloc] initWithFrame:frame];
        subview.backgroundColor = [colors objectAtIndex:i];
        [scrollView addSubview:subview];
        [subview release];
    }

    scrollView.contentSize = CGSizeMake(
        colors.count * scrollViewSize.width,
        scrollViewSize.height);
}

Answer 2

我以前曾走过这条路，我建议按照教程代码的建议布置滚动视图，子视图之间没有空格。

相反，给每个子视图另一个子视图，其框架从它的父视图插入...

CGRect scrollViewFrame = self.scrollView.frame;

for (int i=0; i<colors.count; i++) {
    CGRect frame = CGRectMake(scrollViewFrame.size.width * i, 0, scrollViewFrame.size.width, scrollViewFrame.size.height);

    // this will be our framing view, full size with no gaps
    UIView *subview = [[UIView alloc] initWithFrame:frame];
    subview.backgroundColor = [UIColor whiteColor];

    // here's the trick - use CGRectInset on the framing view's bounds
    UIView *colorView = [[UIView alloc] initWithFrame:CGRectInset(subview.bounds, 10, 10)];
    colorView.backgroundColor = [colors objectAtIndex:i];

    [subview addSubview:colorView];
    [self.scrollView addSubview:subview];

    // aren't you using ARC?  your tutorial is probably older than ARC
    // would strongly suggest converting to ARC
    [subview release];
    [colorView release];
}
self.scrollView.contentSize = CGSizeMake(self.scrollView.frame.size.width * colors.count, self.scrollView.frame.size.height);

这种方法的好处是顶层子视图布局的数学仍然是宽度的简单倍数。您将引用该插入常量的唯一位置是它所属的 CGRectInset。