近期需要對舊的一個App的界面進行UI改造昏兆，要求效果圖在不同分辨率(iPhone婴噩，iPad)下能保持相同的顯示比例效果是尖。大屏幕下的按鈕醉箕，字體要相應的變大钾腺。
-
不堪入目的舊界面origin.png
-
改版后的新面孔new.png
一，原布局存在問題
- 圖片的固定尺寸導致在大屏中顯示太小
- 字號在不同分辨率中不能很好的轉(zhuǎn)換
- 布局采用固定數(shù)值的尺寸導致大屏整體的顯示效果錯亂
二讥裤，原因
圖片.png
上圖為蘋果設備的分辨率放棒，對開發(fā)者而言，往往只要關(guān)注設備的邏輯分辨率(pt),很長一段時間編寫界面都是以邏輯分辨率大小編寫己英，例如以320寬來計算尺寸以及布局间螟，常有如下硬編碼：
UIView *aView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 160, 160)];
在顯示時系統(tǒng)會根據(jù)不同機型的縮放因子自動轉(zhuǎn)換成對應的屏幕分辨率。以iPhone5為例损肛，160的寬度轉(zhuǎn)換后大概占屏幕的一半厢破，但對于分辨率是1024的iPad，實際顯示的寬度比例不到20%了治拿。同理摩泪，xib構(gòu)建的界面，如果約束采用的是固定值忍啤，也一樣會出現(xiàn)類似問題
三加勤，界面如何適配iPhone仙辟，iPad
想要在iPhone，iPad的中顯示效果一致鳄梅，達到同比放大的視覺效果叠国，就是如何處理好字體，間距戴尸，控件大小的等比例縮放問題粟焊。核心思路就是避免寫死的數(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的寬度：設置相對于容器寬度的百分比圖片.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)];
調(diào)整后效果如開頭所示
