iOS — 粘性分段控件，如 App Store 应用程序

Question

我正在创建一个应用程序，在其中一个导航 View 中，我有一个与 App Store 应用程序非常相似的设计 — 查看详细信息 |评论 |相关部分。按照类似的思路，我希望以 Apple 在其应用程序中所做的“相同”方式实现分段控件。 (这也类似于 Apple 在默认的 iOS 7 音乐应用程序中的艺术家 -> 专辑导航 View 中所做的，尽管是表格标题(可能)。)

• 如果向上滚动，当分段控件容器接触到导航栏时，它会停留在那里。
• 由于与之相关的 alpha，它还允许用户注意到这是某种叠加层。
• 当您向下滚动时，它会在需要时移动到位。

我做了什么——

我已经创建了一个带有分段控件的容器 View 。当 scrollView 滚动时，我重新定位我的容器 View 以实现粘性效果。这只是伪代码，但我的代码确实有效。

- (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. 第二个问题源于第一个问题。这似乎是一个非常具体的解决方案。我期待更自然的东西；以及默认情况下可以使用表格 View 或其他东西工作的东西。

Answer 1

为什么不直接使用 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;
}

我会把调整留给你 ;)