适配iPad和iPhone

咱们打开Xcode,新建一个项目:git



 

选择iOS\Application\Single View Application建立一个单视图应用:程序员



 

设置项目名称AdaptiveWeather,语言选择Swift,设备选择Universalgithub



 

建立好项目后,咱们在项目目录结构中能够看到只存在一个storyboard文件:编辑器



 

Main.storyboard文件就是一个通用的storyboard文件,它能够适配目前全部屏幕尺寸的Apple移动设备。打开该文件,同窗们会看到一个View Controller,以及一个咱们不太熟悉的界面尺寸:ide



 

同窗们不要吃惊,没错,大家看到的就是一个简单的、有点大的正方形!大伙都知道,在上一个版本的Xcode中,storyboard里的屏幕尺寸都对应着咱们所选的目标设备的尺寸,可是这样没法让咱们达到“用一个storyboard搞定全部设备”的宏伟目标。因此在iOS8中,Apple将storyboard中屏幕的尺寸进行了抽象处理,也就是说咱们看到的这个正方形是一个抽象的屏幕尺寸。工具

咱们接着往下走,选中Main.storyboard文件,而后在右侧工具栏中选择File Inspector页签,而后勾选Use Size Classes选项:布局



 

在新的iOS8项目中,该选项默认是勾选的。但当你使用老版本的项目建立新的storyboard文件时就须要你手动进行勾选了。学习

设置你的Storyboard文件

首先,咱们打开Main.storyboard文件,从组件库(Object Library)中选择Image View拖拽到View Controller中。选中刚刚拖入的Image View,在右侧工具栏选择Size Inspector页签,设置X坐标为150,Y坐标为20,为300,为265。测试

而后再拖入一个View组件,设置X坐标为150,Y坐标为315,为300,为265。字体

选择你刚才拖入的View,在右侧工具栏中选择Identity Inspector页签,在Document面板中的Label属性输入框中输入TextContainer。这个属性的做用就是给View起一个名字,方便咱们辨认。这里要注意一下,Document面板有多是隐藏的,咱们须要点击它后面的 Show按钮来显示它。咱们拖入的这个View最后是显示城市和温度Label的容器。



 

完成上面的设置后,同窗们可能会发现刚才拖入的View貌似看不到,这是由于它的背景色和View Controller的背景色是相同的,都是白色,因此咱们不太容易辨别。咱们来解决这个问题,选中View Controller的View,而后在右侧工具栏中选择Attribute Inspector页签,设置背景色为 红:74,绿:171,蓝:247。而后再选择TextContainer,就是咱们拖入的View,设置背景色为 红:55,绿:128,蓝:186。此时Main.storyboard文件中应该是这番景象:



 

到目前为止,咱们在View Controller中添加了两个组件Image View和View,这也是仅有的两个组件,接下来咱们就要给它们添加一些布局约束了。

添加布局约束

选择image view,点击底部自动布局工具栏中的Align按钮,勾选Horizontal Center in Container选项,将后面的值设置为0,点击 Add 1 Constraint按钮添加第一个约束。



 

这个约束的意思是让image view在它的容器(View Controller的View)中保持居中。

而后再点击底部自动布局工具栏中的Pin按钮,添加一个image view顶部与容器顶部间距的约束,咱们设置为0:



 

上面这两个约束使image view处于容器居中的位置,而且它的顶部与容器顶部有一个固定的间距。如今咱们须要添加image view和text container view之间的约束。同窗们先选中image view,而后按住Ctrl键和鼠标左键,从image view往text container view移动鼠标:



 

松开鼠标左键后会弹出一个约束菜单,咱们选择Vertical Spacing



 

这个约束决定了image view底部和text container view顶部之间的距离。

如今选中image view而后点击右侧工具栏中的Size Inspector页签,同窗们会发现这里在Xcode6中和以前的Xcode版本有所不一样:



 

你会看到以前添加的三个布局约束,你能够在Size Inspector中很方便的修改这些布局约束。好比点击Bottom Space To: TextContainer约束后的 Edit按钮,会弹出约束属性编辑框,咱们让Constant的值等于20:



 

而后点击该弹出框以外的任意地方关闭该弹出框。

你先已经将TextContainer view顶部与image view底部的间距调整到了20,咱们还须要添加TextContainer view另外三个边的间距约束。

继续选择TextContainer view,点击底部的Pin按钮弹出 Add New Constraints窗口,在Spacing to nearest neighbor面板中设置左、右、底部的约束,将值设置为0,而后点击Add 3 Constraints按钮添加约束。这里要注意的是,在设置约束时要将 Constrain to margins选项的勾去掉,这样能够避免TextContainer view产生内边距:



 

这三个约束会让TextContainer view的左、右、底部三个边与容器的左、右、底部的间距始终为0。

如今Main.storyboard中应该是这番景象:



 

此时同窗们应该会注意到在view上有几个橘黄色的约束线,这意味着还有一些约束上的问题须要咱们注意。不过在运行时storyboard会自动更新view的大小来知足它与容器的约束条件。咱们也能够点击底部 Resolve Auto Layout Issues 按钮,在弹出框中选择 All Views in View Controller/Update Frames 来修复提示的约束问题,可是若是咱们这样作,那么image view的尺寸就会压缩成零,也就是会看不到image view。

这是由于咱们的image view还有没有任何内容,可是它有一个缺省的高和宽,而且值为0。进行自动布局的时候,若是被约束的view没有实际的高和宽,那么会依照缺省的高和宽来知足约束条件。

咱们接着学习,在项目结构中打开 Images.xcassets ,而后点击左下角的 +号,在弹出菜单中选择 New Image Set



 

双击左上角的 Image 标题将其改成 cloud :



 

咱们刚才新建的这个image set其实就是若干图片文件的一个集合,其中的每个图片都会对应一个特定的应用场景,也就是针对与不一样分辨率的Apple移动设备。好比说,一个图片集合可能会包含针对非视网膜、视网膜、视网膜高清三种分辨率的图片。自从Xcode中的资源库与UIKit完美结合后,在代码中引入图片时咱们只须要写图片的名称,程序在运行时会根据当前运行的设备自动选择对应分辨率的图片。

注意:若是你之前使用过经过资源库管理图片,那么你可能会发如今Xcode6中会有所不一样。那就是3x图片是怎么回事?

这个新的分片率是专为iPhone 6 Plus提供的。这意味着每个点是由3个像素点组成,也就是说3x的图片比1x图片的像素多9倍。

目前你的图片集合中仍是空的,同窗们能够在这里下载须要的图片cloud_images.zip ,而后将图片拖入刚才建立的名为cloud的图片集合中,将 cloud_small.png图片拖到 1x图片区域:



 

因为咱们的图片背景颜色是透明的,因此在图片集合中看到的都是白色的图片。你能够选中某一个图片,而后按下空格键来预览图片。好比选中 1x 图片,按下空格:



 

如今将 cloud_small@2x.png 图片拖至 2x 图片区域,将 cloud_small@3x.png 图片拖至 3x 图片区域。和以前状况同样,咱们看到的只是白色的图片,但咱们能够经过空格键来预览图片集合中的图片。

如今你就能够在image view中设置图片了。咱们回到 Main.storyboard 中,选中image view,在右侧工具栏中选择 Attribute Inspector 页签,将 Image View 面板中的 Image 属性设置为cloud,而后将 View 面板中的 Mode 属性设置为 Aspect Fit :



 

如今你的Main.storyboard中应该是这番景象:



 

咱们看到storyboard中一直有橘黄色的约束提示,是时候让咱们来修复它们了。首先选中view controller的view:



 

而后点击底部的 Resolve Auto Layout Issues 按钮,在弹出菜单的 All Views in View Controller 面板中选择 Update Frames :



 

这时,storyboard会自动根据约束条件从新计算view的大小以知足约束:



 

预览助手编辑器(Preview Assistant Editor)

通常状况下,在这个时候咱们应该会在iPad、iPhone4s、iPhone5s、iPhone六、iPhone6 Plus这几个不一样尺寸的设备上编译运行程序,以便测试通用的storyboard是否能在不一样尺寸的设备上正确的自适应。但这确实是个体力活,一遍一遍的更改设备、编译、运行,多么苦逼。但上天老是会眷顾咱们这些苦逼的程序员,Xcode6提供了Preview Assistant Editor,能在一个界面上显示出不一样尺寸设备的程序运行状况,是否有问题一目了然。

咱们打开 Main.storyboard ,而后选择 View\Assistant Editor\Show Assistant Editor ,这时编辑区会分隔为两部分。再点击顶部导航栏中的 Automatic ,在弹出菜单中选择 Preview ,最后选择 Main.storyboard (Preview) :



 

如今在 Assistant Editor 区域会显示一个4寸的界面:



 

咱们还能够点击预览界面底部,名字(好比图中的iPhone 4-inch)旁边的地方让屏幕翻转为横屏:



 

这无疑是针对检查不一样尺寸设备的自适应状况的一项重大改进,但还远远不止于此!点击预览界面左下角的 + 按钮,会弹出当前storyboard文件支持的各类尺寸的设备,可供咱们预览:



 

分别选择iPhone 5.5-inch和iPad,此时咱们在预览界面就能够同时显示三种尺寸的屏幕:



 

此时同窗们是否注意到4寸的横屏显示有点别扭呢?没错,它的那朵元太大了,咱们能够经过对image view添加其余的约束条件来改善这个问题。

回到 Main.storyboard ,选择image view,而后按住 Ctrl建和鼠标左键,拖动鼠标到View Controller的View上,松开鼠标后会弹出一个菜单,咱们选择 Equal Heights :



 

这时会出现一些红色的约束提示,这是由于咱们刚才加的这个约束条件与以前加过的约束条件有冲突。由于以前咱们添加过image view和TextContainer view之间的垂直间距(Vertical Margins)约束,因此image view的高度不可能等于它容器(View Controller的View)的高度。

让咱们来修复该问题,首先在storyboard的结构目录中选择咱们刚才添加的 Equal Heights约束,而后选择右侧工具栏中的 Attribute Inspect 页签,若是 First Item 属性不是cloud.Height ,那么在下拉菜单中选择 Reverse First and Second Item 这一项让 First Item 的值成为 cloud.Height :



 

接下来将 Relation 属性的值设置为 Less Than or Equal ,将 Multiplier 的值设置为 0.4 :



 

这一系列设置的做用是让cloud这张图片的高度要么等于它自身的高度,要么等于屏幕高度的40%,最后呈现的效果选择这二者中较小的一个高度。

如今你应该注意到了在预览面板中,4寸的横屏显示即时的对你刚才的约束改动作出了响应:



 

你看看其余尺寸的预览自动更新了么?固然,因此说 Preview Assistant Editor 确实是一项重大改进,是程序员和设计人员的福音!

因为本文的示例是一个天气应用,因此光有天气图标不行,咱们还得加上城市和温度才行。

 

 

给TextContainer中添加内容

打开 Main.storyboard ,从组件库(Object Library)中拖拽两个 Label 组件到TextContainer中,位置能够随意摆放:



 

先选择靠上的Label,而后点击底部的 Align 按钮,添加一个 Horizontal Center in Container约束,再点击 Pin 按钮,添加一个 Top Spacing to nearest neighbor 约束,设置其值为10:



 


 

而后选择右侧工具栏中的 Attribute Inspector 页签,将该Label的 Text 属性设置为 CupertinoColor 属性设置为 White ,Font 属性设置为 Helvetica Neue, Thin , Size 属性设置为 150

这时同窗们可能会发现基本看不到刚才设置的文字的全貌,这是由于Label大小的缘由。别着急,咱们很快就会解决这个问题。

如今选择另外一个Label,按照上述的方法给它也添加一个 Horizontal Center in Container 约束以及一个 Bottom Spacing to nearest neighbor 约束,将其值设置为10。打开右侧工具栏中的 Size Inspector 看看:



 

而后选择 Attribute Inspector 将该Label的 Text 属性设置为 28C , Color 属性设置为 White, 将 Font 属性设置为 Helvetica Neue, Thin, 将 Size 属性设置为 250

如今是时候解决Label大小的问题了。选中view controller的view,点击底部的 Resolve Auto Layout Issues 按钮,在弹出菜单中选择 All Views\Update Frames ,如今看看storyboard中发生了什么:



 

咱们看到了刚才设置的城市和温度,可是他们有一点点重叠,这可不是咱们想要的结果。在咱们修改这个问题以前,先看看预览编辑区的显示状况。咱们发如今iPad下显示貌似还挺完美:



 

可是在iPhone下不出所料的没法直视,字体太大了:



 

接下来让咱们解决这个重叠和字体大小的问题。

Size Classes

通用的storyboard文件当然很好,可是你想真正把它玩转仍是得花功夫去研究它,这是一件颇有挑战性的工做,固然咱们也要懂得运用一些现有的工具来帮助咱们。Xcode6就为咱们提供了一些工具和技巧,帮助咱们更好的实现自适应布局。

自适应布局有一个很重要的概念就是 Size Classes。它并不表明真正的尺寸,而是咱们从感官上感受尺寸的种类,经过这种种类的组合,表示出不一样屏幕尺寸设备的横屏及竖屏。

Xcode6为咱们提供了两个种类:普通(Regular)和紧凑(Compact)。虽然它们涉及到视图的物理尺寸,但通常它们只表明视图的语义尺寸,即不是真正的尺寸,而是咱们从感官上分出的尺寸种类。

下面这个表格向同窗们展现了size classes和各个尺寸设备竖屏、横屏之间的关系:



 

上表中的这些size classes组合都是咱们在开发应用中常常碰到的。然而你也能够在视图的任何一个层级中覆盖这些size classes。当之后咱们开发Apple Watch应用时显得尤为有用。

Size Classes与开发者

何为设计应用的UI?虽然如今大家的应用已经知道要使用Size Classes,而且大家在storyboard文件中设计应用界面时已经抛开了具体尺寸大小的束缚。可是大家难道没有发如今全部尺寸的设备中,不论是竖屏仍是横屏,应用的界面布局都是一致的吗?只是自适应了尺寸大小而已。这还远远不是设计。

当大家决心要设计自适应的界面并已经开始设计的时候,有一点很关键。那就是要知道界面在不一样的Size Classes要有继承的关系。大家应该首先设计一个基础的界面,而后根据不一样尺寸的横竖屏在基础的界面上进行自定义。千万不要把不一样的Size Classes当作独立的屏幕尺寸去设计UI。应该在大家的脑海中创建起界面的一个继承关系的思想,也就是大多数的设备使用基础界面,而后特别的尺寸及横竖屏再根据状况基于基础界面修改。

在本文中,一直没有像你们介绍过如何设置特殊设备的布局,那是应为自适应布局的核心概念Size Classes自己就是由各类特殊设备的特色抽象而来的。也就是说一个Size Classes就意味着一种特殊设备的布局特色,其实普通状况也是特殊状况中的一种。因此说咱们能够组合不一样的Size Classes来知足各类特殊的布局状况,好比一个支持自适应的视图,它能够在应用的父视图控制器中自适应,也能够在某一个功能的视图控制器容器中自适应。可是二者自适应后的布局却不相同。

这种改进对Apple自己也是有益的,由于他们不断的改变移动设备的尺寸,但历来没有强迫开发者和设计者从新开发和设计他们的应用以适应新尺寸的设备。这就不会让开发者和设计者对Apple不断改变设备尺寸这件事有抗拒心理。

接下来,咱们将自定义Size Classes以适应iPhone横屏的时候,由于如今的布局在横屏时用户体验很糟糕。

使用Size Classes

回到 Main.storyboard,点击底部的 w Any h Any,你就能够看到Size Classes的选择器了:



 

在这个由9个方格组成的网格中,你就能够选择你想在storyboard中显示的Size Class。一共有9种组合方式:3种垂直的也就是竖屏的(任意尺寸(Any),普通(regular),紧凑(compact))选择和3种水平的也就是横屏(任意尺寸(Any),普通(regular),紧凑(compact))的选择。

注意:这里有一点须要你们注意。在Size Classes中,有两个重要的概念叫作水平(Horizontal)垂直(Vertical)。可是在IB中叫作 宽(Width)高(Height)。但他们是等价的,因此你们记住这个概念有两种叫法就能够了。

目前咱们的布局在紧凑高度(Compact Height)时显示的很糟糕,也就是iPhone横屏时。咱们来解决这个问题,在Size Classes选择器中选择 Any Width | Compact Height 的组合:



 

这时你会发如今storyboard中会当即出现2个变化:



 

  1. storyboard中的view controller变成了咱们刚才设置的size class。

  2. storyboard底部会出现蓝色的长条区域,并显示出当前咱们正在使用的size class。

为了在该size class下改变布局,咱们要临时改变一些以前设置好的约束。在自动布局中这种操做有个术语叫作 装配(installing) 和 卸载(uninstalling) 约束。当一个约束在当前的size class中是适用的,咱们就将该约束装配在当前的size class中,若是不适用,咱们就卸载它。

选择image view,在右侧工具栏中选择 Size Inspector。你能够看到在image view上添加的全部约束:



 

单击鼠标左键选择 Align Center X to: Superview 约束,而后按下键盘上的 Delete 键来卸载该约束。这时咱们能够看到在storyboard中这个约束就当即消失了,而且在storyboard的结构目中和 Size Inspector中该约束都变成了灰色:



 


 

注意:你能够在Size Inspector中点击 All 来查看当前size class卸载掉的约束。

鼠标双击刚才卸载的那条约束,咱们能够看到在约束编辑界面的底部出现了额外的2个选项:



 

这两个选项的意思就是这条约束在基础布局中是可用的,但在当前的 Any Width | Compact Height 布局中是不可用的。

按照上面的步骤卸载掉image view上的另外3个约束:



 


 

如今你就能够添加适合当前size class的约束了。咱们添加一个 Align/Vertical Center in Container 约束,再添加一个 Pin/Left Spacing to nearest neighbor 约束,其值设置为10:



 


 

选择image view,按住 Ctrl 键从image view上拖拽至view controller的view上,在弹出的菜单中选择 Equal Widths 约束。

打开右侧工具栏中的 Size Inspector 页签,双击 Equal Width to: Superview 打开该约束的属性编辑界面。若是 First Item 属性的值不是 cloud.Width ,那么点击输入框,在下拉菜单中选择 Reverse First and Second Item。而后将 Multiplier 属性的值设置为 0.45

如今image view在全部的size class中显示应该都没有什么问题了。可是text container view还有点问题。你须要给它添加一个约束,让它显示在该size class屏幕的右侧。

TextContainer view如今有两种约束在身。一种是内部约束,它约束了两个Label的位置,这些约束在各size class中表现的还不错。另外一种是外部的约束,它们限制了text container view的左、右、底部与它容器的左、右、底部的间距。这些约束在当前的size class中表现的就不尽如人意了。若是想使text container view在当前size class中位于容器的右下角位置,你得卸载掉左侧的约束。

选中 Left Spacing to nearest neighbor 约束:



 

按 Cmd-Delete 卸载该约束,和以前同样,被卸载的约束显示为灰色。

如今你须要再添加两个约束将TextContainer限制在正确的位置上。一个是让text container view的宽度为它容器(view controller的view)宽度的一半。另外一个是将text container view固定在顶部。

按理来讲,你如今须要选中text container view而后按住Ctrl键和鼠标左键拖动鼠标到view controller view上,而后选择约束。可是目前的状况因为image view和text container view占满了整个view controller,因此你很难选中view controller的view。同窗们能够经过storyboard的结构树上进行该操做,会容易不少。

在结构树中选中TextContainer,按住 Ctrl 键和鼠标左键,拖动鼠标到结构树的View上:



 

弹出菜单中显示了可用的约束,按住 Shift 键点击 Top Space to Top Layout Guide 和 Equal Widths 约束:



 

而后选中TextContainer,在 Size Inspector 中设置刚刚添加的两个约束:

  • 将 Top Space to: Top Layout Guide 约束的值设置为0。

  • 将 Equal Width 约束的 Multiplier 的值设置为0.5。这里要注意 First Item 和 Second Item 这两个属性的值。前者应为TextContainer view,后者为view controller view。若是不一致,那么点击任意一个输入框,选择 Reverse First and Second Item

如今点击storyboard界面底部的 Resolve Auto Layout Issues 按钮,而后选择 All Views\Update frames 。看看发生了什么变化呢:



 

到目前为止,咱们的布局已经愈来愈接近完美了,惟一一点不足的就是字体大小的自适应,咱们会在下一节解决它!

文字属性的自适应

目前TextContainer中的文字尺寸在iPad设备上,也就是使用普通(Regular)size class显示还比较正常。可是当使用紧凑(Compact)size class时文字尺寸就显得太大了,以致于都超出了视图。不过同窗们不要怕,咱们照样能够在不一样的Size Classes中设置不一样的文字尺寸来作到自适应。

注意:与重写布局不一样,在不一样的size class中改变文字的属性始终会影响基础布局中的文字。它不能像布局同样,在不一样的size class中设置不一样的属性值。咱们经过下面的方法来解决这一问题。

回到storyboard文件中,将目前的size class改成最基础的 Any Width | Any Height 。

选择显示Cupertino的Label,打开 Attribute Inspector 。点击 Font 属性前面的 + 号:



 

弹出的菜单内容是让咱们选择一种size class的组合来重写该组合下的文字属性。咱们选择Compact Width > Any Height



 

这时就会出现另一个文字属性下拉框,针对于咱们刚才选择的 Compact Width | Any Height size class,咱们将字体大小改成90:



 

再选择显示温度的Label,重复刚才的操做,选择size class组合时选择 Compact Width > Any Height。设置字体大小为150。

在预览区域会自动更新咱们刚才的设置:



 

如今看起来稍微好一些了,可是显示 Cupertino 的Label被截掉了两头。同窗们可能会继续调整字体大小使Cupertino显示彻底,虽然目前看起来完美了,可是当换一个城市名称后或许又会出现刚才的问题。好比Washington, D.C这么长的名称,又好比Kleinfeltersville, PA这个更长的名称。那么咱们应该如何设计呢?

咱们的救世主 自动布局(Auto Layout) 再次出马。你只须要给显示城市名称和温度的这两个Label设置一个相对于TextContainer view的宽度约束便可。选中显示Cupertino的Label,按住 Ctrl 键和鼠标左键,拖动鼠标到TextContainer view,在弹出菜单中选择 Equal Widths 约束。对显示温度的Label作相同的操做。以后在预览界面看看发生了什么:



 

呃……貌似仍是有问题,城市名显示不彻底。Label中的文字长度超出了容许显示的空间。不过咱们能够经过一个选项,让Label自动判断当前的空间能够显示多大的字体。

选择显示Cupertino的Label,而后打开 Attribute Inspector。将 AutoShrink 属性设置为Minimum font scale,将其值设置为0.5。将 Alignment 属性设置为 Centered



 

对显示温度的Label作相同的操做。

再来看看预览区域,是否是在不一样尺寸的iPhone横屏、竖屏下显示都比较完美了:



 

是时候在不一样的设备上编译运行咱们的程序了。用设备来检验才是最保险的。iPhone下的横屏、竖屏是多么的完美:



 


 

详细介绍:https://github.com/shengguoqiang/AutoLayout-Size-Classes.git

相关文章
相关标签/搜索