如何在图像上放置标签和按钮,以便即使图像缩放,它们也位于图像上的相同位置?

时间:2017-02-23 10:36:20

标签: swift autolayout ios-autolayout

我有一个几乎完整的应用程序。我想使用自动布局,但即使我已经搜索了很多关于这个主题的内容,我也找不到可以使用的答案。我可以让它在一个屏幕尺寸上正确显示但不能在另一个屏幕尺寸上显示...这是我的问题

如何设置必要的约束,以便即使计数器针对不同尺寸的设备进行缩放,标签和按钮也位于图像上的相同位置? (图像是png图像)

如果你能回答或指导我一个如何做类似事情的答案,我真的很高兴。

这就是我想要的 Demo Image

如果我尝试使用自动布局和不同的屏幕尺寸,会发生这种情况。

Demo Image 2

  • 这与我在我的应用中使用的图像不同,但它会给你一个想法。)

再次感谢

编辑:

感谢您的回答,但正如评论中所指出的,第一个答案并未提供一种缩放不同屏幕尺寸图像的方法。

第二个答案提供了一种方法,但我无法理解答案的第二部分。我需要更多细节。如果有人可以在这个问题上帮助我,我会很高兴。

我仍然在努力解决这个问题。如果我按照第二个答案Xcode说我需要X位置,第一个填充视图的宽度和Y位置,第二个填充视图的高度。我在这一点上卡住了。我不确定给这些观点带来什么价值。

2 个答案:

答案 0 :(得分:1)

您必须为图像视图添加约束。我用你的形象创建了一个小项目。这应该可以帮助您入门。

https://1drv.ms/u/s!Aq8sK_MQLIL9gxMl-lBOMHkToudU

答案 1 :(得分:0)

由于图像尺寸会因不同的屏幕尺寸而改变,因此您无法设置常量约束。你需要的是比例约束。

  1. UILabelUIButton设置为宽度和高度分别与UIImageView宽度和高度成比例。
  2. 要做到这一点:点击UILabel

    enter image description here

    和Ctrl将其拖动到UIImageView上,选择等宽等高enter image description here

    假设您的UILabel宽度为100px,而UIImageView的宽度为500px。编辑刚刚设置的约束,并将乘数设置为100:500 enter image description here

    这将确保对UIImageView宽度的任何修改都会相应地影响UILabel宽度。对高度约束也一样。

    UIButton重复相同的步骤。

    1. 不幸的是,顶部/底部/尾随/前导约束不能与UIImageView尺寸成比例设置,但您可以使用填充视图 - 可以模仿布局约束的透明视图。< / LI>

      您需要两个填充视图:一个用于顶部约束: enter image description here

      (将其高度设置为与UIImageView高度成比例)

      和一个领先约束

      enter image description here

      (将其宽度设置为与UIImageView宽度成比例)

      如果不够清楚,我可以为你制作一个小视频。