iOS開發(fā)：屏幕適配淺談

前端開發(fā)的屏幕適配其實(shí)算是基本功，每個(gè)碼農(nóng)在長(zhǎng)期實(shí)踐中都有自己的總結(jié)。

在iOS平臺(tái)上，蘋果爸爸對(duì)適配的支持個(gè)人感覺很不人性化，提供了autoLayout、sizeClass等技術(shù)，感覺沒有前端類似flexBox這樣的技術(shù)來得靈活。像是點(diǎn)歪了技能樹，過于重視使用xib配置UI，但很多碼農(nóng)還是習(xí)慣純代碼編程。Cocoa沒有css這樣的純布局文件，導(dǎo)致很多時(shí)候我們將布局、UI、邏輯寫在一起，十分混亂，冗長(zhǎng)。

下面簡(jiǎn)單介紹下在實(shí)踐中適配屏幕的方向思路，拋磚引玉。

從設(shè)計(jì)到代碼：溝通與標(biāo)準(zhǔn)

App的UI界面是由設(shè)計(jì)人員（產(chǎn)品，UI）繪制的，然后由開發(fā)實(shí)現(xiàn)，雙方要有良好的溝通，并且把設(shè)計(jì)內(nèi)容標(biāo)準(zhǔn)化，文檔化。

對(duì)設(shè)計(jì)方來說，適配的規(guī)則總是在設(shè)計(jì)師心中的，是按比例的縮放，還是固定的間距，是公用一套規(guī)則，還是在大屏下有特殊的布局，都需要有明確方式傳達(dá)給耿直的碼農(nóng)們。

良好的設(shè)計(jì)文檔是溝通第一步

一般常見的布局方式有：

  • 固定間距：在不同尺寸下，間距總是固定
  • 流式布局：文字，圖片等在不同屏幕下流式排布，比如大屏下一行顯示四張圖片，小屏一行三張，圖片尺寸固定
  • 比例放大：間距，文字大小，圖片大小等比例放大
  • 保持比值：兩個(gè)UI元素或者圖片的長(zhǎng)寬等屬性保持一定的比值
  • 對(duì)齊：元素間按某個(gè)方向?qū)R

設(shè)計(jì)師需要將這些布局規(guī)則標(biāo)注清楚，有利溝通，也方便文檔化日后追溯。

對(duì)于一些通用UI組件，要進(jìn)行標(biāo)準(zhǔn)化，設(shè)計(jì)上有利于app風(fēng)格統(tǒng)一，實(shí)現(xiàn)上也方便開發(fā)進(jìn)行必要的封裝。

平面設(shè)計(jì)要標(biāo)準(zhǔn)化

UI的搭建：xib VS 純代碼

蘋果一直用xib來標(biāo)榜他們家app開發(fā)的簡(jiǎn)單易上手：將各種你需要的東西往屏幕上一拖一放，一個(gè)UI界面就搞定了，這很cool不是嘛！

xib的優(yōu)點(diǎn)顯而易見：

  • 易上手、可視化，所見即所得
  • 減少代碼量
  • 快，適合小app快速開發(fā)

但是在我們的實(shí)際項(xiàng)目中，是不推薦使用xib的，首先，xib本身過于笨拙，只能搭建一些簡(jiǎn)單的UI，動(dòng)態(tài)性很差，難以滿足app復(fù)雜的UI交互需求。

其次，做過性能優(yōu)化的同學(xué)都知道，xib（or StoryBoard）的性能是很差的，相對(duì)于用純代碼alloc的組件來說，xib加載慢，而且會(huì)占用app包的體積。不僅僅是app的性能，使用老mac打開較大的xib文件，有時(shí)候會(huì)卡的你懷疑人生，嚴(yán)重影響開發(fā)效率（心情）。

除此以外，對(duì)于團(tuán)隊(duì)協(xié)作來說，xib也不是一個(gè)好選項(xiàng)：閱讀困難，無法在git上查看歷史改動(dòng)，容易造成沖突，造成沖突后難以解決，元素通過outlets與代碼的鏈接難以維護(hù)，容易在改動(dòng)中造成錯(cuò)漏等等。

另外，對(duì)于我這種中途轉(zhuǎn)到前端的工程師來說，對(duì)一切在IDE界面上配置的東西都有種迷之不信任，感覺不如一行行黑底白字的代碼來的靠譜。

當(dāng)然我們不是完全禁用了xib，用代碼碼UI的缺點(diǎn)也很明顯：繁瑣，代碼量大，因此對(duì)一些元素較多，又比較固定的UI組件，我們可以用xib來減少代碼量：

固定的UI組件可以使用xib

針對(duì)UI代碼繁瑣，重復(fù)編碼多的情況，我們可以通過適當(dāng)封裝（UI工廠類），組織結(jié)構(gòu)（MVC，分離UI代碼）等手段，清晰邏輯。

// label 工廠方法
+ (UILabel *)labelWithFont:(UIFont *)font
                     color:(UIColor *)
                      text:(NSString *)text
             attributeText:(NSAttributeString *)attributeText
                 alignment:(NSTextAlignment)alignment;

布局：返璞歸真

從iOS7開始蘋果在Cocoa平臺(tái)引入AutoLayout進(jìn)行UI的基本布局，但是AutoLayout非常反人類，不僅代碼繁瑣而且使用不靈活限制很多。

比如我想要把三個(gè)元素等間距地展示在屏幕上，用AutoLayout寫完基本蛋都碎了，更別說動(dòng)態(tài)地在兩套布局間切換這種高級(jí)需求。

后來蘋果推出sizeClass，試圖解決多套布局的問題，但是仍然沒有觸及到碼農(nóng)的痛點(diǎn)，而且依賴xib使它泛用性不好。

看起來很美好的sizeClass

一段典型的AutoLayout代碼如下所示：

    _topViewTopPositionConstraint = [NSLayoutConstraint
                                     constraintWithItem:_topInfoView
                                     attribute:NSLayoutAttributeTop
                                     relatedBy:NSLayoutRelationEqual
                                     toItem:self.view
                                     attribute:NSLayoutAttributeTop
                                     multiplier:1.0
                                     constant:self.navigationController.navigationBar.frame.size.height + self.navigationController.navigationBar.frame.origin.y];
    
    [self.view addConstraint:topViewLeftPositionConstraint];
    
    （這里省略上述類似結(jié)構(gòu)*4）

上面省略了很多代碼，實(shí)際上一頁都放不下，干了什么呢，只是將一個(gè)元素緊貼屏幕上邊緣放置。項(xiàng)目中我們會(huì)使用三方autoLayout的封裝：PureLayout ，簡(jiǎn)化代碼，也有其它實(shí)用功能。

AutoLayout比較適合：

  • 基本的對(duì)齊（上下左右對(duì)齊，居中對(duì)齊等）
  • 固定的布局，固定的間距，動(dòng)態(tài)性不高的頁面
  • 簡(jiǎn)單且數(shù)量較少的UI元素

不擅長(zhǎng)：

  • 比例布局
  • 動(dòng)態(tài)性較強(qiáng)的頁面局部
  • 不同屏幕大小比例的適配
  • 復(fù)雜的UI

另外有一點(diǎn)，autoLayout對(duì)性能是有損耗的，所以對(duì)性能有要求的場(chǎng)景，比如列表中的cell，我們會(huì)用代碼計(jì)算frame，提高滑動(dòng)幀率。

所以在實(shí)際工程中，我們根據(jù)具體需要來選擇布局方式。

下面是app中首頁新聞Feeds的布局代碼片段：

- (void)layoutSubviews {
    
    [super layoutSubviews];
    
    CGFloat cellWidth = CGRectGetWidth(self.bounds);
    CGFloat currentY = 0.f;
    
    // 0.content
    CGFloat cellHeight = CGRectGetHeight(self.bounds);
    CGFloat contentHeigth = cellHeight - kCellPaddingHeight;
    _mainContentView.frame = CGRectMake(0, 0, cellWidth, contentHeigth);
    
    // 1. topic
    CGFloat topicLabelWidth = [_topicLabel.text boundingRectWithSize:CGSizeMake(CGFLOAT_MAX, CGFLOAT_MAX) options:NSStringDrawingUsesLineFragmentOrigin attributes:@{NSFontAttributeName:_topicLabel.font} context:nil].size.width;
    
    CGFloat topicLabelHeight = [@"測(cè)高度" boundingRectWithSize:CGSizeMake(CGFLOAT_MAX, CGFLOAT_MAX) options:NSStringDrawingUsesLineFragmentOrigin attributes:@{NSFontAttributeName:_topicLabel.font} context:nil].size.height;
    
    CGFloat topicLogoLeftPadding = 3.f;
    CGFloat topicLogoWidth = 10.f;
    CGFloat topicLeftPadding = 13.f;
    
    _topicView.frame = CGRectMake(topicLeftPadding, currentY + kTopicUpPadding, topicLogoWidth + topicLogoLeftPadding + topicLabelWidth, topicLabelHeight);
    _topicLogo.frame = CGRectMake(topicLabelWidth + topicLogoLeftPadding, CGRectGetHeight(_topicView.frame) / 2.0 - topicLogoWidth / 2.0, topicLogoWidth, topicLogoWidth);
    _topicLabel.frame = CGRectMake(0, 0, topicLabelWidth, topicLabelHeight);
    
    (省略大量代碼……)
    
    // 10._sourceLabel
    CGSize sourceSize = [_sourceLabel.text boundingRectWithSize:CGSizeMake(CGFLOAT_MAX, CGFLOAT_MAX) options:NSStringDrawingUsesLineFragmentOrigin attributes:@{NSFontAttributeName:_sourceLabel.font} context:nil].size;
    
    _sourceLabel.frame = CGRectMake(kEdgeHorizontalPadding, currentY + kLeadingUpPading, sourceSize.width, sourceSize.height);
}

可以看到，為了確定每個(gè)元素的位置，我們需要進(jìn)行大量的計(jì)算，代碼可讀性也不好，繁瑣難讀。如果引入動(dòng)態(tài)性，比如不同屏幕字體大小改變，元素大小按比例擴(kuò)大等，則計(jì)算量又要上一個(gè)數(shù)量級(jí)。

動(dòng)態(tài)布局：清晰獨(dú)立

UI界面是動(dòng)態(tài)的，在不同狀態(tài)，不同尺寸或者手機(jī)的橫豎屏情況下，我們往往需要在多套布局方案中切換，或者對(duì)布局進(jìn)行微調(diào)。如果使用xib布局的話，可以使用SizeClass+AutoLayout的方案；如果是代碼實(shí)現(xiàn)的頁面，則沒有官方提供的工具，只能用邏輯去判斷。

一般來說，我們寫復(fù)雜的UI頁面，需要遵循兩個(gè)原則：

  • UI布局代碼，要清晰：這是最重要的，要一眼就知道在調(diào)整那一塊，怎么調(diào)整，如果不能，適當(dāng)拆分，優(yōu)化命名。
  • 布局代碼要和業(yè)務(wù)邏輯獨(dú)立：在一些常用設(shè)計(jì)模式下，我們會(huì)將UI和數(shù)據(jù)模型解耦，在UI內(nèi)部，同樣要將交互，配置這些邏輯和布局解耦，獨(dú)立出類似前端css這樣的純布局文件。

將布局代碼提煉出來，在不同尺寸下調(diào)用不同的實(shí)現(xiàn)：

    if (IS_IPHONE_6){  
        self.layout = [MyLayout iPhone6Layout];
    }else if (IS_IPHONE_6_PLUS){  
        self.layout = [MyLayout iPhone6PlusLayout]; 
    }

    // 實(shí)現(xiàn)小屏幕布局
    + (MyLayout *)iPhone6Layout {...}
    // 實(shí)現(xiàn)大屏幕布局
    + (MyLayout *)iPhone6PlusLayout {...}

字體適配：字體集

在開發(fā)中我們經(jīng)常會(huì)遇到需要?jiǎng)討B(tài)設(shè)置字體的情況：

  • 不同屏幕尺寸，或者橫豎屏，需要展示不同的字體大小。
  • 為用戶提供了文章調(diào)節(jié)字體選項(xiàng)。
  • App的不同語言版本，需要顯示的字體不一樣。
字體大小調(diào)節(jié)

較為簡(jiǎn)單的做法是用宏或者枚舉定義字體參數(shù)，針對(duì)不同尺寸的屏幕，我們拿到不同的值：

#ifdef IPHONE6
#define kChatFontSize 16.f
#else IPHONE6Plus
#define kChatFontSize 18.f
#endif

在對(duì)一些舊代碼做字體適配擴(kuò)展的時(shí)候，直接修改源碼改動(dòng)太多，容易混亂，可以采用runTime方法hack Label等控件的展示，替換原有的setFont方法：

+ (void)load{  
    
    Method newMethod = class_getClassMethod([self class], @selector(mySystemFontOfSize:));  
    Method method = class_getClassMethod([self class], @selector(systemFontOfSize:));  
    method_exchangeImplementations(newMethod, method);  
}  
  
+ (UIFont *)mySystemFontOfSize:(CGFloat)fontSize{  
    UIFont *newFont=nil;  
    if (IS_IPHONE_6){  
        newFont = [UIFont adjustFont:fontSize * IPHONE6_INCREMENT];  
    }else if (IS_IPHONE_6_PLUS){  
        newFont = [UIFont adjustFont:fontSize * IPHONE6PLUS_INCREMENT];  
    }else{  
        newFont = [UIFont adjustFont:fontSize];  
    }  
    return newFont;  
}

以上套路缺點(diǎn)顯而易見：不夠靈活，將邏輯分散，不便于維護(hù)，擴(kuò)展性也不好。

一種比較好的實(shí)踐是引入字體集(Font Collection)的概念，什么是字體集呢，我們?cè)谟肒eynote或者Office的時(shí)候，軟件會(huì)提供一些段落樣式，定義了段落、標(biāo)題、說明等文字的字體，我們可以在不同的段落樣式中切換，來直接改變整個(gè)文章的字體風(fēng)格。

Keynote中的字體集

聽上去和我們的需求是不是很像呢，我們?cè)诖a中也是做類似的事情，將不同場(chǎng)景下的字體定義到一個(gè)Font Collection中：

@protocol XRFontCollectionProtocol <NSObject>

- (UIFont *)bodyFont; // 文章
- (UIFont *)chatFont; // 聊天
- (UIFont *)titleFont; // 標(biāo)題
- (UIFont *)noteFont; // 說明
......
@end

不同的場(chǎng)景，靈活選擇不同的字體集：

+ (id<XRFontCollectionProtocol>)currentFontCollection {
    
#ifdef IS_IPhone6
    return [self collectionForIPhone6];
#elif IS_IPhone6p
    return [self collectionForIPhone6Plus];
#endif
    return nil;
}

// set font
titleLabel.font = [[XRFontManager currentFontCollection] titleFont];

適配新的屏幕或者場(chǎng)景，我們只需要簡(jiǎn)單地增加一套字體集就好了，可以很方便的管理app中的字體樣式，做動(dòng)態(tài)切換也很簡(jiǎn)單。

總結(jié)來說，用代碼在一個(gè)尺寸實(shí)現(xiàn)設(shè)計(jì)稿是比較簡(jiǎn)單的，但是要在各種尺寸下忠實(shí)反應(yīng)設(shè)計(jì)的想法需要合理的代碼設(shè)計(jì)以及一定的代碼量。

UI的還原其實(shí)也是大前端開發(fā)非常重要的部分，作為程序員，往往重視代碼的穩(wěn)定，業(yè)務(wù)的正常使用而忽略軟件界面這個(gè)同樣重要的用戶體驗(yàn)因素。設(shè)身處地地想，如果設(shè)計(jì)看到自己精心調(diào)配的比例、字體、色號(hào)在不同尺寸手機(jī)上顯示得歪七倒八，一定會(huì)氣的要死吧哈哈哈哈哈。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。