如何制作像 Instagram 一样的导航栏

Posted 2023-03-31

【中文标题】如何制作像 Instagram 一样的导航栏

【英文标题】：How to make Navigation Bar like Instagram

【发布时间】：2013-03-12 21:14:25

【问题描述】：

我需要实现这样的东西：

tableView 必须反弹，但导航栏不能。

我尝试了很多不同的变体。 像这样的：

- (void)scrollViewDidScroll:(UIScrollView *)scrollView

    CGRect imageViewFrame = self.imageView.frame;
    CGRect tableViewFrame = self.tableView.frame;
    //ImageView - is top view(instead of NavBar)
    //defaultHeight - is default height of tableView
    imageViewFrame.origin.y = MIN(0, MAX(-scrollView.contentOffset.y, -100));
    tableViewFrame.origin.y = imageViewFrame.origin.y + 100;
    tableViewFrame.size.height = defaultHeight - imageViewFrame.origin.y;

    self.imageView.frame = imageViewFrame;
    self.tableView.frame = tableViewFrame;

得到这个：

这不合适，因为在 Instagram 中 tableView 的大小没有改变（只看滚动指示器，如果 tableView 的大小改变了，它们也改变了）

我还尝试将 View 作为 subView 添加到 tableView 中，它可以工作，但不完全是我需要的。 在tableView之外的Instagram导航栏中，也不适合。

在 facebook 应用搜索栏的行为完全相同

谁能帮帮我？

谢谢！

【问题讨论】：

我真的不确定我是否正确，你是说你想要一个覆盖你内容的标题视图吗？也许在您的图像中添加更多注释，因为我没有看到任何可能让我感到困惑的导航栏。

@7usam，我可能说错了，我需要让导航栏（或任何其他视图）的行为与 Instagram 或 Facebook 中的相同。

你说的是 Instagram 中的“名牌”吗？

不，我说的是导航栏。但实际上我不在乎它是导航栏还是视图，主要是它的行为方式与 instagram 中的相同

如何在示例代码中使用相同的方法，而不是增加 tableview 的高度，您可以向上平移它。让 tableview 以完整的高度开始（它被标签栏隐藏，直到导航视图不碍事）

【参考方案1】：

在示例代码中使用相同的方法，但不是增加 tableview 的高度，而是预先加载额外的（不可见高度）并通过减小框架的 y 将其向上移动。额外的高度将在屏幕外。如果内容高度不够大而无法离屏，则不需要设置离屏高度。

在开始时添加一个高度 = 0 的标题，当您向下滚动时，它会增加大小，最大为 100（空标题现在将离开屏幕）。这样滚动时内容不会被截断。

【讨论】：

如果你看 2 和 3 的截图，你必须注意到表格视图单元格隐藏在上视图中。移动顶视图和单元格的速度不同，因为我更改了 tableview 的 y 坐标

@wiruzx 我明白了，问题是 tableview 滚动。您如何看待添加标题，请参阅编辑后的答案。

tableView 的标题？我试了一下，发现headerView在tableView里面

@wiruzx 是表视图的标题。我认为你没有理解我的建议。因此，您在问题的示例代码中遵循相同的方法，但不更改表视图大小。现在因为它会滚动 tableview 会出现被切断（正如你在屏幕截图 2 和 3 中指出的那样），所以为了避免你还添加一个表头，你改变了表头的大小来补偿“导航栏”，即将离开屏幕。这样你的滚动位置应该看起来正在滚动，但文本不应该被切断，因为你首先滚动标题。

@wiruzx 在滚动偏移 = 0，标题高度 = 0，因此指示器将位于单元格 [0] 的开头。在偏移量 = 10 处，标题高度 = 10，因此指示符应位于点 10（如偏移量所指定）并且仍位于单元格 [0] 的开头。我错了吗？

【参考方案2】：

instagram“导航栏”不是导航栏。这是一个表格部分的标题。您会注意到，当您点击照片时，整个导航栏会滑开。那是因为它是表格视图控制器的一部分，而不是“真正的”导航栏。

您可以通过使用 UINavigationController 但隐藏导航栏 (setNavigationBarHidden:YES) 来实现此目的。您只需在要推送时手动调用 pushViewController:animated:。

有趣的是，Instagram 的其他标签看起来只是使用普通的导航栏，并没有做任何花哨的事情。我猜他们真的想把这 44 点重新显示在主提要屏幕上。

【讨论】：

但是如果这个部分的标题，那么为什么它不与表格的其余部分一起反弹？为什么滚动指示器停在他面前？ （截图#5）

不会是表格标题而不是表格部分标题？

@7usam 无论如何都在 tableView 之外的 Instagram 导航栏中

嗯，你是对的，它不会反弹。所以我猜它不是表格视图的一部分。在这种情况下，您必须将其实现为单独的视图，使用您自己的滚动视图而不是表格视图，并跟踪滚动视图的委托消息以了解何时滚动标题。

【参考方案3】：

如果您的目标是 ios 5+，那么您可以像这样轻松自定义导航栏：

1- 在 UINavigationController 中添加您的 TableViewController

2- 自定义导航栏：

为导航栏设置背景图片

[[UINavigationBar appearance] setBackgroundImage:[UIImage imageNamed:@"bar_background"] 
                                   forBarMetrics:UIBarMetricsDefault];

在右侧添加刷新按钮

UIImage *img = [UIImage imageNamed:@"refresh.png"];
UIButton *rButton = [UIButton buttonWithType:UIButtonTypeCustom];
[rButton setImage:img forState:UIControlStateNormal];
[rButton addTarget:vc action:@selector(didTapRefreshButton:) forControlEvents:UIControlEventTouchUpInside];
rButton.frame = CGRectMake(0.0f, 0.0f, img.size.width, img.size.height);
UIBarButtonItem *rButtonItem = [[UIBarButtonItem alloc] initWithCustomView:rButton];

self.navigationItem.rightBarButtonItem = rButtonItem;
[rButtonItem release];

希望有帮助！

【参考方案4】：

您可以在您的课程中使用下面提到的方法，以便在导航栏上添加效果，就像在 Instagram 中一样。

        - (void)scrollViewDidScroll:(UIScrollView *)sender 
//Initializing the views and the new frame sizes.
UINavigationBar *navbar =self.navigationController.navigationBar;
UIView *tableView = self.view;
CGRect navBarFrame = self.navigationController.navigationBar.frame;

CGRect tableFrame = self.view.frame;

//changing the origin.y based on the current scroll view.
//Adding +20 for the Status Bar since the offset is tied into that.

if (isiOS7) 
     navBarFrame.origin.y = MIN(0, MAX(-44, (sender.contentOffset.y * -1)))  +20 ;
     tableFrame.origin.y = navBarFrame.origin.y + navBarFrame.size.height;
else
    navBarFrame.origin.y = MIN(0, (sender.contentOffset.y * -1)) +20;
    tableFrame.origin.y = MIN(0,MAX(-44,(sender.contentOffset.y * -1))) ;


navbar.frame = navBarFrame;
tableView.frame = tableFrame;