构建自适应用户界面(二)

现在查看下没有设置约束,在各种尺寸的设备上显示状态


构建自适应用户界面(二)_第1张图片

接下来,我们添加自动布局约束,首先点击PIN来创建间距约束,设置左边,顶部和右边,值为0


构建自适应用户界面(二)_第2张图片

打开文档大纲,按住Control拖动view到mainview,从弹出菜单中选择相同的高度。


构建自适应用户界面(二)_第3张图片

接下来,选择产品信息视图,单击销按钮,首先点击PIN来创建间距约束,设置左边,底部和右边,值为0


构建自适应用户界面(二)_第4张图片

打开文档大纲,从菜单中选择垂直间距


构建自适应用户界面(二)_第5张图片

现在,让我们为这两个标签定义的约束,选择标题标签,单击PIN,设置高15,左22,右22.


构建自适应用户界面(二)_第6张图片

接下来,选择另一个标签,添加三个间距约束。


构建自适应用户界面(二)_第7张图片

所有自动布局约束已经设置完毕,看下预览效果。


构建自适应用户界面(二)_第8张图片

你可能感兴趣的:(构建自适应用户界面(二))