SizeClasss和AutoLayout教程4
2015-03-26 15:11
204 查看
SizeClasss和AutoLayout教程4
(这个系列的文章都来自《iOS8 by tutorials》的第一章,大部分直接翻译,会加入我自己的解释和理解,有兴趣的可以上Raywenderlich网站购买正版图书。购买链接http://www.raywenderlich.com/store )上一章我们学习了SizeClass的不同规格,(感觉这么叫不太合适),也就是通过sizeclass的九宫格我们可以选择不同的布局来支持不同的设备。
上一章结束我们的布局预览是这样的,如图
![](http://m3.img.srcdd.com/farm5/d/2014/1125/15/D950A76EEA31BDC1ED70106E04B46411_B1280_1280_449_267.png)
iPhone的横放布局
这一张我们主要学习如何在不同的SizeClass给同一个label设定不同的字体大小和样式。
首先,我们把SizeClass改回wAny hAny,就是我们的基本视图,然后选中我们的内容为“Cupertino”的label,在右边的窗口找到我们的Font属性。如图
![](http://m1.img.srcdd.com/farm4/d/2014/1128/11/1256480A4B2F651B154FF32F61405877_B1280_1280_209_60.png)
Font属性
注意,左边有个小加号,点击。
选中Compact Width里的AnyHeight,如图
![](http://m2.img.srcdd.com/farm5/d/2014/1128/11/22A576066A74665EE1AF991C9E3161FE_B1280_1280_298_110.png)
字体
现在,我们的FONT下面多了一个这个东西,这代表这个label在compact width和任何高度布局下得字体样式。我们把字体大小改成90.如图
![](http://m3.img.srcdd.com/farm4/d/2014/1128/11/40D41FF99D2AEAEC6A9C899971BF69D1_B1280_1280_264_66.png)
改成90
改完之后我们去预览视图看看,如图
![](http://m1.img.srcdd.com/farm5/d/2014/1128/11/29943EC0644538706A350D312D368D6F_B1280_1280_633_213.png)
改成90
明显可以看出,尽管我们把字体改小了,但是视图里的字体还是偏大,因为还是有一部分没能显示,尽管我们继续手动改小一点,改成70,60,也许可以正常显示,但是需要思考的是,如果label内容不定,例如长一点的地名,Washington,D.C.这种呢?所以,这并不是一个行之有效的方法。
幸运的是,我们有更好的解决办法。
第一步,我们先给两个label都增加一个约束,那就是把两个label的宽度设置为与TextContainer等宽。用右键选中Cupertino这个label拖到TextContainer这个view,松手,选择Equal Widths。然后对温度那个label使用同样的步骤。我们再在preview视图里看看效果。
![](http://m3.img.srcdd.com/farm5/d/2014/1125/15/D950A76EEA31BDC1ED70106E04B46411_B1280_1280_449_267.png)
预览
恩,还不是特别理想。
我们来更改下面两个属性,如图
![](http://m2.img.srcdd.com/farm4/d/2014/1128/11/BBDA004A6F20FF8EEA5028C658B83728_B1280_1280_359_301.png)
预览
一个是把内容对齐改为居中,然后把Autoshrink改成Minimum Font Scale,下面的数值改成0.5.注意把两个label都改成这样。然后我们再来看看。
![](http://m1.img.srcdd.com/farm5/d/2014/1128/11/230276B14BD94DE04DA14C2DCFC04D0D_B1280_1280_599_207.png)
预览
Bravo!
在模拟器里运行看看。
![](http://m2.img.srcdd.com/farm5/d/2014/1128/11/071F05224FBF751C6506EFA3E834C89B_B1280_1280_324_593.png)
预览
![](http://m1.img.srcdd.com/farm4/d/2014/1128/11/C362236DB4ABF0C9591B67FEEBAA4F67_B1280_1280_568_344.png)
预览
Nice!
还没完呢!我们还有更精彩的内容。
你或许碰到过这种情况,在设计iphone和ipad时,图片会有不同的设置,例如,在iphone离会用小一点的图片,但是在ipad离,会用完全不同的另外一张大图。那么在sizeclass里这里只需要简单的配置就能实现!
在我们的Images.xcassets里找到我们的cloud,选中我们的图片,在右边会出现这么一个窗口。
![](http://m1.img.srcdd.com/farm4/d/2014/1128/11/BFBCC0B6190ADFF90D8216570B6C4E39_B1280_1280_274_524.png)
预览
我们把devices选成
![](http://m2.img.srcdd.com/farm5/d/2014/1128/11/B147B8B6B281D941EA2CE30BDAFE7577_B1280_1280_243_138.png)
预览
然后把cloud_big@2x.png这个图片拖入ipad的2x里。你完全不用再回到imageView里重新设置,直接运行ipad,看看效果!。
(刚才把设备设成了iphone,怎么设置都搞不成功,需要把设备改成uiniversal才行。 -_-!)
到这一章,sizeclass先告一段落。我们集中精力写视频和动画相关的blog,请大家继续关注。
storyboard是大势所趋,还在用纯代码写的同学们要快点学习了。
相关文章推荐
- SizeClass 和AutoLayout教程3
- SizeClass和AutoLayout教程1
- iOS autolayout进阶教程,实现视频播放时,横竖屏的自动切换-适配iOS8 sizeClass 和之前的版本
- SizeClass 和AutoLayout教程2
- SizeClass 和AutoLayout教程2
- SizeClasss和AutoLayout教程4
- SizeClass和AutoLayout教程1
- Auto Layout和Size Class方面一些非常棒的文章和教程
- SizeClass和AutoLayout教程1
- SizeClass 和AutoLayout教程2
- SizeClass和AutoLayout教程1
- SizeClass和AutoLayout教程1
- SizeClass 和AutoLayout教程2
- xcode6中自动布局autolayout和sizeclass的使用
- iOS8开发~UI布局(二)storyboard中autolayout和size class的使用详解
- iOS8开发~UI布局(二)storyboard中autolayout和size class的使用详解
- xcode6中自动布局autolayout和sizeclass的使用
- Xcode6中自动布局autolayout和sizeclass的使用
- AutoLayout And SizeClass
- xcode6中自动布局autolayout和sizeclass的使用