近期需要對(duì)舊的一個(gè)App的界面進(jìn)行UI改造，要求效果圖在不同分辨率(iPhone，iPad)下能保持相同的顯示比例效果。大屏幕下的按鈕，字體要相應(yīng)的變大。
-
不堪入目的舊界面origin.png
-
改版后的新面孔new.png
一，原布局存在問題
- 圖片的固定尺寸導(dǎo)致在大屏中顯示太小
- 字號(hào)在不同分辨率中不能很好的轉(zhuǎn)換
- 布局采用固定數(shù)值的尺寸導(dǎo)致大屏整體的顯示效果錯(cuò)亂
二，原因
圖片.png
上圖為蘋果設(shè)備的分辨率，對(duì)開發(fā)者而言，往往只要關(guān)注設(shè)備的邏輯分辨率(pt),很長(zhǎng)一段時(shí)間編寫界面都是以邏輯分辨率大小編寫，例如以320寬來計(jì)算尺寸以及布局，常有如下硬編碼：
UIView *aView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 160, 160)];
在顯示時(shí)系統(tǒng)會(huì)根據(jù)不同機(jī)型的縮放因子自動(dòng)轉(zhuǎn)換成對(duì)應(yīng)的屏幕分辨率。以iPhone5為例，160的寬度轉(zhuǎn)換后大概占屏幕的一半，但對(duì)于分辨率是1024的iPad，實(shí)際顯示的寬度比例不到20%了。同理，xib構(gòu)建的界面，如果約束采用的是固定值，也一樣會(huì)出現(xiàn)類似問題
三，界面如何適配iPhone，iPad
想要在iPhone，iPad的中顯示效果一致，達(dá)到同比放大的視覺效果，就是如何處理好字體，間距，控件大小的等比例縮放問題。核心思路就是避免寫死的數(shù)值硬編碼
1: 代碼構(gòu)建的界面使用比例布局
[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構(gòu)建的界面約束采用百分比布局布局
-
view的寬度：設(shè)置相對(duì)于容器寬度的百分比圖片.png
-
view固定寬高比：設(shè)定其 Aspect Ratio圖片.png
-
view與父容器邊距：View.Leading 與 Superview.Leading 間距占 Superview.Width 的百分比圖片.png
3:字體等比自動(dòng)適配
以UI給的尺寸圖iPhone6/6s(375*667)為例，獲取屏幕的最長(zhǎng)邊，通過比例換算最終的字體大小，定義宏
#define SCREEN_HEIGHT MAX([UIScreen mainScreen].bounds.size.height, [UIScreen mainScreen].bounds.size.width)
#define font(R) (R)*(SCREEN_HEIGHT)/667
// 如果是xib中的控件，則需在awakeFromNib中設(shè)置即可
label.font = [UIFont systemFontOfSize: font(11)];
調(diào)整后效果如開頭所示
