完美解决UIButton imageView大小控制问题,完美适配iOS13系统图标的降级方案
在进行iOS应用开发的时候,经常会用到带有图标的按钮。
最近在更新账号小助手的时候,我发现xcode更新了一系列的系统图标,而且下拉一看都是十分规范而精美的,涵盖的内容也很丰富,这对于我们这样的独立的开发来说可以说是雪中送炭。
在网上搜一搜,不难发现这些系统图标是源自于2019WWDC大会的发布,并且苹果官方给了一套说明,甚至还有一个方便查找的mac app 传送门: Human Interface Guidelines - SF Symbols
而在具体的开发时,也还是能发现一些问题。
1. 最新的图标用起来固然爽,但是需要自己考虑向下兼容
可以看到,这个组件在iOS12或者更早时是无效的,我们如果在代码中用到相关的接口来获取图片对象时,同样也会告警处理低版本兼容问题。
UIImage( systemNamed: "doc.text" )
那我们如果为了兼容只能使用图片来替代了。 好在经过查找,我们发现 SF Symbols App是可以将矢量图标导出的,那我们就可以再使用其他工具生成对应的@x 图片文件了。
虽然还是回到了用图解决问题,但好在我们在做一些小部分的系统类Icon时候不用再费力去找素材了.
2. 使用图片降级方案时,按钮中图片大小成为烦恼
我们知道按钮中的图标,一般需要随着按钮的大小而自动调整,而在xcode中,我们将图片资源设置到对应的storyboard 或是 代码中的 imageView, UIButton.setImage 都会出现,图片保持了原图的大小这样的问题,并且还是被拉伸的状态。
在解决这个问题的时候,要解决几个问题 a. 保持图片的缩放比例 b. 图片颜色应该和文字、tintColor一致 c. 图片应该缩放到和正常的Symbol图标一致或接近
a 是比较好解决的,主要使用 contentMode 属性
b 需要同时设置RenderingMode 以及 tintColor
c 就比较麻烦了,最初的思路是设置UIButton下的imageView的size,frame,但是没有任何效果,网上查了很多在这个部分也是毫无收获,后来发现UIButton的图片机制完全是基于 imageEdgeInset 自动计算的。 希望自由控制按钮中图片的同学也可以注意了,使用imageEdgeInset设置图片基于按钮的上下左右距离,剩下来的空间的就是图片的最终size
不过只要思路弄清楚了,解决方案就不是问题。 下面是我的解题思路和方程式:
既然苹果是自动计算的,那我也自己也来自动计算一下图片的大小好了~
extension UIButton{
// 使用SF图标 size期望图标大小 为空自动计算最佳大小
func setSFIcon( name:String, size:CGFloat? = nil ){
/**
设置按钮中的图片图标 (只考虑图标在文字左侧)
1 拿到button大小
2 拿到label大小
3 拿到期望图标大小 / 计算最佳大小 ( 图标大小不能超过按钮 2/3高度, 只考虑正方形图标容器 )
4 计算间隙 ( 图标默认离文字要有 1/5 的距离 )
*/
let buttonSize = self.size
let labelSize = self.titleLabel?.size ?? CGSize(width: 0, height: 0)
var bestSize:CGFloat
if size != nil{
bestSize = size! > (buttonSize.height * 2) / 3 ? (buttonSize.height * 2) / 3 : size!
}else{
bestSize = 1.2 * labelSize.height
}
let left = (buttonSize.width - 1.2 * bestSize - labelSize.width) / 2
let right = (buttonSize.width - left - (bestSize * 1.2 ) )
let hInset = (buttonSize.height - bestSize) / 2
let icon = UIImage.SFIcon(name: name)?.withRenderingMode(.alwaysTemplate)
self.imageEdgeInsets = UIEdgeInsets(top: hInset, left: left, bottom: hInset, right: right)
self.imageView?.contentMode = .scaleAspectFit
self.setImage( icon, for: .normal)
self.tintColor = self.currentTitleColor
}
}
extension UIImage{
// 获取SF图标 早期系统使用图片资源
static func SFIcon( name:String ) -> UIImage?{
if #available(iOS 13.0, *) {
return UIImage( systemName: name )
} else {
return UIImage( named: name )
}
}
}
而在对应的ViewController中,调用就十分简单了
copyButton.setSFIcon(name: "doc.on.doc", size: 18)
文章地址: 完美解决UIButton imageView大小控制问题,完美适配iOS13系统图标的降级方案 - Sprite keep learning
最近回复