在ios开发中经常用到自动布局,比如屏幕旋转来,界面就要从新摆放,不然就会显示不全。
自动布局一定要在storyboard界面里面设置,不能用纯代码的形式来写
要使用自动布局,首先要确保interface builder document里面的Use Auto Layout 和Use Size Classes 选项已经勾选??上了
图1:打开auto layout
这样在storyboard的右下角就会出现几个图形按钮: 分别是:stack、align、pin、和resolve auto layout issue 。
现在我们就可以开始设置自动布局的各种约束了
方法一:借助蓝色线来辅助:
在这里例子里,我把Thing0放在左上角,这时会出现两根蓝色线,然后点击reslove auto layout issue里面的Reset to Suggested Constraints 用建议的约束来重置,重置完后点击Thing0就能看到约束的线,在右边的size inspector可以看到各种约束
图2:设置Thing0靠近蓝色辅助线
图3:设置系统建议的约束
图4:在尺寸面板可以查看所有约束条件和设置约束值
点击Edit可以编辑约束条件的值,我们一般选择standard标准值,因为我们不想看到魔数,用魔数是个不好的习惯。
图5:设置auto layout的约束条件时出现很多警告的解决方法
在这里,我的Thing0由于被我拉伸过,所以在文件大纲出现了黄色的警告符??,点击警告??进入警告列表,里面有各种约束警告,在点击警告符??,xcode就会弹出可以让你选择的解决方案,选择你要使用的解决方案,再Fix 按钮,修复。
图6:运行程序
运行程序,不管竖屏还是横屏,Thing0都摆在了我想要放的地方
方法二:点击控件按Ctrl+鼠标移动方向来设置
这种方法类似与设置输出口Outlet和点击事件Action:
这里我把Thing1和Thing0靠近,我想让Thing1的自动布局依赖于Thing0,点击Thing1 按Ctrl拖动鼠标到Thing0上,松开后xcode就会弹框让你选择约束条件,可以这里可以选择Leading 、Center Horizontally、Trailling等,分别是前列、中心水平、后面对齐,添加完想要的约束条件后点击Thing1就能看到约束线
图7:通过拖拽的方式设置约束条件
图8:运行程序
运行程序,竖屏横屏都能正确摆放;
方法三:点击控件后直接添加约束
在这个例子里,我把Thing0的约束清空了,没有任何的约束条件,也没有借助蓝色辅助线。
点击Thing0后,再点击四个控件:中的Pin也就是第三个,就会弹出让你设置约束的各种条件,包括上下左右的间距约束等。
设置好约束条件后,点击add 2 constraints 控件Thing0的约束就设置好了
图9:通过点击控件来直接
图 10:程序运行
程序运行,Thing0摆放正确