建站
咨詢
售后
建站咨詢
新聞中心
怎么讓一套代碼適配所有iOS設備尺寸，相信很多沒有經(jīng)驗的人對此束手無策，為此本文總結了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。
創(chuàng)新互聯(lián)建站客戶idc服務中心，提供服務器托管、成都服務器、成都主機托管、成都雙線服務器等業(yè)務的一站式服務。通過各地的服務中心，我們向成都用戶提供優(yōu)質(zhì)廉價的產(chǎn)品以及開放、透明、穩(wěn)定、高性價比的服務，資深網(wǎng)絡工程師在機房提供7*24小時標準級技術保障。
響應式是基于同一套代碼，開發(fā)一個APP能夠兼容多尺寸、多終端設備的顯示，能夠動態(tài)調(diào)整頁面的布局以及容器的布局，充分利用當前屏幕的尺寸，為用戶提供更好的瀏覽體驗，提升APP開發(fā)效率和迭代效率。
一 iOS布局尺寸預研
當下，iOS端的主要尺寸類型有五種：iPhone、iPad豎屏、iPad橫屏、iPad浮窗、iPad分屏。通常，App是按iPhone尺寸開發(fā)的，需要適配剩余的四種iPad尺寸。
iPad橫、豎屏比較常見，旋轉設備即可，比較特殊的是浮窗和分屏模式。自蘋果iPad iOS 9開始，用戶在打開一個應用時，從最底部上滑打開Dock，即可拖拽另一個App進入浮窗模式：
在支持分屏的iPad上拖拽到更邊緣的地方即可開啟分屏模式：
二 優(yōu)酷iOS響應式方案
響應式布局的核心是設計統(tǒng)一的適配規(guī)則，并在屏幕尺寸發(fā)生變化時按布局規(guī)則重新布局，以適配不同屏幕尺寸，而大多數(shù)App在開發(fā)時一般只有適配iPhone的版本，在通過響應式適配更多機型時主要要解決三個方面的問題，即如何獲取、更新響應式狀態(tài)以進行對應的適配，如何計算在不同屏幕寬度下App內(nèi)容的寬度、列數(shù)等布局參數(shù)，如何進行響應式下的數(shù)據(jù)處理以解決較難適配的組件、減少頁面留白等，基于此我們開發(fā)了響應式布局SDK，負責統(tǒng)一管理響應式狀態(tài)、處理布局邏輯、裁剪映射數(shù)據(jù)等。
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內(nèi)就無法再通過相關代碼控制設備方向，以往通過如下代碼可控制ViewController為豎屏，而支持分屏后如下方法系統(tǒng)不再調(diào)用，默認所有ViewController支持所有屏幕方向：
如下強制設置屏幕方向的黑方法也已失效：
這種設計的主要原因是，當一個App支持分屏后，就不再單獨占用整個屏幕，當另一個App同時運行時，同一塊屏幕不可能出現(xiàn)一個橫屏、另一個豎屏。此類問題沒有完美的解決方案，為了保證用戶體驗，支持分屏的App必須所有頁面適配所有屏幕方向，這也體現(xiàn)了蘋果對用戶體驗的極致追求。
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)回調(diào)中更新當前響應式狀態(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ù)進行適當放大。
對于組件寬度適配，響應式規(guī)則會先計算標準屏幕寬度下的組件列數(shù)并進行列數(shù)適配，再通過適配后的列數(shù)計算適配寬度：
響應式適配寬度(標準屏幕寬度下組件寬度) = (當前屏幕寬度 - 邊距間距)÷響應式適配列數(shù)(標準屏幕寬度÷標準屏幕寬度下組件寬度)
在以上公式中調(diào)整標準屏幕寬度及組件放大scale即可得到適配效果較好的通用布局規(guī)則，經(jīng)過設計同學在各種設備尺寸下的調(diào)整總結，當前優(yōu)酷中使用的標準屏幕寬度為440dp，scale為1.2倍，適配效果最佳。組件適配邏輯已在響應式SDK布局規(guī)則中統(tǒng)一實現(xiàn)，業(yè)務方直接調(diào)用即可，也方便設計同學對整個App的組件適配進行統(tǒng)一調(diào)整。
響應式SDK中YKRLCompLayoutManager類封裝了相關布局邏輯，業(yè)務方也可通過YKRLCompLayoutAdapterProtocol協(xié)議二次處理，以定制響應式布局邏輯，在App統(tǒng)一架構中直接調(diào)用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)一架構內(nèi)添加了組件映射能力，方便各業(yè)務方調(diào)用，響應式SDK中提供了數(shù)據(jù)裁剪映射規(guī)則，業(yè)務方可以查詢、增加相應的裁剪映射規(guī)則。對于未接入統(tǒng)一架構的業(yè)務方則需要業(yè)務方實現(xiàn)相關數(shù)據(jù)處理。
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ù)或?qū)挾鹊?，組件卡片只需要按容器提供的尺寸進行布局即可。
組件卡片內(nèi)一般使用Frame絕對布局，需要修改為相對布局，簡單的布局邏輯可以使用Autoresizing實現(xiàn)，方便快捷，復雜的布局可以使用AutoLayout或Masonry等自動布局框架（性能較差）實現(xiàn)，也可以在layoutSubviews方法中重新計算布局，業(yè)務方可以選擇合適的方式實現(xiàn)自動布局，以減少接入成本。
對于未接入統(tǒng)一架構的頁面則需要在本頁面布局邏輯中手動接入響應式SDK相關布局接口。
落地過程中發(fā)現(xiàn)許多組件卡片布局時依賴了屏幕寬度，不符合響應式開發(fā)規(guī)范，導致適配響應式時工作量較大。每一層View只應依賴父層View布局，各層View實現(xiàn)相對布局后，每當屏幕尺寸改變時各層View會自動適配，同時容器的組件列數(shù)和尺寸會按響應式規(guī)則進行適配，一套代碼即可適配所有屏幕尺寸，實現(xiàn)響應式布局。
三 優(yōu)酷響應式成果
目前優(yōu)酷全端已具備響應式布局的能力，八月份已上線universal版本，一套代碼支持iPhone、iPad豎屏、iPad橫屏、浮窗、各種比例分屏，為用戶提供了更好更豐富的用戶體驗。
看完上述內(nèi)容，你們掌握怎么讓一套代碼適配所有iOS設備尺寸的方法了嗎？如果還想學到更多技能或想了解更多相關內(nèi)容，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！
文章題目：怎么讓一套代碼適配所有iOS設備尺寸
本文來源：http://www.dlmjj.cn/article/gheeec.html
