IOS自适应布局使用Autolayout答案

【问题标题】：IOS adaptive layout using AutolayoutIOS自适应布局使用Autolayout
【发布时间】：2018-09-20 00:06:14
【问题描述】：

我正在开发 IOS 应用程序，它是我在 IOS 上构建的第一个应用程序。我在开发 Android 应用程序方面有很好的经验。所以我收集了关于IOS开发的基本信息和知识。我正在研究自动布局。但我没有让它完全工作。我已经看到一些开发人员正在编写代码，但我只想使用 IB，因为我相信会有一些方法来处理这个问题。

所以寻求帮助，请不要对我的这篇文章投反对票，因为我在尝试了我在互联网上获得的几乎所有东西后发布了这篇文章。

首先看一下我开发了什么以及它是什么：

图中有不同数量的模拟器，如Ipad pro 12.9、Ipone 8 plus、Iphone se

到目前为止我做了什么：

我已获取视图（中间的白色框）。我让它垂直居中，水平居中。
我已将视图高度设置为 300 磅，并将宽度设置为与超级视图相匹配的一些边距
如图所示，我已将用于从用户那里获取电话和 PIN 的文本字段和 OK 按钮放入。

问题和我想要的： - 问题是视图是中心垂直和水平但不是它
内容是。我希望这个视图在
的基础上管理它的高度它里面的内容。这样它就可以被视为居中对齐
垂直。现在它不是垂直居中对齐 - 其次，问题是文本字段的宽度，因为在 Ipad 上它们看起来太糟糕了。所以我真的希望它们在所有设备上都好看。

有没有使用自适应/自动布局的解决方案？请帮助我如何使用 IB 获得这个。

【问题讨论】：

标签： ios storyboard ios-autolayout adaptive-layout

【解决方案1】：

尝试以下解决方案：-

修复文本字段的宽度。
标签使用最小字体比例（在谷歌上搜索）。
对于宽度和高度，您必须使用自适应布局。

宽度 = 70% 的超级视图，这意味着您的视图的乘数将是 0.7

高度 = 超级视图的 60%，这意味着您的视图乘数为 0.6

参考图片：-

与父视图等宽

将乘数设置为 0.7

【讨论】：

没有任何解决方法可以让我在高度上调整内容。因为给出 50% 的高度是好的，但不是真正的工作
因为你提供了两次高度（你提到的 300 点）。
所以基本上过度约束会导致意外行为
不，你指导我，我现在没有明确给出高度。我已将乘数设为 0.50，但我希望它包含内容
你给了我想法，我从前 5 天开始尝试，谢谢你

【解决方案2】：

@Android Teem，为此，您需要使用 SizeClasses 和 AutoLayout。

下面我试图给你解决方案。

使用如下所示的项目结构。不要在主视图中使用另一个UIView。而是用户StackView。它会自动调整里面的内容。如需更多信息，请在Apple Doc 上查找“UIStackView”。

接下来你需要将约束添加到堆栈视图

领先 10（对于 x）
尾随 10（对于 y）
居中对齐（宽度）

高度堆栈视图将自动调整。

现在双击前导和尾随约束将打开大小属性。单击Constant 之前的“+”图标。它会显示一个弹出窗口。为iPad添加Regular Width Regular Height并将值设置为200（我给了200，你可以根据你的计算和要求给）。这将如下图所示

现在运行或从预览中检查所有屏幕。你会得到想要的结果。我的更改显示结果如下

快乐编码

【讨论】：

@android teem 请确认解决方案是否有效或您仍然面临任何问题
Chaursaia 您的解决方案更紧凑，更有帮助。我现在正在尝试。但我已经选择了建议的解决方案。因为他先回复我:(
np 安卓 teem。最重要的是，它帮助了你。 :) 谢谢。

【解决方案3】：

这是您需要做的。转到故事板

右键单击屏幕的白色区域并将光标拖动到绿色区域。

会出现几个选项，请选择 Equal Heights

现在白色对话框将变得与绿屏等高，但不要担心。选择该高度约束并设置乘以 0.5 表示 50% 的超级视图高度。重复宽度相同

【讨论】：

【解决方案4】：

移除高度限制，并将最底部的按钮钩到视图的底部

【讨论】：

这是什么意思？那么文本字段的宽度呢
不要改变白色视图的宽度，从上到下正确钩住所有组件，底部不会有空白
关于白色视图控件从它拖到它的 superView ，选择 Equal-widths 并单击约束，然后将它的乘数更改为 0.5