最近在做的一个项目,开发ui界面的时候,根据iPhone 7 来做界面适配,在其他屏幕上面,显示的效果不是按等比例显示的。尤其是在小尺寸的屏幕,比如iPhone5 se上面,显示不全,有些空间,显示不出来。为此想找一种能够等比例布局的方案。
一、可选方案
功夫不负苦心人,网上找到几篇文章,介绍等比例适配的方法。概括起来,主要有以下三种:
1.使用第三方库:masonry
2.使用第三方库:PureLayout
3.使用系统自带的auto layout
经过一番比较,最终还是选择了使用系统自带的auto layout来做等比例适配。
主要衡量准就两个:
1.能够完成等比例适配的任务目标
2.简单易用,便于修改。
3.所见即所得
据我有限的了解,masonry和pureLayout都需要写很多代码来控制布局,不能所见即所得。对于ui经常会改动的情况,这两个方案,也稍显麻烦了点。像我这样喜欢简单,不喜欢麻烦的人,自然而然选择最简单的方案。
二、布局需求
界面布局的需求总结起来,根据界面尺寸、界面位置和绝对值、等比例的相对值来分为以下几种需求:
1.确定界面的尺寸
数学原理描述:
width = multi * WIDTH + const
height = multi * HEIGHT + const
其中width为界面的尺寸,WIDTH为参考界面的尺寸,可以是父界面或者屏幕宽度,也可以是其他界面。multi为比例系数。const为偏移值。
height为界面的高度,HEIGHT为参考界面的高度。
绝对尺寸
一般这种情况下,multi设为1,只修改const的值即可实现一个界面比另一个界面尺寸的固定差值。
等比例的相对尺寸
一般这种情况下,const设为0,通过改变multi的值,来控制一个界面相对于另一个界面的等比例缩放后的尺寸。
2.确定界面的位置
数学原理描述:
X = multi * WIDTH + const
Y = multi * HEIGHT + const
其中X为界面的横坐标,WIDTH为参考界面的尺寸,可以是父界面或者屏幕宽度,也可以是其他界面。multi为比例系数。const为偏移值。
Y为界面的纵坐标,HEIGHT为参考界面的高度。
绝对位置:
一般这种情况下,multi设为1,只修改const的值即可实现一个界面比另一个界面的固定偏移。
等比例的相对位值:
一般这种情况下,const设为0,通过改变multi的值,来控制一个界面相对于另一个界面的等比例缩放后的偏移位置。
三、实现方法
1.具体实现方法,对于设置绝对坐标和绝对尺寸的方法,直接设置约束的const值即可。
2.对于相对尺寸和相对坐标的设置方法,需要设置完约束后,将const设为0,并将multi设置为界面的尺寸:相对界面的尺寸。
参考链接:
1.Storyboard使用技巧:使用比例方式布局
https://segmentfault.com/a/1190000002997979?name=ios开发&description=&isPrivate=1
2.iOS AutoLayout 百分比布局
http://blog.csdn.net/caryaliu/article/details/49283699
3.iOS开发-AutoLayout控件等比间距的百分比布局
https://segmentfault.com/a/1190000005272005