在故事板中创建复杂的布局

时间:2015-08-21 10:23:07

标签: ios autolayout uistoryboard nslayoutconstraint universal-storyboard

我正在尝试在故事板中创建复杂的用户界面。我得到的只是一堆错误,我不知道如何解决它们,因为建议的约束是不合适的。这是我的项目的链接:link。最终布局应该与图像中的布局类似:

enter image description here

简短版本:布局应该与任何屏幕尺寸的图片中的布局相似。在较大的屏幕上,图像视图和彩色视图都应该变大。所有图像视图的大小应相同。

长版: 所有图像视图的大小应相同。

大白视图应始终占据屏幕的上半部分。我知道该怎么做。红色视图应该恰好出现在超级视图的中心,即大白视图。

两个蓝色视图的宽度应与红色视图的宽度完全相同。这3个视图的宽度应与2个绿色视图的高度相匹配。意思是,屏幕越高(更高的屏幕意味着更高的绿色视图),ImageViews之间的空间越大(其中包含图像字的人,这基本上意味着更宽的蓝色和红色视图)。

左侧和右侧的白色视图将左侧图像视图的空间填充到左侧边距,右侧图像视图填充到右侧边距。

所有视图的第一个邻居都为0。蓝色和红色是水平的,绿色的视图是垂直的。此外,底部和上部图像视图分别在superview(大白视图)的底部和顶部开始。

我不想在图像视图上设置高度和宽度约束,因为它们应该在运行时被解除限制。

如果有人能帮助我,我真的很感激!

2 个答案:

答案 0 :(得分:6)

我已在GithubRepo上传了解决方案,您可以查看一下。

enter image description here

1) “此外,底部和上部图像视图分别位于superview(大白视图)的底部和顶部”此要求无法满足 p>

2)通过保持满足整体要求,可以减少/增加左右间距

答案 1 :(得分:1)

我多年来一直在努力解决这个问题,所以我最终决定创建一个视图来管理所有这些调整大小,就像HTML页面一样:ETFlowView