使用Xcode的Interface Builder添加布局约束

上一篇文章《iOS 8界面自动布局系列-1》简要介绍了iOS界面布局方式的前世今生。本篇文章将详细介绍如何使用自动布局实现不同屏幕尺寸的适配。

添加自动布局约束(下文简称约束)有以下三种方式:

本文将以一个简单的例子来演示如何使用这几种方式添加约束,如下图所示。程序的界面主要有三部分组成,,最上面是一张公司logo图片,下面是可以滚动的区域,包含公司名称和详细介绍。

打开Xcode(本文使用的版本为6.1.1),新建项目,选择iOS -> Application -> Single View Application。

项目命名为AutoLayoutXcode,语言选择Objective-C,设备选择Universal。

点击Main.storyboard,拖入一个Image View,一个Scroll View以及两个Label,并将两个Label作为ScrollView的子视图。为了便于识别,将Image View的名称改为Logo Image,两个Label的名称修改为Name Label与Description Label。

下载苹果Logo图片apple.jpg,并将其拖入项目中。文件下载地址: (提取码:4049)

选中Logo Image,在属性窗口(Attributes Inspector)的Image View中,将Image设置为apple.jpg,将Mode设置为Aspect Fit。这样就能根据Image View的大小来调整图片的显示。

为了能够正确定位Image View,我们需要添加4个约束,分别是:

Image View左侧与父视图左侧对齐Image View右侧与父视图右侧对齐Image View顶部与父视图顶部对齐Image View的高度为父视图高度的一半

于是选中Logo Image,点开设计器下方的Pin菜单,在弹出菜单上方取消勾选Constrain to margins(否则会有间距),并设置左侧、右侧与顶部的约束值均为0(注意要将约束标记由虚线点亮为实线),最后点击弹出菜单下面的Add 3 Constraints按钮,这样就添加了上述三个对齐约束,如下图所示。

Size Inspector可以查看当前选中界面元素的尺寸及所添加的约束。选中Logo Image并点击Size Inspector,可以看到刚刚添加的三个约束,如下图所示。

三条蓝线分别表示左侧、顶部与右侧对齐约束。下面的列表也详细列出了这三条约束,Trailing Space to…为右对齐、Leading Space to…为左对齐、Top Space to…为顶部对齐。鼠标双击Top Space to: Superview约束会显示该约束的详细信息,如下图所示。

回忆一下上一篇文章中关于约束的介绍,约束就是一个线性关系:

y = m * x + c

图中的Vertical Space Constraint表示当前约束是一个垂直间距约束。First Item对应公式中的y,表示因变量,这里显示的是Logo Image.Top表示图片顶部。Relation对应公式中的=,表示相等关系,这里显示的是Equal即相等。Second Item对应公式中的x,表示自变量,这里显示的是Superview.Top表示其父视图的顶部。Multiplier对应公示中的m,表示缩放比例系数,这里的值为1。Constant对应公示中的c,表示偏移常量,这里的值为0。所以完整串下来就很清楚地表达了图片与父视图顶部对齐这样一个关系。

注意,建立约束的双方是对等的,既可以说y相对于x发生变化,亦可以说x相对于y发生变化,所以First Item与Second Item是可以互换的,即反函数:

x = 1/m * y – c/m

点击First Item或者Second Item下拉菜单,选择Reverse First And Second Item即可交换双方的位置。

交换后的Multiplier与Constant会自动根据反函数公式计算得出。

注意到左侧文档结构窗口(Document Outline)右上角出现了一个红色按钮,表示当前界面存在布局约束错误。

而是他们在同伴们都睡着的时候,一步步艰辛地向上攀爬的。

使用Xcode的Interface Builder添加布局约束

相关文章:

你感兴趣的文章:

标签云: