IB,保持 ImageView 居中,但随着屏幕尺寸增长,保持宽高比
IB, Keep ImageView centre, but grow as the screen size, keeping the aspect ratio
因为我可以在 Android 和 WPF 中轻松地做同样的事情,所以我认为 XCode 的 Interface Builder 也很容易。但是我错了。我花了数小时在情节提要上多次重置约束。我知道这个问题看起来很愚蠢,但请给我一个提示。
我想要故事板上有这样的东西。我应该设置什么限制条件?
- 应保持 ImageView 的纵横比。
- ImageView 水平居中。
- ImageView 随着屏幕宽度的增加而增长,例如垂直屏幕宽度的 90% phone。或者,我希望我可以设置一个最大值,例如,不大于 400。我的意思是,iPad 上的 90% 太大了。
- ImageView 的上边距应该与屏幕尺寸保持合理。我的意思是,硬编码的边距 20 会使它在 iPad 上太靠近顶部,而硬编码的边距 200 在 iPad 上看起来不错但在 [=31= 上看起来不好看] SE.
约束宽度和高度以保持纵横比(一个约束:
imageView.widthAnchor.constraint(等于:imageView.heightAnchor,乘数:0.6).isActive = true
将 centerX 约束到 viewController
的视图 centerX:
imageView.centerXAnchor.constraint(等于:self.view.centerXAnchor,常量:0).isActive = true
使用某个比例(此处为 90%)将 imageView
宽度(或高度)限制为 viewController
视图的宽度:
imageView.widthAnchor.constraint(等于:self.view.widthAnchor,乘数:0.9).isActive = true
只有这个问题,什么是合理的偏移量?要求太模糊。但是,如果您唯一的问题是根据给定的 UI 设置适当的偏移量,我会使用大小 classes 根据给定的大小 class 提供不同的约束 - 请参阅 documentation.
如果您想在故事板中实现这一点,请执行以下操作:
- 将您的 imageView 放在所需的大小和位置
- 向 imageView 添加纵横比约束
- 为您的 imageView 添加水平居中约束
- 为您的 imageView 添加等于其父视图宽度的宽度约束;然后将乘数更改为
(desired width) / (width of the superview)
。将优先级更改为 999
- 向您的 imageView 添加宽度约束并将关系设置为小于或等于。在这里输入您的最大值 (400)
- 对于顶部偏移,在您的superView中添加一个背景清晰的UIView。将其顶部、左侧和右侧设置为与超级视图的顶部左侧和右侧相等,并向 imageView 添加垂直间距 0。然后添加一个等于其父视图高度的高度约束,并将 Multiplier 更改为
(desired space) / (height of the superview)
。 (附件中的粉色视图)
因为我可以在 Android 和 WPF 中轻松地做同样的事情,所以我认为 XCode 的 Interface Builder 也很容易。但是我错了。我花了数小时在情节提要上多次重置约束。我知道这个问题看起来很愚蠢,但请给我一个提示。
我想要故事板上有这样的东西。我应该设置什么限制条件?
- 应保持 ImageView 的纵横比。
- ImageView 水平居中。
- ImageView 随着屏幕宽度的增加而增长,例如垂直屏幕宽度的 90% phone。或者,我希望我可以设置一个最大值,例如,不大于 400。我的意思是,iPad 上的 90% 太大了。
- ImageView 的上边距应该与屏幕尺寸保持合理。我的意思是,硬编码的边距 20 会使它在 iPad 上太靠近顶部,而硬编码的边距 200 在 iPad 上看起来不错但在 [=31= 上看起来不好看] SE.
约束宽度和高度以保持纵横比(一个约束:
imageView.widthAnchor.constraint(等于:imageView.heightAnchor,乘数:0.6).isActive = true
将 centerX 约束到
viewController
的视图 centerX:imageView.centerXAnchor.constraint(等于:self.view.centerXAnchor,常量:0).isActive = true
使用某个比例(此处为 90%)将
imageView
宽度(或高度)限制为viewController
视图的宽度:imageView.widthAnchor.constraint(等于:self.view.widthAnchor,乘数:0.9).isActive = true
只有这个问题,什么是合理的偏移量?要求太模糊。但是,如果您唯一的问题是根据给定的 UI 设置适当的偏移量,我会使用大小 classes 根据给定的大小 class 提供不同的约束 - 请参阅 documentation.
如果您想在故事板中实现这一点,请执行以下操作:
- 将您的 imageView 放在所需的大小和位置
- 向 imageView 添加纵横比约束
- 为您的 imageView 添加水平居中约束
- 为您的 imageView 添加等于其父视图宽度的宽度约束;然后将乘数更改为
(desired width) / (width of the superview)
。将优先级更改为 999 - 向您的 imageView 添加宽度约束并将关系设置为小于或等于。在这里输入您的最大值 (400)
- 对于顶部偏移,在您的superView中添加一个背景清晰的UIView。将其顶部、左侧和右侧设置为与超级视图的顶部左侧和右侧相等,并向 imageView 添加垂直间距 0。然后添加一个等于其父视图高度的高度约束,并将 Multiplier 更改为
(desired space) / (height of the superview)
。 (附件中的粉色视图)