iOS -Sticky分段控件,如App Store应用程序

时间:2013-10-08 20:35:32

标签: ios objective-c

我正在创建一个应用程序,在其中一个导航视图中,我的设计与App Store应用程序的设计非常相似 - 请参阅详细信息|评论|相关部分。在类似的路线上,我希望以苹果在他们的应用程序中完成的“相同”方式实现分段控制。 (这也与Apple在艺术家中所做的相似 - >默认iOS 7音乐应用中的专辑导航视图,虽然是表格标题(可能)。)

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

我做了什么 -

我创建了一个带有分段控件的容器视图。当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. 第二个问题源于第一个问题。这似乎是一个非常具体的解决方案。我期待更自然的事情;以及使用表视图或其他东西默认工作的东西。

2 个答案:

答案 0 :(得分: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;
}

我会把调整留给你;)

答案 1 :(得分:4)

这实际上是2次观看。

第一个是UITableView的标题。

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

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

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

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

就是这样。现在你只需记住在每个人被绞死时更新两个分段控件。