4

我正在创建一个应用程序，在其中一个导航视图中，我的设计与 App Store 应用程序的设计非常相似 - 请参阅详细信息 | 评论 | 相关部分。按照类似的思路，我希望以 Apple 在其应用程序中所做的“相同”方式实现分段控制。（这也类似于 Apple 在默认 iOS 7 音乐应用程序的 Artist -> Albums 导航视图中所做的，尽管是表头（可能）。）

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

我做了什么——</p>

我用分段控件创建了一个容器视图。当 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. 第二个担忧源于第一个。这似乎是一个非常具体的解决方案。我期待更自然的东西；以及默认情况下可以使用表格视图或其他东西的东西。
4

2 回答 2

10

为什么不简单地使用 a 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;
}

我会把调整留给你；）

于 2013-10-08T20:59:45.593 回答
4

这实际上是 2 个视图。

第一个是 UITableView 的标题。

这包括分段控件和应用程序图标、安装按钮等...

第二个视图有一个分段控件，它位于屏幕顶部并被隐藏。

当tableview滚动时你可以拦截滚动视图委托方法scrollView:didScroll...

在这里，如果 scrollView 偏移量大于标题的高度，则使第二个视图可见。否则将其隐藏。

就是这样。现在您只需要记住在一个被挂起时更新两个分段控件。

于 2013-10-08T21:07:29.977 回答