UIScrollView，下拉效果类似于CalcBot

Question

我正在尝试创建一个类似于CalcBot的UI，您可以用手指拉下视图控制器，它会显示隐藏的背景视图。

我认为这是通过UIScrollView完成的，但是无法确定具有2x水平视图的确切方法，其中一个具有垂直视图。

我确实水平滚动工作正常，我只是坚持如何用垂直卷轴将屏幕1拉下来。

任何提示或指示都将不胜感激。

谢谢Aaron

Answer 1

您可以使用嵌套滚动视图来滚动两个方向。让我们在水平滚动条中有一个垂直滚动条（虽然你可以很好地反过来做），所以视图3和1进入垂直滚动视图，然后进入水平滚动条和视图2。

您可以在代码中创建这样的视图层次结构（可能在主视图控制器的viewDidLoad中）。以下代码段假定view1，view2和view3为webview。

CGRect bounds = self.view.bounds;

// main guy is a horizontal scroller
UIScrollView *hScrollView = [[UIScrollView alloc] initWithFrame:bounds];
hScrollView.contentSize = CGSizeMake(bounds.size.width * 2, bounds.size.height);
hScrollView.delegate = self;
[self.view addSubview:hScrollView];

// the horizontal scroller contains a vertical scroller
UIScrollView *vScrollView = [[UIScrollView alloc] initWithFrame:bounds];
vScrollView.contentSize = CGSizeMake(bounds.size.width, bounds.size.height * 2);
vScrollView.delegate = self;
[hScrollView addSubview:vScrollView];

// add view3 and view1 to the vertical scroller
UIWebView *view3 = [[UIWebView alloc] initWithFrame:bounds];
[view3 loadHTMLString:@"<h1>3</h1>" baseURL:nil];
[vScrollView addSubview:view3];

UIWebView *view1 = [[UIWebView alloc] initWithFrame:CGRectOffset(bounds, 0, bounds.size.height)];
[view1 loadHTMLString:@"<h1>1</h1>" baseURL:nil];
[vScrollView addSubview:view1];
vScrollView.contentOffset = CGPointMake(0, bounds.size.height);

// add view2 to the horizontal scroller
UIWebView *view2 = [[UIWebView alloc] initWithFrame:CGRectOffset(bounds, bounds.size.width, 0)];
[view2 loadHTMLString:@"<h1>2</h1>" baseURL:nil];    
[hScrollView addSubview:view2];

// enable paging in both directions
hScrollView.pagingEnabled = TRUE;
vScrollView.pagingEnabled = TRUE;

那你可以在两个方向滚动，但这也可以让你从view3向右滚动到view2。如果您想阻止这种情况，只要hScrollView显示view3，就应禁用vScollView上的滚动功能。您可以在scrollViewDidEndDecelerating:的委托中的vScrollView中执行此操作。类似的东西：

-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
    if (scrollView == self.verticalScrollView) {
        self.horizontalScrollView.scrollEnabled = (self.verticalScrollView.contentOffset.y > self.view.bounds.origin.y);
    }
}