建站
咨詢
售后
建站咨詢
新聞中心
????隨著移動互聯(lián)網(wǎng)設備和技術的發(fā)展，各種移動設備屏幕尺寸層出不窮，折疊屏、分屏、懸浮窗等等，面對越來越多樣的屏幕，如果為每種尺寸單獨進行適配，不僅費時費力，還會增加端側代碼的開發(fā)與維護壓力。如何讓一套代碼適配所有尺寸變化，增強App的通用能力?阿里巴巴文娛技術 氚雨 將分享優(yōu)酷APP在iOS響應式布局技術上的實踐和落地。
從策劃到設計制作，每一步都追求做到細膩，制作可持續(xù)發(fā)展的企業(yè)網(wǎng)站。為客戶提供網(wǎng)站制作、做網(wǎng)站、網(wǎng)站策劃、網(wǎng)頁設計、申請域名、網(wǎng)站空間、網(wǎng)絡營銷、VI設計、 網(wǎng)站改版、漏洞修補等服務。為客戶提供更好的一站式互聯(lián)網(wǎng)解決方案,以客戶的口碑塑造優(yōu)易品牌,攜手廣大客戶,共同發(fā)展進步。
響應式是基于同一套代碼，開發(fā)一個APP能夠兼容多尺寸、多終端設備的顯示，能夠動態(tài)調整頁面的布局以及容器的布局，充分利用當前屏幕的尺寸，為用戶提供更好的瀏覽體驗，提升APP開發(fā)效率和迭代效率。
一 、iOS布局尺寸預研
當下，iOS端的主要尺寸類型有五種：iPhone、iPad豎屏、iPad橫屏、iPad浮窗、iPad分屏。通常，App是按iPhone尺寸開發(fā)的，需要適配剩余的四種iPad尺寸。
iPad橫、豎屏比較常見，旋轉設備即可，比較特殊的是浮窗和分屏模式。自蘋果iPad iOS 9開始，用戶在打開一個應用時，從最底部上滑打開Dock，即可拖拽另一個App進入浮窗模式：
??
??
在支持分屏的iPad上拖拽到更邊緣的地方即可開啟分屏模式：
??
??
其中浮窗模式所有升級iOS 9的設備都支持，分屏模式只有最新版的硬件設備iPad mini 4、iPad Air 2及iPad Pro支持： 設備浮窗分屏
|
設備 |
浮窗 |
分屏 |
|
iPad mini 2 |
||
|
iPad mini 3 |
||
|
iPad mini 4 |
||
|
iPad Air |
||
|
iPad Air 2 |
||
|
iPad Pro |
二、優(yōu)酷iOS響應式方案
響應式布局的核心是設計統(tǒng)一的適配規(guī)則，并在屏幕尺寸發(fā)生變化時按布局規(guī)則重新布局，以適配不同屏幕尺寸，而大多數(shù)App在開發(fā)時一般只有適配iPhone的版本，在通過響應式適配更多機型時主要要解決三個方面的問題，即如何獲取、更新響應式狀態(tài)以進行對應的適配，如何計算在不同屏幕寬度下App內容的寬度、列數(shù)等布局參數(shù)，如何進行響應式下的數(shù)據(jù)處理以解決較難適配的組件、減少頁面留白等，基于此我們開發(fā)了響應式布局SDK，負責統(tǒng)一管理響應式狀態(tài)、處理布局邏輯、裁剪映射數(shù)據(jù)等。
??
??
響應式SDK在App中的位置
1、響應式App配置
App除了配置為universal版之外，要支持浮窗或分屏模式還需要進行一些配置：
(1)需要提供LaunchScreen.storyboard作為啟動圖，由于App支持的運行尺寸太多，不再適合用圖片作為啟動圖。
(2)需要在info.plist中配置支持所有屏幕方向：
??
??
(3)注意不能勾選Requires full screen配置項或配置UIRequiresFullScreen為YES，如此會聲明App要求全屏運行，自然表示不支持浮窗或分屏：
??
??
(4)支持分屏要求App的主Window需要使用系統(tǒng)UIWindow，不能繼承，并且要通過init方法或initWithFrame:[UIScreen mainScreen].bounds方式初始化。
通過以上步驟開啟浮窗、分屏能力后，在App內就無法再通過相關代碼控制設備方向，以往通過如下代碼可控制ViewController為豎屏，而支持分屏后如下方法系統(tǒng)不再調用，默認所有ViewController支持所有屏幕方向：
??
??
如下強制設置屏幕方向的黑方法也已失效：
??
??
這種設計的主要原因是，當一個App支持分屏后，就不再單獨占用整個屏幕，當另一個App同時運行時，同一塊屏幕不可能出現(xiàn)一個橫屏、另一個豎屏。此類問題沒有完美的解決方案，為了保證用戶體驗，支持分屏的App必須所有頁面適配所有屏幕方向，這也體現(xiàn)了蘋果對用戶體驗的極致追求，參見DeveloperForums中開發(fā)人員的討論：https://developer.apple.com/forums/thread/19578
2、響應式SDK
響應式狀態(tài)管理
響應式狀態(tài)提供了當前是否開啟響應式、響應式布局尺寸類型、當前布局window尺寸等相關狀態(tài)量，響應式SDK會在屏幕尺寸變化后更新響應式狀態(tài)，并通過系統(tǒng)通知和自定義通知機制，通知相關業(yè)務方。
// 響應式開啟關閉狀態(tài)
typedefNS_ENUM(NSInteger, YKRLLayoutStyle) {
YKRLLayoutStyleNormal =0, // 響應式狀態(tài)關閉
YKRLLayoutStyleResponsive =1, // 響應式狀態(tài)開啟};
// 響應式屏幕尺寸類型，頁面可依據(jù)此類型區(qū)分是否分屏等
typedefNS_ENUM(NSInteger, YKRLLayoutSizeType) {
YKRLLayoutSizeTypeS =0, // eg. phone pad浮窗
YKRLLayoutSizeTypeL =1, // pad
YKRLLayoutSizeTypeXL =2, // 預留
};
// 響應式屏幕狀態(tài)類型（一共有十種類型）
typedefNS_OPTIONS(NSUInteger, YKRLLayoutScreenType) {
YKRLLayoutScreenTypeUnknown = (1<<0), //未知
YKRLLayoutScreenTypePortrait = (1<<1), //豎屏全屏
YKRLLayoutScreenTypeLandscapeLeft = (1<<2), //橫屏全屏左
… …
};
響應式SDK聲明了YKRLLayoutStyle、YKRLLayoutSizeType、YKRLLayoutScreenType三種枚舉狀態(tài)標記當前的響應式狀態(tài)，分別表示響應式開啟關閉狀態(tài)，當前尺寸類型及具體屏幕類型，一般業(yè)務方只需要獲取是否是響應式設備狀態(tài)，對于在不同寬度下頁面布局不一致的業(yè)務方可以通過尺寸類型狀態(tài)進行區(qū)分適配，而對于需要具體知道當前屏幕狀態(tài)的業(yè)務方可以通過屏幕類型獲取，屏幕類型只包含當前iOS設備已支持的屏幕狀態(tài)，隨著設備類型的豐富，如出現(xiàn)折疊屏等，屏幕類型會作相應擴展。每當設備旋轉或用戶開啟分屏時，響應式SDK都會在系統(tǒng)回調中更新當前響應式狀態(tài)，并通知業(yè)務方響應式狀態(tài)的改變。
響應式布局規(guī)則
優(yōu)酷響應式布局規(guī)則主要包含列數(shù)適配規(guī)則、寬度適配規(guī)則等，比如多列均分組件的列數(shù)在不同屏幕寬度下是可變的，響應式SDK會根據(jù)當前的響應式狀態(tài)輸出合適的布局列數(shù)等，對于每一個布局規(guī)則，響應式SDK中都有相應的布局適配邏輯，響應式布局規(guī)則滿足優(yōu)酷App整體UI規(guī)范，業(yè)務方直接指定自己所需要的規(guī)則即可，除少數(shù)特殊規(guī)則之外，大部分布局規(guī)則都用于組件列數(shù)和組件寬度布局，此類響應式布局規(guī)則中會指定一個標準寬度，并根據(jù)組件原始布局列數(shù)和標準寬度計算出組件標準寬度，進而根據(jù)當前屏幕寬度計算出適配后的組件列數(shù)，可用如下公式表達：
響應式適配列數(shù)(標準屏幕寬度下組件列數(shù)) = (當前屏幕寬度÷(標準屏幕寬度÷標準屏幕寬度下組件列數(shù)×scale))
其中，scale為組件放大參數(shù)，標準屏幕寬度下組件原寬度投放到iPad上會過小，可以通過scale參數(shù)進行適當放大。
??
??
首頁Feed流隨屏幕寬度改變而變化列數(shù)
首頁Feed流隨屏幕寬度改變而變化列數(shù) 對于組件寬度適配，響應式規(guī)則會先計算標準屏幕寬度下的組件列數(shù)并進行列數(shù)適配，再通過適配后的列數(shù)計算適配寬度：
響應式適配寬度(標準屏幕寬度下組件寬度) = (當前屏幕寬度 - 邊距間距)÷響應式適配列數(shù)(標準屏幕寬度÷標準屏幕寬度下組件寬度)
??
??
橫滑組件在不同屏幕寬度下的組件寬度變化
在以上公式中調整標準屏幕寬度及組件放大scale即可得到適配效果較好的通用布局規(guī)則，經(jīng)過設計同學在各種設備尺寸下的調整總結，當前優(yōu)酷中使用的標準屏幕寬度為440dp，scale為1.2倍，適配效果最佳。組件適配邏輯已在響應式SDK布局規(guī)則中統(tǒng)一實現(xiàn)，業(yè)務方直接調用即可，也方便設計同學對整個App的組件適配進行統(tǒng)一調整。
響應式SDK中YKRLCompLayoutManager類封裝了相關布局邏輯，業(yè)務方也可通過YKRLCompLayoutAdapterProtocol協(xié)議二次處理，以定制響應式布局邏輯，在App統(tǒng)一架構中直接調用YKRLCompLayoutManager的相關接口即可獲取按照響應式規(guī)則計算后的布局參數(shù)，如列數(shù)、寬度等，當監(jiān)聽響應式狀態(tài)發(fā)生變化時重新布局即可完成響應式布局。
??
??
響應式數(shù)據(jù)處理
響應式數(shù)據(jù)處理包括數(shù)據(jù)映射、數(shù)據(jù)過濾、數(shù)據(jù)合并、數(shù)據(jù)補齊，數(shù)據(jù)處理邏輯兩端一致，詳細介紹可以參見：一個APP如何適配多個Android終端?，下面簡單介紹一下iOS響應式數(shù)據(jù)映射的實現(xiàn)。
有些組件無法通過規(guī)則適配不同的屏幕尺寸，比如在手機上占整個屏幕寬度的組件(下圖左側帶視頻播放預約組件)，如果采用等比放大的適配規(guī)則，在iPad端會顯得過大，此類組件可以映射成相對簡單的組件，以適配不同的屏幕尺寸。
??
??
帶視頻播放的預約組件難以較好的適配，映射為不帶播放的預約組件適配
優(yōu)酷采用了統(tǒng)一抽象的數(shù)據(jù)結構，在組件映射方面比較容易實現(xiàn)，只需修改對應的組件標志即可。得益于統(tǒng)一架構的普遍推廣和使用，我們在統(tǒng)一架構內添加了組件映射能力，方便各業(yè)務方調用，響應式SDK中提供了數(shù)據(jù)裁剪映射規(guī)則，業(yè)務方可以查詢、增加相應的裁剪映射規(guī)則。對于未接入統(tǒng)一架構的業(yè)務方則需要業(yè)務方實現(xiàn)相關數(shù)據(jù)處理。 3 響應式業(yè)務流程
3、響應式業(yè)務流程
優(yōu)酷響應式業(yè)務流程兩端一致，響應式布局需要進行數(shù)據(jù)處理、響應式狀態(tài)管理、觸發(fā)布局等工作，優(yōu)酷響應式SDK會在接口返回后處理相關數(shù)據(jù)，為統(tǒng)一架構提供相應布局接口，監(jiān)控屏幕尺寸變化并觸發(fā)布局等。
??
??
4、優(yōu)酷響應式方案落地
iOS開發(fā)中經(jīng)常采用絕對布局，而實現(xiàn)響應式的主要工作是將“絕對布局”修改為“相對布局”，接入工作較安卓更為繁瑣。
??
??
iOS響應式可以按Window->ViewController->容器->組件的層級完成接入。
Window在配置支持分屏后會由系統(tǒng)自動布局，在RootViewController樹中的子ViewController也會隨Window自動布局，而特殊ViewController，如多tab頁面的子ViewController等，未加入RootViewController樹，需要手動修改為相對布局，頁面可通過Autoresizing或監(jiān)聽響應式狀態(tài)實現(xiàn)相對布局。
??
??
接入統(tǒng)一架構的頁面容器由統(tǒng)一架構提供，統(tǒng)一架構容器的布局列數(shù)管理、布局寬度管理等都已接入響應式SDK，為業(yè)務方接入減少了大量工作，業(yè)務方只需指定自身所采用的布局規(guī)則即可，ViewController和容器實現(xiàn)相對布局后，每當屏幕尺寸變化時響應式SDK會通知容器重新布局，變換組件列數(shù)或寬度等，組件卡片只需要按容器提供的尺寸進行布局即可。
組件卡片內一般使用Frame絕對布局，需要修改為相對布局，簡單的布局邏輯可以使用Autoresizing實現(xiàn)，方便快捷，復雜的布局可以使用AutoLayout或Masonry等自動布局框架(性能較差)實現(xiàn)，也可以在layoutSubviews方法中重新計算布局，業(yè)務方可以選擇合適的方式實現(xiàn)自動布局，以減少接入成本。
對于未接入統(tǒng)一架構的頁面則需要在本頁面布局邏輯中手動接入響應式SDK相關布局接口。
??
??
優(yōu)酷響應式大圖
三、優(yōu)酷響應式成果
落地過程中發(fā)現(xiàn)許多組件卡片布局時依賴了屏幕寬度，不符合響應式開發(fā)規(guī)范，導致適配響應式時工作量較大。每一層View只應依賴父層View布局，各層View實現(xiàn)相對布局后，每當屏幕尺寸改變時各層View會自動適配，同時容器的組件列數(shù)和尺寸會按響應式規(guī)則進行適配，一套代碼即可適配所有屏幕尺寸，實現(xiàn)響應式布局。 三 優(yōu)酷響應式成果
目前優(yōu)酷全端已具備響應式布局的能力，八月份已上線universal版本，一套代碼支持iPhone、iPad豎屏、iPad橫屏、浮窗、各種比例分屏，為用戶提供了更好更豐富的用戶體驗。
??
??
優(yōu)酷Universal版首頁豎屏、橫屏、分屏效果
??
??
優(yōu)酷Universal版播放頁豎屏、橫屏、分屏效果
四、總結
響應式能力是多端投放能力的第一步，優(yōu)酷實現(xiàn)響應式布局后對開發(fā)、設計和產(chǎn)品都提出了更高的要求，同時鑒于iPad低端設備占比較高，業(yè)務開發(fā)過程中不僅要考慮通投能力，更要求App始終保持更高的性能和穩(wěn)定性，這是我們持續(xù)在努力的。
蘋果2020年底將推出基于ARM架構的MacBook，也有媒體曝光，蘋果正在申請折疊屏相關的專利，相信未來蘋果設備的尺寸會越來越豐富，App適配提效是繞不開的話題，而優(yōu)酷響應式的開發(fā)極大擴展了iPhone版App的適用場景，是解決多種設備支持的更好途徑，為適應未來更復雜的設備場景打下堅實基礎。
【本文為專欄作者“阿里巴巴官方技術”原創(chuàng)稿件，轉載請聯(lián)系原作者】
??戳這里，看該作者更多好文??
分享名稱：如何讓一套代碼適配所有iOS設備尺寸？
文章路徑：http://www.dlmjj.cn/article/cccecco.html
