苹果手机的机型越来越多,屏幕标准越来越大。许多时分苦于需求精准的适配各个屏幕标准的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稿的机型宽度),拉线比较。
怎样运用?
集成
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)
}