iOS 9 storyboard自动布局

关于用SB自动布局,我觉得我算还是比较幸运的。网上关于SB自动布局的资料也是比较少。为什么说我比较幸运呢,以前在某坑人的培训机构培训。遇到一群垃圾,这都是后话,不想多说。只是想跟很多有跟我一样喜欢编程的朋友,提个醒。选培训机构要慎重。现在来说说今天我想说的重点,storyboard的自动布局。

    首先打开storyboard

计算机生成了可选文字:
Date Picker

当然我这里用的是Xib,不过没关系,都是一样的布局。我在这里拖入了一些空间

计算机生成了可选文字:
Date Vbw Confrolbr 
g Back Ground Btn 
aackgV lew 
Date Picker 
@sure Btn 
@Cannel atn 
g Constraints 
Constraints 
Back Ground Btn.top top 
trailing Back Ground atn.tr... 
Back Ground Btn.leading le... 
bottom Back Ground atn.b... 
BackgV lew.centerY centerY 
BackgV lew.centerX centerX 
trailing BackgV lew.trailing 20 
aackgV lew.leading leading..

他们的层级关系我想如果动一点编程的人都知道,这里我也不做复述。一下讲的内容只要你知道我的层级关系,照着自己去实现应该不难。

接下来要将一下这几个自动布局的属性

计算机生成了可选文字:
Shadow Color 
图 的 
这 虍 “ 图 距 
是 你 的 複 图 距 叵 〔 〔 〔 〔 〔 〔 〔 〔 ] 离 右 逦 框 的 
左 边 
to nearest neighb4kÄ 
冂 Constrain to 
当 勾 选 这 个 
gwidth 
冂 
Heig 
冂 
这 个 表 , 、 
宽 高 : 勾 选 的 
一 目 
Equal Widths 
时 候 表 示 , 宽 
一 劇 
Equal Heights 
高 不 变 
囗 目 Aspect Ratio 
「 1 Align Leading Edges 
Update Frames None 
Add Constraints


上面那张图的margin,当你勾选的时候 左右边距的0 会变化。如果你有手机的话,可以看看你的手机是不是左右两边有个黑边,这个边距就是指的这个。

  说到这里还有一个比较重要的就是那两个灰色的 Equal Width /Equal Heights 这两个在这里是默认是不能选的,那什么时候能选呢?它又有什么作用?请继续往下看。

计算机生成了可选文字:

我的这两个按钮,是会跟着屏幕变化大小的。如果你自己试过去布置这个布局,不会发现对于这两个控件有点麻烦,在上面所讲的那些,他就只能固定他的上边距,下边距,和左边距。这三个是不足以固定“取消”按钮的位置的,那怎么办?

 这时,你选中“取消”按住control,连线到“确定”就会弹出下面的框

计算机生成了可选文字:
aldulnw 01 PIOH 
pedsv 
sua6.aH lenbA 
sulp1M lenbA . 
amueO 
Bupeds muozVOH . 
qea

这里就可以设置这个Equal widths了。设置了这个你就会发现。这两个控件位置似乎就固定了。对的。这个Equal widths表示的就是,会同时改变两个控件的宽。那两个控件之间的距离不就是固定了嘛。

计算机生成了可选文字:
Add New Alignment Constraints 
Leading Edges 
Trailing Edges 
Top Edges 
Bottom Edges 
a 
Horizontal Centers 
Horizontally in Container 
Vertically in Container 
Update Frames None

上面这些就是水平居中和垂直居中了。我的BackV View 就是设置了水平居中 和垂直居中的,这表示不管我View相对于整个xib都是居中的,位置不在改变。

其他的灰色建也都可以按我上面的做法去试试。

      本文纯手工,有不足之处还望各位多指教,新人多照顾。

原文地址:https://www.cnblogs.com/laolai/p/5084937.html