加载另一个 Nib 时的 iOS 自动布局

Posted 2023-03-14

【中文标题】加载另一个 Nib 时的 iOS 自动布局

【英文标题】：iOS Auto Layout When Loading Another Nib

【发布时间】：2014-09-15 02:56:53

【问题描述】：

我在故事板中有一个详细视图。当满足特定条件时，我想在该视图中加载另一个 Nib。但是当我这样做的时候，自动布局把你搞砸了。

我正在尝试将 UIView 显示在 UIWebView 上方，就像覆盖视图一样。我希望 UIView 在顶部和底部布局指南之间具有相同的设备比例，最大高度为 400。

这是我用来加载 Nib 的代码：

- (void)viewDidLoad

    [super viewDidLoad];
    [self.navigationController.navigationBar setTintColor:[UIColor whiteColor]];
    // Do any additional setup after loading the view, typically from a nib.

    UINib *s = [UINib nibWithNibName:@"Square1" bundle:nil];
    NSArray *array = [s instantiateWithOwner:self options:nil];
    StopView *stopView = (StopView *)[array objectAtIndex:0];

    [stopView setTranslatesAutoresizingMaskIntoConstraints:NO];
    [self.view addSubview:stopView];

    id topGuide = self.topLayoutGuide;
    id bottomGuide = self.bottomLayoutGuide;
    UIWebView *webView = self.detailWebView;

    NSDictionary *views = NSDictionaryOfVariableBindings(stopView, topGuide, bottomGuide, webView);

    // this is here to stop the auto layout from reporting that the guides has
    // ambiguous layout
    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[topGuide]|" options:0 metrics:nil views:views]];
    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[bottomGuide]|" options:0 metrics:nil views:views]];


    // center the stop view in the super view, both lines below are needed
    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"|-(>=12)-[stopView(<=400)]-(>=12)-|"
                                                                      options: 0
                                                                      metrics:nil
                                                                        views:views]];

    // set the height to a ratio of the width
    NSLayoutConstraint *con2 = [NSLayoutConstraint constraintWithItem:stopView
                                                            attribute:NSLayoutAttributeWidth
                                                            relatedBy:0 toItem:stopView
                                                            attribute:NSLayoutAttributeHeight
                                                           multiplier:0.66667f constant:0];
    [self.view addConstraint:con2];

    // center the Stop View X,Y with the super view
    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:stopView
                                                          attribute:NSLayoutAttributeCenterX
                                                          relatedBy:NSLayoutRelationEqual
                                                             toItem:self.view
                                                          attribute:NSLayoutAttributeCenterX
                                                         multiplier:1.0f constant:0]];

    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:stopView
                                                          attribute:NSLayoutAttributeCenterY
                                                          relatedBy:NSLayoutRelationEqual
                                                             toItem:self.view
                                                          attribute:NSLayoutAttributeCenterY
                                                         multiplier:1.0f constant:0]];

    NSLog(@"Calling configureView from viewDidLoad");
    [self configureView];

以下是一些屏幕截图：

正如您在第三个屏幕截图中看到的那样，我的背景没有显示。在设计模式下，您可以从位于顶部的 UILabel 中看到 T。

我做错了什么？

【问题讨论】：

很难说你想做什么。

我使用 VisualLayout 将高度设置为不超过 400 点，并创建了约束设置宽度。

您是否对未显示的宽度有其他限制？

不，我没有。我在代码中唯一的一个是设置比率的那个。你认为我需要一些吗？

是的，这就是我在第一条评论中所说的。 = 约束？

【参考方案1】：

对于垂直约束，您需要在字符串前面放置一个“V:”。要使视图最大为 400，但在给定较小屏幕的顶部和底部间距约束的情况下尽可能大，您需要使用约束的优先级，

[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-(>=12)-[stopView(==400@900)]-(>=12)-|"
                                                                  options: 0
                                                                  metrics:nil
                                                                    views:views]];

系统会尽量使 stopView 的高度接近 400，同时保持与顶部和底部至少 12 的间距。