3、UI开发之核心基础——约束（入门）

先学个新技能：添加图片控件Image View

iOS的图片控件是ImageView，ImageView经过提早载入用户指定的图片资源来显示相应的图片。

因此图片控件的关键信息有3个：

1. ImageView

2. 图片资源

3. ImageView加载图片资源。

 

1. 添加ImageView

选中Main.storyboard，而后左键长按将ImageView拖入storyboard。

 

为了方便接下来讲明问题，咱们调整ImageView的大小使其紧靠屏幕左上右3边。

 

2.添加图片资源

选中Asserts.xcassets，而后点击“+”和“New Image Set”

这时咱们能够看到多出1个“Image”，选中后单击能够重命名，咱们不妨将其改成“firstimage”

将咱们提早准备好的图片拖入“2x”的框框中

 

3. ImageView加载图片资源

在storyboard中选中Image View，而后点击漏斗形状的“控件属性”，在Image的下拉框中选中咱们刚刚添加的“firstimage”

 

图片控件已经准备完毕，接下来咱们来看当作果吧。

在屏幕的最上方，选择一个和咱们的storyboard同样型号的模拟器（此处为iPhone 8），而后点击左上角的播放按钮运行。

 

一个例子道问题

若是咱们将上面的程序分别在iPhone5和iPhone8 Plus模拟器上运行，是否是会产生同样的结果吗？

答案是否认的，3个不一样设备的运行效果以下：

 

一样一份代码分别运行在iphone5，iphone8和iphone8 plus上，咱们看到了3种不一样的结果，显然这不是咱们想要的。

因而咱们不由要问这样2个问题：

1. 到底是为何会出现这样不一致的结果呢？

2. 咱们要怎么作才能在不一样的设备上适配，以达到咱们想要的一样的效果呢？

 

解惑

以下图所示，我以iphone8为个人storyboard编辑设备，而后拖拽了1个ImageView上去，使其左右两边对齐屏幕边框。

人眼所及，图片的位置和大小一目了然，可是机器是怎么存储这个信息的呢？当咱们将ImageView拖拽上去的时候，机器会记录2个数据：

一是该图片左上角的坐标，二是该图片所对应的长和宽，当程序运行时，图片就会根据这2项数据绘制图片。

 

程序运行在iphone8上天然没有问题，那若是运行在iPhone5，iPhone8plus等等呢？

iPhone5屏幕太窄，不足以显示整个图片，而iPhone8plus又太宽，会产生多余的留白。

 

传道

到此，咱们不由要想：“若是iOS能自动帮咱们拉伸图片就行了。”

iOS确实会自动适应图片大小，可是得由咱们来告诉它：

A. 图片上边框紧靠屏幕上边框；

B. 图片左边框紧靠屏幕左边框；

C. 图片右边框紧靠屏幕右边框；

“这样应该能够了吧”

还不行哦，当咱们本身设定图片的摆置时，iOS就不会为咱们作任何默认的设置，也没有前面所说的“记录图片左上角坐标和其长宽”。以上3点不足以肯定图片的高度，因此咱们还要再加一条。

D. 图片高300个像素；

 

如此设定图片，则无论在哪款iphone上均可以正常显示咱们的图片的了。

在storyboard中选中图片，而后按下图所示设定左上右的边框间隔为0（注意最上面的红框中的小红线必须为实线），高度为300像素。

 

好了，如今不管在哪一款iPhone上，图片都不会有截断或过多留白了。

 

约束

肯定UI元素的位置和大小的方式就是我所要说的“约束”，也就是iOS UI开发的核心。不管是系统默认的“起始点+长宽”仍是咱们自定义的“图片间隔+高度”都是“约束”。

Xcode提供了多种约束操做供开发者选择，合理运用这些约束，既能够加快UI开发又能够提升UI的灵活性，绝对是iOS开发者们不可多得的利器。

既然是利器，天然有必要多花些时间琢磨其利性，不然极可能未伤妖魔，反得自伤。

下面两节咱们将深刻探讨“约束”。

 

 

上一节           回目录          下一节