如何在视图之间创建一个包含空格的分页scrollView

时间:2012-09-11 01:23:53

标签: iphone objective-c scrollview uipagecontrol

我遵循了有关如何创建scrollView页面控件的教程: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);
}

2 个答案:

答案 0 :(得分:9)

听起来你想要在页面之间有一个“装订线”,这样每个页面都会填充滚动视图,只有在用户拖动视图时才能看到装订线。例如,内置的照片应用可以执行此操作。

使您的滚动视图更宽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);
}

答案 1 :(得分: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。