如何配置 UIScrollView 使可见区域永远不会超出背景图像?
Posted
技术标签:
【中文标题】如何配置 UIScrollView 使可见区域永远不会超出背景图像?【英文标题】:How to configure a UIScrollView so the visible area never goes beyond a background image? 【发布时间】:2012-09-01 03:55:10 【问题描述】:在花了半个晚上试图让我自己工作之后,我终于求助于 StackWisdom:
我正在尝试使用一种视差滚动背景图像(类似于 Windows Phone 7 上的 UI)实现水平分页 UIScrollView。我已经设法使用 scrollViewDidScroll 让滚动工作得很好。对于 3 页示例,我使用的是 1460x480/2920x960 像素(3*320 点 + 2*250 宽度填充)的图像。根据我在 scrollViewDidScroll 中使用的因素,滚动视图的右边缘也可以正常工作。
但是,当在第 1 页并尝试进一步向左滚动时,可以看到背景图像在屏幕边框处结束,并且窗口的(灰色、白色等)背景变得可见。如何配置滚动视图,以便在内容区域的左侧有一个额外的,例如 250 像素的背景图像?我尝试过插入、偏移、重新定位内容区域及其无数组合,但无济于事。
另外,现在是早上 5:30,我累了。 -_-
来源:
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
CGRect screenRect = [[self window] bounds];
// Create and configure scroll view
UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:screenRect];
[scrollView setDelegate:self];
[scrollView setPagingEnabled:YES];
[scrollView setShowsHorizontalScrollIndicator:NO];
[[self window] addSubview:scrollView];
pageControl = [[UIPageControl alloc] initWithFrame:CGRectMake(50, 50, 200, 50)];
[pageControl setNumberOfPages:3];
[pageControl setCurrentPage:0];
[pageControl setBackgroundColor:[UIColor clearColor]];
[[self window] addSubview:pageControl];
backgroundImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"desert_panorama_cropped.png"]];
[scrollView addSubview:backgroundImageView];
// Create first content view
screenRect.origin.x = 0;
ContentView *firstContentView = [[ContentView alloc] initWithFrame:screenRect string:@"Page 1"];
[scrollView addSubview:firstContentView];
// Create second content view
screenRect.origin.x = screenRect.size.width;
ContentView *secondContentView = [[ContentView alloc] initWithFrame:screenRect string:@"Page 2"];
[scrollView addSubview:secondContentView];
// Create third content view
screenRect.origin.x = screenRect.size.width * 2.0;
ContentView *thirdContentView = [[ContentView alloc] initWithFrame:screenRect string:@"Page 3"];
[scrollView addSubview:thirdContentView];
CGRect contentRect = screenRect;
contentRect.size.width *= 3.0;
[scrollView setContentSize:contentRect.size];
self.window.backgroundColor = [UIColor whiteColor];
[self.window makeKeyAndVisible];
return YES;
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
float x = scrollView.contentOffset.x;
NSLog(@"Scrollview did scroll to offset: %f", x);
CGRect backgroundImageFrame = backgroundImageView.frame;
backgroundImageFrame.origin.x = x/1.5;
backgroundImageView.frame = backgroundImageFrame;
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
int newOffset = scrollView.contentOffset.x;
int newPage = (int)((newOffset)/(scrollView.frame.size.width));
[pageControl setCurrentPage:newPage];
任何帮助将不胜感激。
【问题讨论】:
所以,您希望图像与内容一起滚动,除非内容滚动过去,我不知道它的正确名称,即它开始相遇的橡皮筋点抵抗和放手会导致回弹。就像,一旦满足该点,图像应该停止滚动,但其他内容应该继续滚动?我对你的理解正确吗?编辑:查看您的scrollViewDidScroll:
方法,我不确定我是否理解正确。可以链接视频之类的吗?
感谢您的努力,但 Russell Ladd 已经在下面解决了我的问题。
【参考方案1】:
我认为您所要做的就是在这一行中添加一个常量,如下所示:
backgroundImageFrame.origin.x = x/1.5 - 250;
【讨论】:
是的,做到了。感觉问题出在scrollViewDidScroll中,但我一生都无法确定它。 ^^ 非常感谢!以上是关于如何配置 UIScrollView 使可见区域永远不会超出背景图像?的主要内容,如果未能解决你的问题,请参考以下文章