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

我需要实现如下内容：

- (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;
}

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的大小改变，它们也会改变）

此外，我还尝试将视图作为子视图添加到tableView中，这是可行的，但我所需要的并不是这样。 在Instagram导航栏的tableView之外，所以它也不适合

在facebook应用程序中，搜索栏的行为完全相同

有人能帮我吗

谢谢

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

您可以通过使用UINavigationController但隐藏导航栏（setNavigationBarHidden:YES）来实现这一点。您只需在需要推送时手动调用pushViewController:animated:manually

---

有趣的是，instagram的其他选项卡似乎只使用普通的导航栏，不做任何花哨的事情。我想他们真的希望这44个点回到主提要屏幕上。

在示例代码中有相同的方法，但不是增加tableview的高度，而是用额外的（不可见的高度）预加载它，然后通过减小帧的y向上移动它。附加高度将在屏幕外显示。如果内容高度不足以离开屏幕，则不需要离开屏幕高度

---

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

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

- (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;
}

1-将TableViewController添加到UINavigationController中

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];

---

希望有帮助

您可以在类中使用下面提到的方法，您希望在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;

}

---

我真的不确定我是否正确，你是说你想要一个覆盖你的内容的标题视图吗？可能在您的图像中添加更多注释，因为我没有看到任何导航栏，这可能会让我感到困惑。@7usam，我可能放错了，我需要了解导航栏（或任何其他视图）的行为与Instagram或Facebook中的行为相同。您是说Instagram中的“名称标签”吗？不，我说的是导航栏。但实际上，我不在乎它是导航栏还是视图，最主要的是它的行为方式与Instagram中的相同。在示例代码中使用相同的方法，而不是增加tableview的高度，您可以向上平移它。让tableview以完整的高度开始（在导航视图不碍事之前，选项卡栏会将其隐藏），但是如果此部分是标题，那么为什么它不会与表格的其余部分一起反弹？为什么滚动指示器就停在他面前？（屏幕截图#5）不是表格标题而不是表格部分标题吗？@7usam在Instagram导航栏中，在tableViewWell之外。你说得对，它不会反弹。所以我猜它不是表视图的一部分。在这种情况下，您必须将其实现为一个单独的视图，使用您自己的scrollview而不是tableview，并跟踪scrollview的代理消息，以了解何时滚动标题。如果查看2和3屏幕截图，您必须注意到上视图中隐藏了table view单元格。移动顶视图和单元格的速度不同，因为我改变了tableview@wiruzx我明白了，问题是tableview会滚动。关于添加标题，请参见编辑的answer.header for tableView，您认为如何？我试过了，结果发现headerView在里面tableView@wiruzx表视图的“是”标题。我想你不明白我的建议。因此，您在问题的示例代码中采用了相同的方法，但没有更改表视图的大小。现在，由于它将滚动，tableview将显示为被切断（如您在屏幕截图2和3中所指出的），因此为了避免您还添加了一个表格标题，您可以更改标题的大小以补偿屏幕外的“导航栏”。这样，您的滚动位置应该看起来是滚动的，但文本不应该被切断，因为您首先滚动的是标题。@wiruzx的滚动偏移量为0，标题高度为0，因此指示器将位于单元格[0]的开头。当偏移量=10时，收割台高度=10，因此指示器应位于点10（如偏移量指定）和单元格[0]的起点。我错了吗？