Xcode|Xcode AutoLayout布局(三) 自动适配机型准备配置
【Xcode|Xcode AutoLayout布局(三) 自动适配机型准备配置】适配原则
由于不同机型宽高比不同,我们以不同机型屏幕宽度为基准进行等比例缩放,经过数据分析,决定以iPhone 6/6s/7/8 系列机型的宽高比作为基准进行适配。根据下表可以看出,当以该比例进行适配时,当前宽高比较低的机型溢出的高度完全可以接受,当然为了更好的适配,我们也可以对垂直间距按照一定比例进行变更。
文章图片
实现方法
为了能够在sb上直接进行设置,我们借助@IBInspectable方法,让自定义属性出现在IB的Attributes inspector中
/// 设置基准宽度
private let default_Width:CGFloat = 375
/// 换算对应机型尺寸(以default_Width为基准)
private func calculateScale(_ length: CGFloat) -> CGFloat {
return length * (UIScreen.main.bounds.width/default_Width)
}/// 由于无法在IB内添加自定义参数,故使用CGSize来替代自定义多元参数/// 视图扩展
extension UIView {
/// 基准倒角
/// - width-最小值(无最小值填0) height-基准值 返回值-(width:0, height:真实倒角)@IBInspectable,需要在user Defined Runtime Attributes进行设置
@IBInspectable var fitCornerRadius:CGSize {
set {
let scaleSize = calculateScale(newValue.height)
if scaleSize < newValue.width && newValue.width != 0{
layer.cornerRadius = newValue.width
}else{
layer.cornerRadius = scaleSize
}
}
get {
return self.fitCornerRadius
}
}
}
文章图片
自适应倒角
/// 约束扩展
extension NSLayoutConstraint {
/// 基准长度
/// - width-最小值(无最小值填0) height-基准值 返回值-(width:0, height:真实长度)
@IBInspectable var fitConstant:CGSize {
set{
let scaleSize = calculateScale(newValue.height)
if scaleSize < newValue.width && newValue.width != 0{
constant = scaleSize
}else{
constant = scaleSize
}
}
get{
return self.fitConstant
}
}
}/// 字体扩展
extension UILabel{
/// - width-最小值(无最小值填0) height-基准值 返回值-(width:0, height:真实字号)
@IBInspectable var fitFontSize: CGSize {
set{
let scaleSize = calculateScale(newValue.height)
if scaleSize < newValue.width && newValue.width != 0 {
font = UIFont(name: font.fontName, size: newValue.width)
}else{
font = UIFont(name: font.fontName, size: scaleSize)
}
}
get {
return self.fitFontSize
}
}
}
文章图片
自适应字体字号
/// 按钮扩展
extension UIButton {
/// 基准字号
/// - width-最小值(无最小值填0) height-基准值 返回值-(width:0, height:真实字号)
@IBInspectable var fitFontSize: CGSize {
set{
let scaleSize = calculateScale(newValue.height)
if scaleSize < newValue.width && newValue.width != 0 {
if titleLabel != nil {
titleLabel!.font = UIFont(name: titleLabel!.font.fontName, size: calculateScale(newValue.width))
}
}else{
if titleLabel != nil {
titleLabel!.font = UIFont(name: titleLabel!.font.fontName, size: calculateScale(scaleSize))
}
}
}
get{
return self.fitFontSize
}
}
}
文章图片
自适应按钮字号
/// 输入文本扩展
extension UITextField {
/// 基准字号
/// - width-最小值(无最小值填0) height-基准值 返回值-(width:0, height:真实字号)
@IBInspectable var fitFontSize: CGSize {
set{
let scaleSize = calculateScale(newValue.height)
if scaleSize < newValue.width && newValue.width != 0 {
if font != nil {
font = UIFont(name: font!.fontName, size: newValue.width)
}
}else{
if font != nil {
font = UIFont(name: font!.fontName, size: scaleSize)
}
}
}
get{
return self.fitFontSize
}
}
}
推荐阅读
- iOS,打Framework静态库
- 织网布局,社群营销走进山东玖零落地企业
- 瀑布流布局
- 2018-12-03-新手教程重构思路
- 详解布局Masonry
- 20.小程序(布局适配方案(rpx、px、vw、vh))
- 数据透视表布局及美化
- Xcode|Xcode 11.2 开启推送按钮
- iOS|iOS 高效开发必备技巧之自动化打包(shell xcode11 上传App Store 蒲公英等平台)
- Flutter开发之布局Widget