使用 pagingEnabled 的 UIScrollView 中页面之间的照片应

Photos app-like gap between pages in UIScrollView with pagingEnabled(使用 pagingEnabled 的 UIScrollView 中页面之间的照片应用程序式间隙)

问题描述

分页模式下的 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 中页面之间的照片应用程序式间隙的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！