問題描述

分頁模式下的 UIScrollView 假定頁面彼此相鄰，沒有間隙.但是，如果您在照片"應用程序中打開一張照片并在照片中滑動，您會發現它在頁面之間存在一些間隙.我也想要這些差距.

UIScrollView in paging mode assumes the pages are located right next to each other, with no gap. However if you open a photo in the Photos app and swipe through photos, you can see that it has some gap between pages. I want these gaps too.

我正在尋找現有的解決方案(如果有的話)，或者除了我在下面解釋的那個之外，還有一些關于實現頁面間隙的更奇怪的想法.或者也許我錯過了一些明顯的簡單方法?

I'm looking for existing solutions if any, or for some more bizarre ideas about implementing the page gaps besides the one I have explained below. Or maybe there's some obvious easy way I am missing?

明確一點:我希望間隙僅在滾動時可見，因此我不能簡單地插入頁面內容.

To be clear: I want the gap to only be visible while scrolling, so I cannot simply inset the page content.

我的計劃是嘗試從 scrollViewDidScroll 回調內部移動頁面內容，以便(假設您向右滾動)最初目標頁面稍微偏移到其頁面邊界的右側，當您到達目標頁面時，它又回到了正確的位置，并且源頁面稍微偏離了其邊界的左側.(或者也許不是連續移動東西，我會更好地移動偏移量，比如說，正好在頁面之間的中間.)

My plan is to try moving the page content from inside scrollViewDidScroll callback, so that (assuming you're scrolling to the right) initially the target page is slightly offset to the right of its page boundaries, and by the time you arrive at the target page it's back at its proper location, and the source page is slightly offset to the left of its boundaries. (Or maybe instead of moving things continuously, I'll be better off shifting the offsets, say, exactly halfway between pages.)

我是ScrollingMadness article+example的作者把一些人介紹到這里.我已經實現了程序縮放，并讓照片內縮放+滾動與照片間分頁一起工作.所以我知道如何使用 UIScrollView，并且正在尋找高級的東西.

I'm the author of the ScrollingMadness article+example that I've been referring some people to here. I've implemented progammatic zooming, and got in-photo zooming+scrolling working together with inter-photo paging. So I know how to play with UIScrollView, and am looking for the advanced stuff.

請不要將我指向 TTScrollView.我自己已經向很多人指出了它，但我認為它與原生 UIScrollView 行為相去甚遠，并且不想在我的項目中使用它.

Please don't point me at TTScrollView. I've already pointed many people to it myself, but I consider it's feel too far from the native UIScrollView behaviour, and do not want to use it in my projects.

推薦答案

請注意，這個答案已經很老了.基本概念仍然有效，但你不應該在 iOS7 和 8 中硬編碼視圖大小.即使你忽略這個建議，你不應該使用 480 或 330.

Note that this answer is quite old. The basic concept still works but you should not be hard coding view sizes in iOS7 and 8. Even if you ignore that advice, you should not use 480 or 330.

您是否嘗試過使 UIScrollView 的框架略大于屏幕(假設您想全屏顯示圖像，然后將您的子視圖排列在比屏幕略大的位置上)屏幕邊界.

Have you tried making the frame of the UIScrollView slightly larger than the screen (assuming that you want to display your images fullscreen and then arranging your subviews on the same slightly-larger-than-the-screen boundaries.

#define kViewFrameWidth 330; // i.e. more than 320

CGRect scrollFrame;
scrollFrame.origin.x = 0;
scrollFrame.origin.y = 0; 
scrollFrame.size.width = kViewFrameWidth;
scrollFrame.size.height = 480;

UIScrollView* myScrollView = [[UIScrollView alloc] initWithFrame:scrollFrame];
myScrollView.bounces = YES;
myScrollView.pagingEnabled = YES;
myScrollView.backgroundColor = [UIColor redColor];

UIImage* leftImage = [UIImage imageNamed:@"ScrollTestImageL.png"];
UIImageView* leftView = [[UIImageView alloc] initWithImage:leftImage];
leftView.backgroundColor = [UIColor whiteColor];
leftView.frame = CGRectMake(0,0,320,480);

UIImage* rightImage = [UIImage imageNamed:@"ScrollTestImageR.png"];
UIImageView* rightView = [[UIImageView alloc] initWithImage:rightImage];
rightView.backgroundColor = [UIColor blackColor];
rightView.frame = CGRectMake(kViewFrameWidth * 2,0,320,480);

UIImage* centerImage = [UIImage imageNamed:@"ScrollTestImageC.png"];
UIImageView* centerView = [[UIImageView alloc] initWithImage:centerImage];
centerView.backgroundColor = [UIColor grayColor];
centerView.frame = CGRectMake(kViewFrameWidth,0,320,480);

[myScrollView addSubview:leftView];
[myScrollView addSubview:rightView];
[myScrollView addSubview:centerView];

[myScrollView setContentSize:CGSizeMake(kViewFrameWidth * 3, 480)];
[myScrollView setContentOffset:CGPointMake(kViewFrameWidth, 0)];

[leftView release];
[rightView release];
[centerView release];

抱歉，如果無法編譯，我在橫向應用程序中對其進行了測試，然后將其手動編輯回縱向.我相信你明白了.它依賴于全屏視圖的超級視圖剪輯.

Apologies if this doesn't compile, I tested it in a landscape app and hand edited it back to portrait. I'm sure you get the idea though. It relies on the superview clipping which for a full screen view will always be the case.

這篇關于使用 pagingEnabled 的 UIScrollView 中頁面之間的照片應用程序式間隙的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！