照片app之间的差异在UIScrollView与pagingEnabled的页面之间 [英] Photos app-like gap between pages in UIScrollView with pagingEnabled

问题描述

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.)

我是< a href =http://github.com/andreyvit/ScrollingMadness/tree/master =nofollow noreferrer> 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];

$ b <肖像。我相信你得到的想法，但。它依赖于superview剪辑，对于全屏视图将始终是这种情况。

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.

这篇关于照片app之间的差异在UIScrollView与pagingEnabled的页面之间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！