UIScrollView，下拉效果類似於CalcBot

Question

我正在嘗試製作一個類似於CalcBot的UI，您可以用手指拉下視圖控制器，它會顯示一個隱藏的背景視圖。

我認爲這是用UIScrollView完成的，但不能找出確切的方法，例如有兩個水平視圖，其中一個垂直。

我確實有水平滾動運作良好，我只是堅持我怎樣才能使屏幕1下拉帶有垂直滾動條。

任何提示或指針，將不勝感激。

謝謝亞倫

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。如果要防止這種情況發生，只要vScollView顯示view3，就應該禁用滾動hScrollView。你可以在的代表scrollViewDidEndDecelerating:中這樣做。例如：

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