iOS Swift iPhone、iPad屏幕完整适配

导言

移动开发中屏幕适配是很重要的。就个人而言，最从android开发的时候用过最原始的屏幕适配方案，以1920*1080为基准屏幕（设计图比例），然后生成以1px开始不同的分辨率

图片来自简书.png

图片来自简书2.png

这样的做法能简单的适配屏幕，不过手机分辨率过多，就要增加一种像素比例，无形中增加了app的体积，也麻烦。

然后就是用过今日头条的AndroidAutoSize无入侵轻量级的屏幕适配框架，这种方案是不错的，我android同事也在用，重点是无入侵性轻量级。

然后回到iOS屏幕适配，masonry和SnapKit都是基于自动布局，大的方面还是能适配屏幕的，小的地方还是需要自己手动改才行。

最近在学习Flutter课程（MJ老师系列

有讲到小程序的适配基于rpx，然后我觉得挺好的现在就移植到iOS（我一直认为前端思想都是大同小异的

实现

先上代码

class QSizeFit : NSObject {
    
    static let shared : QSizeFit = {
        let shared = QSizeFit()
        return shared
    }()
    
    let rpx : Double
    
    override init() {
        rpx = Double(1.0 * UIScreen.main.bounds.size.width / 375)
    }
    
    
    func getIRpx(value : Int) -> Int{
        return Int(rpx) * value
    }
    
    func getFRpx(value : Float) -> Float{
        return Float(rpx) * value
    }
    
    func getDRpx(value : Double) -> Double{
        return rpx * value
    }
    
}


 
extension Int {    
    
    var rpx : Int {
        return QSizeFit.shared.getIRpx(value: self)
    }
}

extension Float {
    
    var rpx : Float {
        return QSizeFit.shared.getFRpx(value: self)
    }
    
}

extension Double {
    
    var rpx : Double {
        return QSizeFit.shared.getDRpx(value: self)
    }
}

extension CGFloat {
    
    var rpx : CGFloat {
        return CGFloat(QSizeFit.shared.getFRpx(value: Float(self)))
    }
    
}

375 是设计图比例也是基准
使用中注意Double\ Float 转Int 当rpx小于1 有时候会结果等于0了

效果图

Simulator Screen Shot - iPad Pro (11-inch) (1st generation) - 2020-07-06 at 10.25.00.png

Simulator Screen Shot - iPad Pro (12.9-inch) (4th generation) - 2020-07-06 at 10.24.14.png

Simulator Screen Shot - iPhone 6s - 2020-07-06 at 10.22.03.png

Simulator Screen Shot - iPhone Xs Max - 2020-07-06 at 10.23.31.png

其他

如果有什么其他更好的方案也可以留言交流。

后续

2020.08.11

在项目中使用发现还是有些问题，比如在iPad上比例于iPhone相差较大。会造成中间部分View重叠。以下是优化后的效果

Simulator Screen Shot - iPad Pro (12.9-inch) (4th generation) - 2020-08-11 at 09.44.18.png

Simulator Screen Shot - iPad Pro (12.9-inch) (4th generation) - 2020-08-11 at 09.44.33.png

Simulator Screen Shot - iPad Pro (12.9-inch) (4th generation) - 2020-08-11 at 09.59.01.png

其中图一二是同一版本，是将UIViewController中的View添加到UIScrollView中，以此达到完整的展示。不过对于用户体验性不是很好。在此期间使用iPad过程中发现百度App首页中左右是空白的（当然他主题色也是白色，看起来没异样），内容居中的效果。

后面想了下，设计图上有些是最顶级rootView是UIView（不是UIScrollView）就分开适配

/// 所有UIViewController的View的父类，效果图1、2就是继承UIScrollView，如果是图3就应该继承UIView
class QMainView: UIScrollView {

    lazy var viewMain : UIView = {
        let view = UIView()
       
        return view
    }()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
      
        self.addSubview(viewMain)
        
        if UIDevice.current.userInterfaceIdiom == .pad {
            let w = 375 * QScreenHeight / 667
            viewMain.frame = CGRect(x: (QScreenWidth - w) * 0.5, y: 0, width: w, height: QScreenHeight)
        }else {
            viewMain.frame = CGRect(x: 0, y: 0, width: QScreenWidth, height: QScreenHeight)
        }
        
        //contentSize = viewMain.frame.size
        
        self.bounces = false
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    override func addSubview(_ view: UIView) {
        if  view != viewMain {
            viewMain.addSubview(view)
        }else {
            super.addSubview(view)
        }
    }
    
}

基类QViewController中把UIView替换掉

lazy var vianMainQ : QMainView = {
        let view = QMainView(frame: UIScreen.main.bounds)
        return view
}()
    
override func loadView() {
        if isFullScreen() {
            view = vianMainQ
        }else {
            view = UIView()
        }
}

当然rpx也要增加一种
如果是满屏就是rootView不能滚动的就应该使用rpx2

let rpx : Double
    
let rpx2 : Double
    
override init() {
        
        rpx = Double(1.0 * UIScreen.main.bounds.size.width / 375)
        
        if UIDevice.current.userInterfaceIdiom == .pad {
            rpx2 = Double(QScreenHeight / 667)
        }else {
            rpx2 = rpx
        }
        
 }