近期需要对旧的一个App的界面进行UI改造，要求效果图在不同分辨率(iPhone，iPad)下能保持相同的显示比例效果。大屏幕下的按钮，字体要相应的变大。
-
不堪入目的旧界面
origin.png
-
改版后的新面孔
new.png
一，原布局存在问题
- 图片的固定尺寸导致在大屏中显示太小
- 字号在不同分辨率中不能很好的转换
- 布局采用固定数值的尺寸导致大屏整体的显示效果错乱
二，原因
图片.png
上图为苹果设备的分辨率，对开发者而言，往往只要关注设备的逻辑分辨率(pt),很长一段时间编写界面都是以逻辑分辨率大小编写，例如以320宽来计算尺寸以及布局，常有如下硬编码：
UIView *aView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 160, 160)];
在显示时系统会根据不同机型的缩放因子自动转换成对应的屏幕分辨率。以iPhone5为例，160的宽度转换后大概占屏幕的一半，但对于分辨率是1024的iPad，实际显示的宽度比例不到20%了。同理，xib构建的界面，如果约束采用的是固定值，也一样会出现类似问题
三，界面如何适配iPhone，iPad
想要在iPhone，iPad的中显示效果一致，达到同比放大的视觉效果，就是如何处理好字体，间距，控件大小的等比例缩放问题。核心思路就是避免写死的数值硬编码
1: 代码构建的界面使用比例布局
[editView mas_makeConstraints:^(MASConstraintMaker *make) {
make.center.equalTo(self.view);
make.width.equalTo(self.view.mas_width).multipliedBy(0.7);
make.height.equalTo(self.view.mas_width).multipliedBy(0.7*0.7);
}];
2: xib构建的界面约束采用百分比布局布局
-
view的宽度：设置相对于容器宽度的百分比
图片.png
-
view固定宽高比：设定其 Aspect Ratio
图片.png
-
view与父容器边距：View.Leading 与 Superview.Leading 间距占 Superview.Width 的百分比
图片.png
3:字体等比自动适配
以UI给的尺寸图iPhone6/6s(375*667)为例，获取屏幕的最长边，通过比例换算最终的字体大小，定义宏
#define SCREEN_HEIGHT MAX([UIScreen mainScreen].bounds.size.height, [UIScreen mainScreen].bounds.size.width)
#define font(R) (R)*(SCREEN_HEIGHT)/667
// 如果是xib中的控件，则需在awakeFromNib中设置即可
label.font = [UIFont systemFontOfSize: font(11)];
调整后效果如开头所示
网友评论