前言:在写页面的时候如果你不会使用Autolayout, 还得手动去用代码修改约束的话, 那真的很影响效率. 本文要介绍如何用xib的Autolayout进行等比例缩放, 阅读本文需要一定的xib绘制基础.
1.Stack View
用stack view来做那是相当的方便快捷, stack view顾名思义就是为了处理多个view堆叠的. 具体操作就不讲了, 篇幅有限, 推荐参考https://www.jianshu.com/p/e81c9fb0bcd3, 不用stack view来做的话, 请参考http://blog.csdn.net/idoshi201109/article/details/51584382, 或者参考我下面的范例.
2.简单的等比例缩放
选中左边的view右键按住拉到右边的view上, 选择equal widths/equal heights/Aspect Ratio 这三个都选上, 接着我们约束左边的view, 距离左边和上面的约束, 右边的view设置右边和上面的约束. 然后右键左边的view拖拽到最大的这个view上, 选择Aspect Ratio, 意思是让左边这个view和最大这个view成比例缩放. 这样就能让这两个view一样大,且随着屏幕大小而缩放了.
QQ20180110-1
3.子视图相对父视图等比例缩放
等比例缩放还有一种, 比较难的. 着重讲一下.如下图所示:
0D74ADDB-2E2E-4AE1-8321-A5A5CD6B9E3A
图上, 如果view2的高度会随着屏幕缩放, view1 要相对于view2的左边距和下边距不变进行缩放, 如何做, 这是个很实际但是又比较棘手的问题, 很多App的个人页面就会有这样的要求, view2是信息栏, view1是头像, 然后view2的下面跟一个tableview. 听起来就很头疼是不是, 如果用代码写会比较简单, 但是代码肯定要写不少, 不想看到那一大坨的代码怎么办? Autolayout!
3.1 约束view2
我们一步一步来, 先解决view2, 这个很简单, 把view2的上左右都约束死,然后自身Aspect Ratio, 如下
8D6279E8-4473-4779-A416-518148CF40D3
3.2 约束view1
选中view1 和 view 2, 点击Align按钮选择左边和下边的约束, 并且设置值
Snip20180110_4
如上图所示, Leading Edges就是相对view2左边的距离, Bottom Edges就是相对view2下边的距离, 设置完后, 右键按住view1拉一根线到view2 选择Aspect Radio, OK 大功告成!
4.结语
xib的autolayout简单方便, 会用以后就起飞了. 前提是要熟练, 不然还不如写代码来得快. 等比例缩放是适配的核心, 需要多运用和理解.
网友评论