码迷,mamicode.com
首页 > 其他好文 > 详细

Xcode6下学习autolayout 一

时间:2014-12-17 18:43:09      阅读:355      评论:0      收藏:0      [点我收藏+]

标签:storyboard   autolayout   

iOS8来了,Xcode也升级到6了,可是我连autolayout,甚至storyboard都不会用。

手工码代码都是通过宏定义来适配界面的,所以在iOS7出来的时候也没有变更搭UI的习惯。现在iOS8出来了,sizeclass autolayout一时间铺天盖地。下的我半死,感觉自己落伍了。赶紧的要学习storyboard,autolayout。。。bubuko.com,布布扣

不过直到今天才终于有时间看下autolayout,不错再次之前,对storyboard不了解,首先看篇博客

http://blog.csdn.net/u010990519/article/details/38417381 ,博客中通过截图讲的非常精彩,赞一个!


现在新建一个新的工程,搭建如下UI,如果还是不会storyboard,就在看一遍上边的博客,bubuko.com,布布扣


UI如下:

bubuko.com,布布扣


sizeclass 选择所有竖屏的iPhone 

bubuko.com,布布扣


好的,UI搭好了,赶紧的贴个Label试试autolayout


bubuko.com,布布扣


label贴好了,开始使用autolayout,为了能够替换出来是auto的,就把label添加约束控制在右下角,通过长短屏幕测试。


bubuko.com,布布扣

bubuko.com,布布扣


Xcode工具栏,和storyboard面板里边都有添加约束的工具。注意:他们的顺序不是对应的。

首先使用storyboard面板的添加一个距离屏幕右边20像素的约束:

bubuko.com,布布扣


添加约束:

bubuko.com,布布扣


这个地方有个比较重要的地方就是去掉对勾,因为不去掉会有内边距,导致label会跟superView多出来16像素的距离(如果你设置约束为20,实际就是36);

添加后的效果:

bubuko.com,布布扣


一条约束不足固定label的frame,再添加一条距离底部20像素的约束


bubuko.com,布布扣


我现在不跑代码就像看到我现在的效果:bubuko.com,布布扣


bubuko.com,布布扣


效果图:

bubuko.com,布布扣


label的宽度根据内容进行了适配。

现在run看看效果!!


bubuko.com,布布扣bubuko.com,布布扣bubuko.com,布布扣  

底色是白色的,点几下图片就能看到效果都是右下角20-20 bubuko.com,布布扣


稍后继续。。。








Xcode6下学习autolayout 一

标签:storyboard   autolayout   

原文地址:http://blog.csdn.net/growinggiant/article/details/41982347

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!