自动布局降低某些视图的高度

Posted

技术标签:

【中文标题】自动布局降低某些视图的高度【英文标题】:Autolayout reduce height of certain views 【发布时间】:2014-01-22 19:14:45 【问题描述】:

我有以下看法:

对于 iPhone 4 尺寸的屏幕,我想保持灰色顶部和绿色下部按钮大小相同,分别固定在顶部和底部。中间的按钮网格应缩小尺寸以适应新的显示。

由于视图尺寸小了 88 像素(548 - 460 = 88),并且有 4 行按钮,我将以编程方式将每个按钮减少 22 像素并将其移动到位。

但如果可能的话,我想通过自动布局来实现。

如何指定约束以保持与顶部和底部的距离相同,并仅降低视图的高度?

我已经将它们全部固定在顶部和底部,但这只会导致:

任何帮助,不胜感激!

【问题讨论】:

你可以将它限制在顶部和底部,并且只使用一个非零的常量,但是为什么不将带有按钮的视图限制在上部灰色区域的底部,以及顶部而是绿色区域? 【参考方案1】:

您可以使用自动布局来做到这一点。基本上,您应该将灰色标题和调用按钮页脚锚定到超级视图的顶部和底部(分别),并将每个按钮锚定到它的邻居。然后指定每个按钮应与第一个按钮具有相同的高度。

这是约束的可视化格式语言(我认为这比试图解释约束要清楚一些)。 headerView 是顶部的灰色条,footerView 是包含您的绿色按钮的视图,并且这些按钮已正确命名。

V:|-[headerView]-0-[buttonOne]-0-[buttonFour(==buttonOne)]-0-[buttonSeven(==buttonOne)]-[buttonPlus(==buttonOne@800)]-0-[footerView]-|

请注意,buttonPlus 的高度限制的优先级较低。这是因为您的页眉和页脚视图之间的空间可能不会在按钮之间平均分配。将优先级设置为低于“必需”(优先级 == 1000)允许加号按钮比一个按钮略短或略高,但自动布局仍会尝试使其尽可能接近。

水平尺寸的创建类似于垂直尺寸。请注意,此处buttonTwo 的大小允许与其他大小稍有不同,以防水平空间不均等。

H:|-0-[buttonOne]-0-[buttonTwo(==buttonOne@800)]-0-[buttonThree(==buttonOne)]-0-|

一个视图的高度/宽度等于另一个视图的计算成本很高,并且可能需要多次传递。最好只对第一列按钮设置上述约束,然后约束其他列,使每个按钮的顶部和底部与其所在行的第一个按钮对齐。您可以在为每行创建水平约束时传递NSLayoutFormatAlignAllTop|NSLayoutFormatAlignAllBottom 作为选项参数,在创建垂直约束时传递NSLayoutFormatAlignAllLeft| NSLayoutFormatAlignAllRight

编辑:这仍然可以通过 IB 完成。

【讨论】:

奥斯汀 - 非常感谢!我真的很感谢你的努力。我花了大约一个半小时插入所有约束,测试它,意识到有问题,删除它们并重试。我决定,如果我有两个视图并根据屏幕大小显示相关视图,那么为了可维护性可能是最好的。我非常感谢你的努力!邓肯

以上是关于自动布局降低某些视图的高度的主要内容,如果未能解决你的问题,请参考以下文章

自动布局约束没有得到尊重

故事板动态自动布局问题

视图高度降低

使用自动布局时的内容拥抱

UITableViewCell 高度根据行内容使用自动布局动态计算

Interface Builder 中的自动布局根据外部视图的宽度/高度更改布局