iOS 等比例UI适配方案

苹果手机的机型越来越多，屏幕标准越来越大。许多时分苦于需求精准的适配各个屏幕标准的UI，通常依据某一种倍数计算的成果并不能满足精准的需求, 跟着iPhone设备不同标准的添加 这种需求更加火燎。

主流的适配方案是针对不同标准屏幕进行等比例适配 ，按照基准屏幕宽度计算出一个比例值，再按照这个比例值计算出其他宽度的值。

本篇文章的中心是怎样更典雅的，便利的，少侵入性的完结适配。

处理思路

咱们将对以下值进行等比例适配

• Int

• CGFloat

• Double

• Float

• CGSize

• CGRect

• UIFont （只改变pointSize）

咱们希望的调用方式是这样的：

1.adapter
(1.0).adapter
CGSize(width: 1, height: 1).adapter
CGRect(x: 0, y: 0, width: 1, height: 1).adapter
UIFont.systemFontSize.adapter

并要求适配之后的数据类型跟适配前保持一致。

完结效果

同一机型适配前后的差异

不同机型适配之后

完结方案

适配类

能够通过 Adapter.share.base = 375 改变基准屏幕宽度。

public struct Adapter {
  public static var share = Adapter()
  /// 参看标准（UI是以哪个屏幕设计UI的）
  public var base: Double = 375
  /// 记录适配比例
  fileprivate var adapterScale: Double?
}

适配协议

供应适配协议，供应对外出口。

public protocol Adapterable {
  associatedtype AdapterType
  var adapter: AdapterType { get }
}

添加扩展，计算是适配比例。

extension Adapterable {
  func adapterScale() -> Double {   
    if let scale = Adapter.share.adapterScale {
      return scale
    } else {
      let width = UIScreen.main.bounds.size.width
      /// 参看标准
      let referenceWidth: Double = Adapter.share.base
      let scale = width / referenceWidth
      Adapter.share.adapterScale = scale
      return scale
    }
  }
}

进行适配

extension Int: Adapterable {
  public typealias AdapterType = Int
  public var adapter: Int {
    let scale = adapterScale()
    let value = Double(self) * scale
    return Int(value)
  }
}
extension CGFloat: Adapterable {
  public typealias AdapterType = CGFloat
  public var adapter: CGFloat {
    let scale = adapterScale()
    let value = self * scale
    return value
  }
}
extension Double: Adapterable {
  public typealias AdapterType = Double
  public var adapter: Double {
    let scale = adapterScale()
    let value = self * scale
    return value
  }
}
extension Float: Adapterable {
  public typealias AdapterType = Float
  public var adapter: Float {
    let scale = adapterScale()
    let value = self * Float(scale)
    return value
  }
}
extension CGSize: Adapterable {
  public typealias AdapterType = CGSize
  public var adapter: CGSize {
    let scale = adapterScale()
    let width = self.width * scale
    let height = self.height * scale
    return CGSize(width: width, height: height)
  }
}
extension CGRect: Adapterable {
  public typealias AdapterType = CGRect
  public var adapter: CGRect {
    /// 不参加屏幕rect
    if self == UIScreen.main.bounds {
      return self
    }
    let scale = adapterScale()
    let x = origin.x * scale
    let y = origin.y * scale
    let width = size.width * scale
    let height = size.height * scale
    return CGRect(x: x, y: y, width: width, height: height)
  }
}
extension UIFont: Adapterable {
  public typealias AdapterType = UIFont
  public var adapter: UIFont {
    let scale = adapterScale()
    let pointSzie = self.pointSize * scale
    let fontDescriptor = self.fontDescriptor
    return UIFont(descriptor: fontDescriptor, size: pointSzie)
  }
}

留意项

适配的原理是依据屏幕宽度进行缩放。因此假如你的UI是依据屏幕宽度的（屏幕宽度等分之后横向充满屏幕），会导致总值超出屏幕。

相同的道理，假如只适配子视图，不适配父视图，也有或许呈现相同的问题。

• 阻止适配屏幕。

• 阻止适配依据屏幕宽度和高度计算出来的值。

• 阻止只适配子视图，不适配父视图（父视图不是滑动视图的状况）。

    let aView = UIView()
    aView.backgroundColor = UIColor.blue
    view.addSubview(aView)
    let bView = UIView()
    bView.backgroundColor = UIColor.yellow
    view.addSubview(bView)
    let cView = UIView()
    cView.backgroundColor = UIColor.orange
    view.addSubview(cView)
    var width = (UIScreen.main.bounds.size.width - 20) / 3
    aView.snp.makeConstraints { make in
      make.left.equalTo(10)
      make.height.equalTo(100)
      make.top.equalTo(300)
      make.width.equalTo(width)
    }
    bView.snp.makeConstraints { make in
      make.height.top.width.equalTo(aView)
      make.left.equalTo(aView.snp.right)
    }
    cView.snp.makeConstraints { make in
      make.height.top.width.equalTo(aView)
      make.left.equalTo(bView.snp.right)
    }

查看

适配完怎样验证适配效果？

对适配之后的不同屏幕截屏，缩放到375宽度（UI稿的机型宽度），拉线比较。

怎样运用？

github地址

集成

pod 'AdapterSwift'

运用

import AdapterSwift
imageView.snp.makeConstraints { make in
  make.left.equalTo(10.adapter)
  make.top.equalTo(100.adapter)
  make.size.equalTo(CGSize(width: 100, height: 100).adapter)
}