【问题标题】:autolayout - make height of view relative to half superview height自动布局 - 使视图高度相对于超级视图的一半高度
【发布时间】:2013-02-02 20:31:55
【问题描述】:

最近一直在使用自动布局,但我被困在一个看似非常微不足道的问题示例上。我有一个视图,我想坐在屏幕的顶部,并占据屏幕高度的一半。在自动布局之前很简单 - 只需将其固定到位并告诉它在超级视图调整大小时垂直扩展。

现在,我这辈子都不知道该怎么做。这是我尝试设置时得到的结果:

底部空间约束设置为“等于 284”,当我更改为 iPhone4 布局时,这对我来说绝对无用,因为它在屏幕底部保持 284 点空间,并将视图缩小到不再是屏幕大小的一半。并且没有办法将该约束设置为等于任何其他视图高度的一部分..

挣扎了一段时间后,我能想到的唯一方法是在该视图下方引入另一个视图,固定它们的高度,让它们彼此上下放置,然后设置第二个(底部)视图是隐形的..这似乎有点难看!

我错过了什么明显的东西吗?..

【问题讨论】:

  • 我认为这并不丑陋,而是使用 IB 获得您想要的东西的聪明技巧。我已经这样做了,当您使用正确的元素名称时,您可以清楚地知道发生了什么。您甚至可以将第三个元素放在不同的位置或中心,根据这两个子视图更改大小。

标签: ios xcode autolayout


【解决方案1】:

故事板解决方案,您可以在其中设置任何视图之间的精确比例:

现在:

利润!!!

附:另请注意,此方法适用于不同嵌套级别的视图,并且(显然)适用于宽度

附言有时,“反转第一项和第二项”约束或设置反向乘数(例如 2 而不是 0.5)可能会有所帮助(但如果您不了解视图之间的关系,这些方法将无济于事)。

【讨论】:

  • 第 2 步似乎对我不起作用。除了切换“限制到边距”之外,我无法在面板中选择任何内容。我正在尝试将 UITableViewCell 中 UIImageView 的宽度设置为内容视图的 50%。
  • 更新:显然界面生成器不允许内容视图成为任何自动布局约束的明确目标。我必须插入一个虚拟子视图作为内容视图的子视图才能完成这项工作。
  • 它对我有用。您需要选择列表中的两个视图,而不是构建器屏幕。对于百分比,将较小的视图除以较大的视图以获得乘数值示例较小的视图 25,较大的视图 135 - 25 / 135 = 0.185。将此设置为乘数值以获得在 x1 和 x2 = 25 处但随着更大的 6 和 6 加等放大的视图
  • 这对我有用,但请注意,我还必须添加三个约束,将子视图的边距约束设置为 0。谢谢
  • 这应该是公认的答案。首先,我尝试接受的答案。它不起作用然后我向下滚动,我看到了这个答案并且它起作用了。谢谢!
【解决方案2】:

[至少] Xcode 5.1.1 现在可以在 IB 中实现这一点。虽然我花了一些时间才发现它实际上非常简单:

首先创建一个基本的顶部对齐约束(您还需要设置底部、左侧和右侧约束,就像正常一样) .然后选择约束并导航到 Attribute 检查器:

然后您可以调整乘数。如果您想要 50% 的超级视图,请将其保留在 1,因为它与超级视图的中心对齐。这也是创建其他百分比的视图的好方法(例如 25% 的超级视图)

【讨论】:

  • nice :) 我认为这篇文章应该被标记为已接受的答案 :) iOS 开发人员通常更喜欢 Interface Builder 解决方案而不是类似代码的解决方案
  • @hqt,谢谢。我认为在编写接受的答案时,这种方法不可用。有时提问者不会重新审视旧问题或关心更改已接受的答案。但最终我只是来帮忙的,很高兴它做到了!
  • 我有点困惑。我试过了,但它只是将视图居中到超级视图,它不会调整视图的高度。
  • @Dean,您需要确保First ItemView.Top 而不是View.Center Y。否则,是的,它只会居中。您还需要确保正确设置其他约束以处理视图的其他边缘。
  • View.Top 等于 Superview.Center Y 乘数 1 没有给你高度。这个答案是不完整的。你所要做的就是想想你在说什么,你会看到它给了你一条穿过中心的线!我会编辑此答案以明确您在谈论哪些其他限制。
【解决方案3】:

经过一段时间后,我想出了以下内容。

我注意到它是一个答案,但它不是很令人满意,因为它假设您实际上不能在 Interface Builder 中执行此操作,但可以在代码中添加正确的约束,如下所示:

- (void) viewWillAppear:(BOOL)animated
{

    NSLayoutConstraint *constraint = [NSLayoutConstraint constraintWithItem:upperview
                                                                 attribute:NSLayoutAttributeHeight 
                                                                 relatedBy:0 
                                                                    toItem:self.view
                                                                 attribute:NSLayoutAttributeHeight
                                                                multiplier:.5 
                                                                  constant:0];
    [self.view addConstraint:constraint];

}

基本上,它对 self.view 的高度设置了 0.5 的乘数,作用于上视图。 我不得不将 IB 中底部垂直空间约束的优先级设置为低于 1000,以避免出现一堆关于打破约束的运行时消息。

因此,如果有人可以在 Interface Builder 中展示如何执行此操作,那将更好地回答我的问题,否则我想这已经很好了(目前)???

【讨论】:

  • 我认为这和现在一样好。如果 Apple 允许我们访问 IB 中的乘数值,那就太好了,这样就可以像常量一样设置它。
  • 对于查看此答案的任何人,Xcode 5.1 现在允许您通过 Interface Builder 设置乘数。我现在可以通过 IB 配置只有其父视图一半高度的视图。
【解决方案4】:

比方法比 Fyodor Volchyok 的答案更简单、更直接。 - 按住控制按钮并单击子视图。 - 仍然按住命令按钮,将光标拖动到超级视图,然后单击超级视图。 - 选择“纵横比”。

-然后单击尺寸检查器。 - 然后双击约束。

-确保为这两个项目选择了“高度”。

-然后将一半屏幕的“乘数”更改为 0.5,或者您想要的超级视图的任何部分。

【讨论】:

  • 简单快捷的方法!谢谢老哥
【解决方案5】:

如果您有 2 个应该具有相同高度的视图,我在代码中还有另一种可能性:只需将 view2 的高度设置为 view1 的高度(这里的技巧是不明确设置 view1 的高度)。

    [self.view addConstraints:[NSLayoutConstraint
        constraintsWithVisualFormat:@"V:[topLayoutGuide]-0-[_view1]-0-[_view2(==_view1)]-0-[bottomLayoutGuide]"
                            options:0
                            metrics:nil
                              views:viewsDict]];

【讨论】:

  • 没有意识到您可以参考其他视图的宽度/高度。如果您已经使用视觉格式语言,这是 IMO 最清晰的答案。
  • @brainray 示例也在developer.apple.com here进行了解释
【解决方案6】:

Mete 回答的 Swift 版本:

    override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view, typically from a nib.



    upperView.translatesAutoresizingMaskIntoConstraints = false


    var constraint = NSLayoutConstraint(item: upperView,
                                        attribute: NSLayoutAttribute.top,
                                        relatedBy: NSLayoutRelation.equal,
                                        toItem: self.view,
                                        attribute: NSLayoutAttribute.top,
                                        multiplier: 1,
                                        constant: 0)

    self.view.addConstraint(constraint)


    constraint = NSLayoutConstraint(item: upperView,
                                    attribute: NSLayoutAttribute.height,
                                    relatedBy: NSLayoutRelation.equal,
                                    toItem: self.view,
                                    attribute: NSLayoutAttribute.height,
                                    multiplier: 0.5,
                                    constant: 0)

    self.view.addConstraint(constraint)


    constraint = NSLayoutConstraint(item: upperView,
                                    attribute: NSLayoutAttribute.leading,
                                    relatedBy: NSLayoutRelation.equal,
                                    toItem: self.view,
                                    attribute: NSLayoutAttribute.leading,
                                    multiplier: 1,
                                    constant: 0)

    self.view.addConstraint(constraint)


    constraint = NSLayoutConstraint(item: upperView,
                                    attribute: NSLayoutAttribute.trailing,
                                    relatedBy: NSLayoutRelation.equal,
                                    toItem: self.view,
                                    attribute: NSLayoutAttribute.trailing,
                                    multiplier: 1,
                                    constant: 0)

    self.view.addConstraint(constraint)


}

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2013-11-21
    • 1970-01-01
    • 2013-06-11
    • 1970-01-01
    • 2023-03-05
    • 2016-04-18
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多