在导航栏上方添加视图

Posted 2023-03-10

【中文标题】在导航栏上方添加视图

【英文标题】：Adding a view above a navigation bar

【发布时间】：2013-08-30 10:31:19

【问题描述】：

我正在尝试实现类似于 ios 7 上的新消息应用程序（也是 Safari）中看到的效果，导航栏本身有一个进度条：

我尝试了几种方法，并找到了一种几乎可行的方法。我使用的是UINavigationBar 的自定义子类，它在初始化时将我的自定义进度条添加为子视图。这几乎可以正常工作，但是当我尝试向其添加 NSLayoutConstraints 时，应用程序崩溃了。

工作代码（没有布局限制，因此不适应方向变化）：

- (void)commonInit

    if (!self.progressIndicator) 
        self.progressIndicator = [[ECourseProgressIndicatorView alloc] initWithFrame:CGRectMake(0, self.bounds.size.height - 3, self.bounds.size.width, 3)];
        [self addSubview:self.progressIndicator];
    

我希望能够使用的代码（添加了NSLayoutConstraints），但崩溃了：

- (void)commonInit

    if (!self.progressIndicator) 
        self.progressIndicator = [[ECourseProgressIndicatorView alloc] initWithFrame:CGRectMake(0, self.bounds.size.height - 3, self.bounds.size.width, 3)];
        [self addSubview:self.progressIndicator];

        self.progressIndicator.translatesAutoresizingMaskIntoConstraints = NO;
        [self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"|-0-[progressIndicator]-0-|" options:0 metrics:nil views:@@"progressIndicator": self.progressIndicator]];
        [self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[progressIndicator(==3)]-0-|" options:0 metrics:nil views:@@"progressIndicator": self.progressIndicator]];
    

我在运行带有布局约束的代码时遇到的错误包含在 Gist here 中。如果我不设置translatesAutoresizingMaskIntoConstraints = NO，那么代码可以工作，但是我指定的布局约束被忽略，有利于自动调整掩码约束。

谁能解释一下？

附：我最初确实考虑将进度条添加为 UINavigationBar 上方的视图（因此根本不在其层次结构中），但我找不到有关如何在导航栏上方视觉定位视图的信息（以 Z 坐标术语，不是Y)。

注意：我在苹果开发者论坛posted this，但没有得到回复。

【问题讨论】：

崩溃日志说什么？告诉你出了什么问题通常很有帮助。此外，与其子类化导航栏，为什么不将进度指示器添加为导航栏的子视图？

@Abizern 我将它包含在一个 Gist 中，因为我不想用它淹没线程：gist.github.com/obeattie/…

在您的 ECCourseIndicatorProgressView 中，您不会碰巧为+requiresConstraintBasedLayout 返回YES 吗？

@Abizern 我还没有定义那个方法。我应该吗？

除非你想强制自动布局。而且 - 您正在设置进度条的框架。淘气，淘气，你不想在使用自动布局时触摸框架，这就是约束应该做的事情。在初始化程序中使用CGRectZero 作为框架。

【参考方案1】：

诀窍是在navigationItem 的titleView 中添加一个视图。将该视图的 cliptobounds 设置为 NO，并在其中添加进度视图。

UIView *test = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 128, 33)];
[test setBackgroundColor:[UIColor redColor]];
[test setClipsToBounds:NO];


// Add the progress view
UIProgressView *progressView = [[UIProgressView alloc] initWithProgressViewStyle:UIProgressViewStyleBar];
[progressView setFrame:CGRectMake(-96, 36, 320, 2)];
[progressView setProgress:1.0];
[progressView setProgressTintColor:SYSTEM_BLUE];


[test addSubview:progressView];

self.navigationItem.titleView=test;

【参考方案2】：

只需将此视图放入 NavigationController，而不是 NavigarionBar。

【参考方案3】：

您可以为导航栏设置 Titleview...只需将任何 UIView 设置为导航栏 titleview..然后您可以在该 UIView 上设置任何子视图..

UIView *viewBar=[[UIView alloc]initWithFrame:CGRectMake(0, 0, 800, 44)];
UILabel *label=[[UILabel alloc]initWithFrame:CGRectMake(50, 0, 50, 50)];
[label setText:@"Sending"];
[viewBar addSubview:label];
self.navigationItem.titleView=viewBar;

快乐编码....