Xcode6下学习autolayout 一

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

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

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

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


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


UI如下:

Xcode6下学习autolayout 一_第2张图片


sizeclass 选择所有竖屏的iPhone 

Xcode6下学习autolayout 一_第3张图片


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


Xcode6下学习autolayout 一_第4张图片


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



Xcode6下学习autolayout 一_第5张图片


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

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

Xcode6下学习autolayout 一_第6张图片


添加约束:

Xcode6下学习autolayout 一_第7张图片


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

添加后的效果:

Xcode6下学习autolayout 一_第8张图片


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


Xcode6下学习autolayout 一_第9张图片


我现在不跑代码就像看到我现在的效果:Xcode6下学习autolayout 一_第10张图片


Xcode6下学习autolayout 一_第11张图片


效果图:

Xcode6下学习autolayout 一_第12张图片


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

现在run看看效果!!


Xcode6下学习autolayout 一_第13张图片Xcode6下学习autolayout 一_第14张图片Xcode6下学习autolayout 一_第15张图片  

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


稍后继续。。。








你可能感兴趣的:(storyboard,autolayout)