2013-10-08 25 views
4

我創建一個應用程序,並在一個導航視圖中,我有一個非常類似的設計作爲App Store的應用程序 - 查看詳情|評論|相關章節。遵循類似的路線,我希望以蘋果公司在其應用程序中採用的「相同」方式實施細分控制。 (這也類似於Apple在默認iOS 7音樂應用程序中的「藝術家 - 相冊」導航視圖中的操作,儘管表格標題(也許)。)的iOS -Sticky分段控制像App Store應用

  • 如果向上滾動,當分段控件容器觸摸導航欄,它粘在那裏。
  • 它還允許用戶注意到,這是某種形式的疊加,由於與它相關的阿爾法。
  • 向下滾動時,它會在需要時移動到位。

我做了什麼 -

我已經創建了分段控制的容器視圖。當scrollView滾動時,我重新定位我的容器視圖以完成粘性效果。這只是僞代碼,但我的代碼實際上工作。

- (void)scrollViewDidScroll:(UIScrollView *)scrollView 
{ 
    if (scrollView == self.labTestScrollView) 
    { 
     /* 
     As soon as the user scrolls up, y changes, therefore, we need to stick the options container view 
     such that it doesn't go past the UINavigationBar 
     Need to check if the origin of the options container view in the coordinate system of the main 
     superview is just gone past the UINavigationBar in this controller's view. 
     - get the bounds rect for the options container view 
     - convert these bounds and position them in the coordinates of this controller's view 
     - check if origin.x for container view is less than that of view.origin.y 
     - if less than stick it by converting the headerFrame to the coordinate system of the options 
     container view; and raise the stuck flag 
     - if greater, check if the stuck flag is raised; check for another object in space before the container view and adjust accordingly. 
     */ 
    } 
} 

這裏有兩個問題:

  1. 無疊加效應。我可以配置alpha,使效果更清晰一些,但這似乎並不自然。
  2. 第二個問題源於第一個問題。這似乎是一個非常具體的解決方案。我期待着更自然的事情;以及默認使用表格視圖或其他方法的東西。

回答

10

爲什麼不能簡單地用一個UITableView

將在第0您的「熱門內容」,並有該節沒有標題。把所有其他的東西放在第1部分,並給你的UISegmentedControl標題。

下面的代碼工作得很好。您可能希望找到一種方法,讓頭部的背景具有「模糊」效果,以再一次模仿Apple的行爲;也許GPUimage可以幫助你呢?

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView { 
    return 2; 
} 

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section { 
    return section == 0 ? 1 : 5; 
} 

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { 
    NSString *identifier = indexPath.section == 0 ? @"header" : @"content"; 
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:identifier]; 
    // customize cell 
    return cell; 
} 

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section { 
    if(section == 1) { 
     UISegmentedControl *segmentedControl = [[UISegmentedControl alloc] initWithItems:@[@"Foo", @"Bar"]]; 
     segmentedControl.backgroundColor = [UIColor colorWithWhite:1.0 alpha:0.95]; 
     return segmentedControl; 
    } 
    return nil; 
} 

- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section { 
    return section == 0 ? 0 : 44; 
} 

我會離開的調整給你;)

+0

好的,這種說法很有道理。 參考App Store應用程序,圖標,應用程序的名稱等位於Section 0中,並且沒有任何標題。 'UISegmentedControl'後的所有內容都在第1節中,'UISegmentedControl'是本節的標題。這是你說的嗎? – p0lAris

+0

這是正確的。 *查看代碼示例的更新答案* – fguchelaar

+0

好吧,這太好了。我明白你做了什麼。這幾乎是我正在尋找的。非常感謝! :) – p0lAris

4

這實際上是2次。

首先是一個UITableView的報頭。

這包括分段控制和應用程序圖標,安裝按鈕,等...

第二種觀點具有分段控制,它位於在屏幕的頂部,並且被隱藏。

當tableview中滾動,你可以攔截滾動視圖的委託方法滾動視圖:didScroll ...

在這裏,如果滾動視圖偏移大於標題的高度更大然後進行第二視圖中可見。否則讓它隱藏起來。

就是這樣。現在你只需要記住每當一個被絞死時更新兩個分段控件。

+0

我明白了。是否有一些測試代碼可以完成你剛剛描述的內容?另外,你確定,這是App Store應用程序的實際實現嗎? – p0lAris

+2

除了蘋果開發人員之外,沒有人會確切知道它是什麼。我過去做過這樣的事情。不過,我也喜歡fguchelaar的解決方案。實際上,實際的實現可能既不是上述情況。 – Fogmeister

+0

當然。感謝您的輸入。 – p0lAris