如何在視圖之間創建一個包含空格的分頁scrollView

Question

我按照教程介紹了如何創建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);
}

Answer 1

聽起來你想要在頁面之間有一個“裝訂線”，這樣每個頁面都會填充滾動視圖，只有在用戶拖動視圖時才能看到裝訂線。 例如，內置的照片應用可以執行此操作。

通過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。