使用自动布局通过iPhone6s和

时间:2016-06-05 16:34:11

标签: ios iphone autolayout xcode7 ios-autolayout

我正在开发一款应该兼容所有iphone设备的应用程序,从iphone4s到iphone6s plus(以及iOS8以上)。我是一个新手,并开始基于设计师的一些设计开发UI。

1)当我开发屏幕时,我在大小类中使用 wAny和hAny ,在模拟指标中使用“推断” “ - 这是正确的

2)在一个屏幕中,我有4个图像一个在另一个下面,我为每个图像添加了约束(imageView),以保持每个设备的间距一致。

一个。这样,底部的第四个图像在iphone4s模拟器上根本看不到,因为它是3.5英寸。第三个图像在底部被裁剪。

湾当我在iphone 6s plus中模拟相同内容时,屏幕底部会有很多空白区域。

如何将图像调整为不失真,但相对于我正在渲染的设备自动调整大小?

我尝试了什么: -

  1. 每张图片使用顶部,左侧,右侧和底部的约束。
  2. 为每张图片使用 Aspect Fit 。 (在某处可以自动调整图像大小) - 这种方法不起作用
  3. 使用等宽度到SuperView 并将乘数指定为0.5。 - 这也失败了
  4. 我是否可以使用任何响应式UI框架,例如Bootstrap for Web?

3 个答案:

答案 0 :(得分:1)

即使这最好由UIStackView(iOS 9及更高版本)甚至可能是UITableView处理,但它也很容易通过限制来实现。这是我做的一种方式:

  1. 将4个视图中每个视图的比例高度约束设置为超级视图,其倍数为0.2

  2. 设置"水平居中"相对于4个视图中每个视图的超视图约束

  3. 在4个视图中设置纵横比(我使用1.6:1的比例)

  4. 现在,在每个视图的底部和超视图的底部(不是超视图边距)之间设置比例约束。因为视图高度一起加上超视图高度的0.8,所以它们之间的间距应该加上超视图高度的0.2。

    因为总共有五个空格(一个到顶部,一个到底部,三个在四个视图之间),每个空间应该是超视图高度的0.04(0.2 / 5 = 0.04)。所以顶视图的底部应该是它的高度,加上相对于超视图的一个间距,或者超视图底边的0.24。第二个视图的底部应该添加另一个空间和它自己的高度,即超视图底边的0.48等。

  5. 因此,从顶部到底部的每个视图的超视图约束的底边到底边应该具有以下倍数:0.24,0.48。 0.72,0.96。

    这为您提供相等的高度和相等的间距,以及一致的宽高比,所有这些都可以根据不同的屏幕尺寸进行调整。以下是您要定位的所有三种手机尺寸中此布局预览的屏幕截图:

    Preview on 3 phone sizes

    最后,这里是我为此解决方案创建的项目的链接,因此您可以更详细地查看约束:

    http://d.pr/f/17Ae7

答案 1 :(得分:0)

最简单的方法是使用UIStackView。您可以在故事板中创建具有特定最小间距的垂直堆栈视图,然后添加要显示的所有四个视图。您只需要在堆栈视图本身上设置约束。堆栈视图将响应性地正确创建或修改所有内部约束。

这是一个很好的介绍:

https://developer.apple.com/videos/play/wwdc2015/218/

答案 2 :(得分:0)

Dereferencing Syntax所有你需要做的就是给第一个UIImageView一个固定的宽度和高度(如果它是一个正方形,等宽度等于高度)尝试纵横比,然后相对于第一个和第三个相对于第四个等等。