App适配iPhoneX实战经验总结

IOS

2023-10-03 09:42:42

前言

随着iPhoneX的发布，开发者们开始面临着App适配iPhoneX的挑战。iPhoneX拥有超视网膜屏和刘海设计，这使得App的适配变得更加复杂。

网上有很多关于iPhoneX适配的帖子，但大多数都是官方教程的中文版。这篇文章主要记录触手TV APP在适配中遇到的问题。

iPhone X机型适配思路

常规尺寸适配

这一步主要针对的app，在适配iPhone X之前，已经在iPhone6及以上机型适配成功，现在需要对iPhone X机型做适配，那么只需要在当前的适配基础上，继续增加iPhone X的适配即可。

我们可以通过设定项目中TARGETS的deployment Target为iOS 11.0及以上，从而自动支持对iPhone X、iPhone XR、iPhone XS以及iPhone XS Max的适配。

全面屏适配

这一步主要针对的是全面屏App，所谓全面屏，就是刘海区域和安全区域高度不相等，从而导致UI内容需要处理刘海区域和安全区域的间隙。这种适配相对比较复杂，步骤也比较多，具体如下：

1.适配安全区域

安全区域是指屏幕中不包含刘海区域和底部安全区域的部分，它也是App内容应该显示的区域。

如果App在iPhoneX上出现黑边，那一定是因为App没有适配安全区域。适配安全区域可以通过两种方式实现：

使用Auto Layout
使用SafeArea API

2.适配刘海区域

刘海区域是指屏幕顶部包含摄像头和Face ID模块的区域。在设计App时，需要避免将重要的UI元素放置在刘海区域，否则这些元素可能会被遮挡。

适配刘海区域的两种主要方法是：

使用SafeArea API
使用UIEdgeInsets API

3.支持竖屏和横屏

iPhoneX支持竖屏和横屏两种模式。在适配App时，需要确保App在两种模式下都能正常显示。

适配竖屏和横屏的两种主要方法是：

使用Auto Layout
使用Interface Builder

4.处理状态栏

iPhoneX的状态栏位于刘海区域的右侧。在适配App时，需要确保状态栏的内容在刘海区域中可见。

处理状态栏的两种主要方法是：

使用StatusBar API
使用UIEdgeInsets API

5.处理键盘

iPhoneX的键盘位于屏幕底部。在适配App时，需要确保键盘在安全区域中可见。

处理键盘的两种主要方法是：

使用Keyboard API
使用UIEdgeInsets API

6. 处理多任务

iPhoneX的多任务手势与其他iPhone机型不同。在适配App时，需要确保App在多任务手势下也能正常工作。

处理多任务手势的两种主要方法是：

使用Multitasking API
使用GestureRecognizer API

触手iPhone X 适配遇到的问题和解决方案

1.iPhone X启动图适配

iPhone X启动图的尺寸为1125x2436，比其他iPhone机型的启动图尺寸要大。因此，需要单独为iPhone X制作启动图。

可以使用以下命令生成iPhone X的启动图：

$ xcrun --sdk iphoneos PackageApplication  --embed "- -path  Images.xcassets/LaunchImage.imageset/"  --sign --provisioning-profile  "MYPROFILE.mobileprovision"   --output  App_name.ipa

2.iPhone X状态栏适配

iPhone X的状态栏位于刘海区域的右侧。在适配App时，需要确保状态栏的内容在刘海区域中可见。

可以使用以下代码适配状态栏：

if #available(iOS 11.0, *) {
    let window = UIWindow(frame: UIScreen.main.bounds)
    window.rootViewController = ViewController()
    window.makeKeyAndVisible()
} else {
    // Fallback on earlier versions
}

3.iPhone X多任务手势适配

iPhone X的多任务手势与其他iPhone机型不同。在适配App时，需要确保App在多任务手势下也能正常工作。

可以使用以下代码适配多任务手势：

func application(_ application: UIApplication, supportedInterfaceOrientationsFor window: UIWindow?) -> UIInterfaceOrientationMask {
    return .all
}

4.iPhone X键盘适配

iPhone X的键盘位于屏幕底部。在适配App时，需要确保键盘在安全区域中可见。

可以使用以下代码适配键盘：

func keyboardWillShow(_ notification: Notification) {
    guard let keyboardFrame = (notification.userInfo?[UIKeyboardFrameEndUserInfoKey] as? NSValue)?.cgRectValue else { return }
    let keyboardHeight = keyboardFrame.height
    
    // Adjust the safe area insets to account for the keyboard
    var insets = window.safeAreaInsets
    insets.bottom = keyboardHeight
    window.safeAreaInsets = insets
}

func keyboardWillHide(_ notification: Notification) {
    // Reset the safe area insets when the keyboard is hidden
    window.safeAreaInsets = .zero
}

5.iPhone X刘海区域适配

iPhone X的刘海区域是指屏幕顶部包含摄像头和Face ID模块的区域。在设计App时，需要避免将重要的UI元素放置在刘海区域，否则这些元素可能会被遮挡。

可以使用以下代码适配刘海区域：

if #available(iOS 11.0, *) {
    let window = UIWindow(frame: UIScreen.main.bounds)
    window.safeAreaInsets = UIEdgeInsets(top: 44, left: 0, bottom: 0, right: 0)
    window.rootViewController = ViewController()
    window.makeKeyAndVisible()
} else {
    // Fallback on earlier versions
}