iPhoneX 序列適配方案
和往常一樣,蘋果釋出新產品,我們作為開發者都需要對系統和UI佈局進行適配,今年也是一樣。從去年釋出的 iphoneX開始,iPhone 手機加入了劉海設計,而且針對於iphone的劉海,需要特殊的適配。今年新出的3款iphone都帶有劉海,自然也不例外。
在iphonex以前iphone的頂部導航欄高度都是統一的64,底部導航欄是統一的49;從iphonex的劉海屏開始,出了一個SafeArea的概念,帶劉海設計的iphone,頂部導航的高度由原來的64,變成了88,因為狀態列的高度由原來的20變成了44;底部導航欄的高度由原來的49,變成了83。
所以對於iphonex序列的手機的適配,都需要針對頂部導航
if{}else{}
進行判斷,要麼就是尋找新的方法,還好iphonex序列的機型的寬高比是有規律的。
從網上看到了別人的帖子列出了iphonex序列機型的寬高&比例:
//iphoneX 序列機型的螢幕高寬
//XSM SCREEN_HEIGHTL = 896.000000,SCREEN_WIDTHL = 414.000000 2.1642512077
//XS SCREEN_HEIGHTL = 812.000000,SCREEN_WIDTHL = 375.000000 2.1653333333
//XR SCREEN_HEIGHTL = 896.000000,SCREEN_WIDTHL = 414.000000 2.1642512077
//X SCREEN_HEIGHTL = 812.000000,SCREEN_WIDTHL = 375.000000 2.1653333333
iphonex序列iOS原生的適配
#define SCREEN_HEIGHTL [UIScreen mainScreen].bounds.size.height
#define SCREEN_WIDTHL [UIScreen mainScreen].bounds.size.width
#define KIsiPhoneX ((int)((SCREEN_HEIGHTL/SCREEN_WIDTHL)*100) == 216)?YES:NO
//判斷是否為 iPhoneXS Max,iPhoneXS,iPhoneXR,iPhoneX
react-native針對於iphonex序列機型的適配
const {width, height} = Dimensions.get('window'); //iphoneX 序列機型的螢幕高寬 //XSM SCREEN_HEIGHTL = 896.000000,SCREEN_WIDTHL = 414.000000 2.1642512077 //XS SCREEN_HEIGHTL = 812.000000,SCREEN_WIDTHL = 375.000000 2.1653333333 //XR SCREEN_HEIGHTL = 896.000000,SCREEN_WIDTHL = 414.000000 2.1642512077 //X SCREEN_HEIGHTL = 812.000000,SCREEN_WIDTHL = 375.000000 2.1653333333 //目前iPhone X序列手機的適配演算法:高寬比先轉換為字串,擷取前三位,轉換為number型別 再乘以100 export const isIphoneX = (Platform.OS === 'ios' && (Number(((height/width)+"").substr(0,4)) * 100) === 216);
總結
無論是iOS原生還是react-native,只要判斷出是iphonex序列機型,針對頂部導航欄和底部導航欄做特殊的處理即可。保證頂部導航和底部導航的UI正確顯示,能夠正確響應事件。(如果適配不好,會出現UI顯示不正確和事件不能夠響應的情況。)