IOS 使用自动布局的自适应布局
IOS adaptive layout using Autolayout
我正在开发 IOS 应用程序,这是我第一个基于 IOS 构建的应用程序。我在开发 Android 应用程序方面拥有丰富的经验。所以我收集了有关 IOS 开发的基本信息和知识。我正在研究自动布局。但我没有让它完全发挥作用。我看到一些开发人员正在编写代码,但我只想使用 IB,因为我相信会有一些方法来处理这个问题。
所以寻求帮助,请不要对我的这个 post 投反对票,因为我 post 在尝试了几乎所有我在互联网上获得的东西之后正在使用这个。
先看看我开发的是什么:
图中有Ipad pro 12.9, Ipone 8 plus, I phone se
等不同数量的模拟器
到目前为止我做了什么:
- 我拍了View(中间的白框)。我已经使它垂直居中和水平居中。
- 我已将视图高度设置为 300 点,并将宽度设置为与父视图匹配并留有一些边距
- 我已经放置了用于获取 Phone 的文本字段和来自用户的 PIN 以及确定按钮,如图所示。
问题和我想要的:
- 问题是视图是垂直和水平中心但不是它
内容是。我想让这个视图在
的基础上管理它的高度
它里面的内容。这样它就可以看起来是居中对齐的
垂直。现在它不是垂直居中对齐
- 其次是文本字段的宽度问题,因为 Ipad 它们看起来太糟糕了。所以我真的希望它们在所有设备上看起来都不错。
是否有使用 adaptive/Auto 布局的解决方案?请帮助我如何使用 IB 获得此信息。
移除高度限制并将最底部的按钮挂到视图的底部
尝试以下解决方案:-
- 修复文本框的宽度。
- 对于标签使用最小字体比例(在 google 上搜索)。
- 对于宽度和高度,您必须使用自适应布局。
width = superview 的 70% 这意味着您的视图的乘数将为 0.7
高度 = superview 的 60% 这意味着您的视图的乘数将为 0.6
参考图片:-
与父视图等宽
设置乘数为0.7
这是您需要做的。转到故事板
- Right click on the white area of the screen and drag the cursor to the green area.
- Few options will appear, select Equal Heights
- Now the white dialog box will become equal height to the green screen but don't worry. Select that height constraint and set the
multiplier to let's say 0.5 for 50% height of super view. Repeat the
same for width
@Android 团队,
为此,您需要使用 SizeClasses
和 AutoLayout
.
下面我试着给你解决办法。
使用如下的项目结构。不要在主视图中使用另一个 UIView
。而是用户 StackView
。它会自动调整里面的内容。有关更多信息,请在 Apple Doc 上查找“UIStackView
”。
接下来您需要向堆栈视图添加约束,如
- 前导 10(对于 x)
- 尾随 10(对于 y)
- 居中对齐(宽度)
堆栈视图的高度会自动调整。
现在双击前导和尾随约束将打开大小属性。单击 Constant
之前的“+”图标。它会显示一个弹出窗口。为iPad添加Regular Width Regular Height
,设置值为200(我给的是200,你可以根据自己的计算和要求给)。这将显示如下图
现在 运行 或从预览中检查所有屏幕。你会得到想要的结果。我的更改显示结果如下
快乐编码
我正在开发 IOS 应用程序,这是我第一个基于 IOS 构建的应用程序。我在开发 Android 应用程序方面拥有丰富的经验。所以我收集了有关 IOS 开发的基本信息和知识。我正在研究自动布局。但我没有让它完全发挥作用。我看到一些开发人员正在编写代码,但我只想使用 IB,因为我相信会有一些方法来处理这个问题。
所以寻求帮助,请不要对我的这个 post 投反对票,因为我 post 在尝试了几乎所有我在互联网上获得的东西之后正在使用这个。
先看看我开发的是什么:
图中有Ipad pro 12.9, Ipone 8 plus, I phone se
等不同数量的模拟器到目前为止我做了什么:
- 我拍了View(中间的白框)。我已经使它垂直居中和水平居中。
- 我已将视图高度设置为 300 点,并将宽度设置为与父视图匹配并留有一些边距
- 我已经放置了用于获取 Phone 的文本字段和来自用户的 PIN 以及确定按钮,如图所示。
问题和我想要的:
- 问题是视图是垂直和水平中心但不是它
内容是。我想让这个视图在
的基础上管理它的高度
它里面的内容。这样它就可以看起来是居中对齐的
垂直。现在它不是垂直居中对齐
- 其次是文本字段的宽度问题,因为 Ipad 它们看起来太糟糕了。所以我真的希望它们在所有设备上看起来都不错。
是否有使用 adaptive/Auto 布局的解决方案?请帮助我如何使用 IB 获得此信息。
移除高度限制并将最底部的按钮挂到视图的底部
尝试以下解决方案:-
- 修复文本框的宽度。
- 对于标签使用最小字体比例(在 google 上搜索)。
- 对于宽度和高度,您必须使用自适应布局。
width = superview 的 70% 这意味着您的视图的乘数将为 0.7
高度 = superview 的 60% 这意味着您的视图的乘数将为 0.6
参考图片:-
与父视图等宽
设置乘数为0.7
这是您需要做的。转到故事板
- Right click on the white area of the screen and drag the cursor to the green area.
- Few options will appear, select Equal Heights
- Now the white dialog box will become equal height to the green screen but don't worry. Select that height constraint and set the multiplier to let's say 0.5 for 50% height of super view. Repeat the same for width
@Android 团队,
为此,您需要使用 SizeClasses
和 AutoLayout
.
下面我试着给你解决办法。
使用如下的项目结构。不要在主视图中使用另一个 UIView
。而是用户 StackView
。它会自动调整里面的内容。有关更多信息,请在 Apple Doc 上查找“UIStackView
”。
接下来您需要向堆栈视图添加约束,如
- 前导 10(对于 x)
- 尾随 10(对于 y)
- 居中对齐(宽度)
堆栈视图的高度会自动调整。
现在双击前导和尾随约束将打开大小属性。单击 Constant
之前的“+”图标。它会显示一个弹出窗口。为iPad添加Regular Width Regular Height
,设置值为200(我给的是200,你可以根据自己的计算和要求给)。这将显示如下图
现在 运行 或从预览中检查所有屏幕。你会得到想要的结果。我的更改显示结果如下
快乐编码