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

Question

我需要实现这样的事情：

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应用中，搜索栏的行为完全相同

任何人都可以帮助我吗？

谢谢！

Answer 1

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

您可以使用UINavigationController但隐藏导航栏（setNavigationBarHidden：YES）来实现此目的。你只需要手动调用pushViewController：animated：手动。

有趣的是，它看起来像Instagram的其他标签只是使用一个普通的导航栏，并没有做任何花哨的事情。我猜他们真的希望那些44点回到主进纸屏幕上。

Answer 2

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

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

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

希望有帮助！

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

}