如何使UILabel的背景图片适配其框架尺寸(使用UIColor(patternImage:))
让UILabel的Pattern背景图适配标签尺寸的解决方法
这个问题我之前在项目里也碰到过!用UIColor(patternImage:)设置的背景本质是把图片当作平铺纹理来使用,默认会重复填充整个Label区域,没法直接让图片适配Label的frame大小。下面给你两个实用的解决方案:
方案1:自定义UILabel,重绘背景图
通过自定义Label并重写绘制方法,我们可以手动控制图片的绘制区域,实现完全适配或者按比例适配的效果,适合需要多处复用的场景。
class BackgroundFittedLabel: UILabel { // 暴露一个设置背景图的属性 var fittedBackgroundImage: UIImage? { didSet { setNeedsDisplay() // 图片更新时触发重绘 } } override func draw(_ rect: CGRect) { super.draw(rect) guard let bgImage = fittedBackgroundImage else { return } // 方式1:直接填充整个Label的bounds(可能会拉伸图片) bgImage.draw(in: self.bounds) // 方式2:保持图片比例,裁剪超出部分(类似UIImageView的scaleAspectFill) // let targetRect = AVMakeRect(aspectRatio: bgImage.size, insideRect: self.bounds) // bgImage.draw(in: targetRect) // 方式3:保持图片比例,完整显示图片(类似UIImageView的scaleAspectFit) // 可以用上面的targetRect,然后绘制这个rect即可 } } // 使用示例 let myLabel = BackgroundFittedLabel() myLabel.fittedBackgroundImage = UIImage(named: "na72.png") myLabel.text = "测试文本" myLabel.textColor = .white // 根据背景图调整文字颜色,保证可读性 myLabel.frame = CGRect(x: 20, y: 20, width: 300, height: 150)
方案2:给Label添加UIImageView背景子视图
这个方法更轻量化,不用自定义控件,直接给Label添加一个底层的UIImageView来承载背景图,灵活度很高:
let myLabel = UILabel() myLabel.text = "测试文本" myLabel.textColor = .white myLabel.frame = CGRect(x: 20, y: 20, width: 300, height: 150) // 创建背景图片视图 let bgImageView = UIImageView(image: UIImage(named: "na72.png")) // 设置图片视图的尺寸与Label完全一致 bgImageView.frame = myLabel.bounds // 设置内容模式,按需选择: // .scaleToFill:拉伸填充整个区域(可能变形) // .scaleAspectFill:按比例填充,裁剪超出部分 // .scaleAspectFit:按比例适配,完整显示图片,上下/左右会留空 bgImageView.contentMode = .scaleToFill bgImageView.clipsToBounds = true // 用scaleAspectFill时需要开启裁剪,避免图片超出 // 将图片视图插入到Label的最底层,不会遮挡文字 myLabel.insertSubview(bgImageView, at: 0) // 如果用AutoLayout布局,记得添加约束: // bgImageView.translatesAutoresizingMaskIntoConstraints = false // NSLayoutConstraint.activate([ // bgImageView.topAnchor.constraint(equalTo: myLabel.topAnchor), // bgImageView.leadingAnchor.constraint(equalTo: myLabel.leadingAnchor), // bgImageView.trailingAnchor.constraint(equalTo: myLabel.trailingAnchor), // bgImageView.bottomAnchor.constraint(equalTo: myLabel.bottomAnchor) // ])
两种方案都能解决你的问题,要是你只需要在某一处使用,方案2更快捷;如果项目里多个Label都需要这个效果,方案1的自定义Label会更便于维护。
内容的提问来源于stack exchange,提问作者SThyuji




