在Adaptive Layout初阶这一部分,我们写一个关于weather的小app,一句代码都不用写(这么好-_-|||),Let's begin!
1 - Universal storyboards
Universal storyboards好处就不多说了(一样的storyboard,跑遍各种iOS设备),先建立一个工程尝试下下:
打开Xcode(这里用的时Xcode 6),选Create a new Xcode project:
选iOS\Application\Single View Application,再点Next:
给你的Product取个名字叫AdaptiveWeather,语言选Swift,Device设成Universal:
打开工程,就能在Project Inspector中看到你的Main.storyboard:
现如今的Main.storyboard已经是one for all的神器了,不管iOS设备屏幕尺寸,你就需要这么一个Main.storyboard。打开这storyboard,一个孤零零的view controller映入眼帘:
从Object Library里,选Image View拉到view controller的convas里面。并且在Size Inspector里,把X position设成150,Y position设成20,Width为300,Height为265:
接着再从Object Library里拽一个View放到刚刚加入的image view下面,在Size Inspector里,把X position设成150,Y position设成315,Width为300,Height为265:
选择刚刚加入的View,打开Identity Inspector,在Document pane下地Label中输入TextContainer,并在Attributes Inspector中把它的background color设置成Red:55,Green:128,Blue:186.
最后选择这个view controller的view,并在Attributes Inspector中把它的background color设置成Red:74,Green:171,Blue:247:
然后,来给这两个views加点layout constraints。
(1)Adding layout constraints
选image view,点击下auto layout工具栏里的Align,然后把Horizontal Center in Container给check上,并且一定一定把它的值设成0:
接着点Align右边的Pin,给它加一个top spacing to nearest neighbor constant,值为0:
接着,为了确定image view和下放的text container的间距,从image view开始Crtl+drag到下面的container view:
在紧接着出现的constraint context menu中,选择Vertical Spacing:
选择image view,打开Size Inspector:
点击Bottom Space To:TextContainer后面的Edit,把Constant设成20:
选择TextContainer view,然后点Pin,先勾选掉Constrain to margins,然后在Spacing to nearest neighbor中,将left,right,bottom都设成0,最后点Add 3 Constraints:
现在得到这样一个东西:
还没完事儿,接下来加图。
在Project Navigator里打开Images.xcassets(不要说你不知道在哪),点击左下角+号,选择New Image Set:
点击下新建Image Set左上角的Image字样,改成cloud:
把图片素材拖放到相应位置(你可能没有素材……)。
回到Main.storyboard,选择image view,切换到Attributes Inspector,在image后的输入框中输入cloud,并在View\Mode的下拉列表中选择Aspect Fit:
橘黄色的constraints说明还有活要干,所以,首先选择view controller的view,然后点击底部的Resolve Auto Layout Issues(位于Pin右边),点击All Views\Update Frames,Xcode帮你全部自动搞定,厉害了:
(2)The Preview Assistant Editor
Xcode中得全新Preview Assistant Editor貌似挺给力,现在来尝试下下。
打开Main.storyboard,点击菜单上的Assistant Editor:
接下来……但愿你能找到:
点击Main.storyboard(Preview):
点击最下方的旋转按钮,转转更舒爽~:
这个云貌似太大了(其实也还好),改一下。
从image view上Ctrl-drag到view controller的view上,这样进来一个新的constraint,在冒出来的菜单列表中选择Equal Heights:
然后就冒出来一堆红呼呼的constants:
选在这多白云右边那条红色的constraint,打开Attributes Inspector,设置成如下值:
云朵就这么被搞定了,红呼呼消失:
(3)Adding content to the TextContainer(To be continued)
拽两个label到TextContainer上:
选中第一个label,调整Align和Pin的设置如下:
接着选中Attributes Inspector,设置Text为Guangzhou,颜色为White,字体为Helvetica Nenu,Thin,Size为150。
第二个Label的Align值设置的与第一个Label相同。Pin中设置Bottom space to nearest neighbor为10,Text为26C,颜色为White,字体为Helvetica Nenu,Thin,Size为250。
最后Resolve Auto Layout Issues,点击All Views\Update Frames,最终效果如下:
这字体,明显大了……
不过,夜深了,睡了……