巧用阴影实现模糊字体的UILabel

5 篇文章 0 订阅

最近,PM提出了一个新的需求,就是要把一个句子中的某些单词给模糊掉,实现提示用户的效果。要求如下图所示:

需求图片

我一下子能够想到的办法,就是利用UIVisualEffectView进行模糊,或者使用图片进行替换。
首先说使用图片的方式,也就是把要模糊的单词做成图片,然后使用NSAttributedString进行显示,乍一看好像可行,实际做的时候发现,由于图片的大小是固定的,在不同分辨率的iPhone上,显示效果并不一样,在IPhone Plus系列中不能够正确的进行显示,而且每个单词都需要生成一次图片,工作量很大,所以该方案不可取;
再说使用UIVisualEffectView的方式,这种方式的主要问题在于查找要屏蔽单词的坐标;由于Apple没有提供对应的接口,我们就必须把UILabel的绘制也给接管才能够实现这种方案,实现起来比较复杂;不建议使用该方案,当然如果不赶时间的话,也是可以这么做的。
由于上面两种方法都不太好,所以就只能继续寻找其他实现发的方式。
后来想到了利用阴影的方式来进行显示,因为我们知道,字体的阴影本身就是模糊的,如果我们把字体本身隐藏,只显示阴影的话,就会看到模糊的内容,也就是我们的需求。具体代码如下:

//生成正则表达式,查找要模糊的关键字
let regex = try NSRegularExpression(pattern: "\(keyword)")
regex.enumerateMatches(in: text, options: NSRegularExpression.MatchingOptions.reportCompletion, range: NSMakeRange(0, text.count)) { checkingResult, flags, pointer in
    if let range = checkingResult?.range {
        // 设置文本阴影,实现模糊字体的显示
        let shadow = NSShadow()
        shadow.shadowBlurRadius = 3
        shadow.shadowOffset = CGSize(width: 0, height: 0)
        shadow.shadowColor = ColorUtils.blackColor.withAlphaComponent(0.8)
        
        // 设置字体颜色和背景相同,隐藏文本本身
        attrResult.addAttributes([
            NSAttributedStringKey.backgroundColor: ColorUtils.whiteColor, 
            NSAttributedStringKey.foregroundColor: ColorUtils.whiteColor, 
            NSAttributedStringKey.shadow: shadow], 
                range: range)
    }
}             

这个样子就利用阴影实现了文本内容的模糊,而不需要使用复杂的实现的。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以的,您可以使用 `lessThanOrEqualToSuperview` 来设置 `UILabel` 的底部约束,从而实现您的要求。示例代码如下: ```swift import SnapKit class YourTableViewCell: UITableViewCell { private let label = UILabel() private let imageView = UIImageView() override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) { super.init(style: style, reuseIdentifier: reuseIdentifier) // Add subviews to contentView contentView.addSubview(label) contentView.addSubview(imageView) // Set label properties label.numberOfLines = 0 // Set constraints for label label.snp.makeConstraints { make in make.top.equalToSuperview().offset(5) make.left.right.equalToSuperview() make.bottom.lessThanOrEqualToSuperview().offset(-10) } // Set constraints for imageView imageView.snp.makeConstraints { make in make.top.equalTo(label.snp.bottom).offset(10) make.left.right.equalToSuperview() make.bottom.equalToSuperview().offset(-10) make.height.equalTo(0) } } required init?(coder aDecoder: NSCoder) { fatalError("init(coder:) has not been implemented") } func configure(with text: String, image: UIImage?) { label.text = text // Update constraints for imageView based on the presence of an image if let image = image { imageView.image = image imageView.snp.updateConstraints { make in make.height.equalTo(50) make.top.equalTo(label.snp.bottom).offset(10) make.bottom.equalToSuperview().offset(-10) } } else { imageView.image = nil imageView.snp.updateConstraints { make in make.height.equalTo(0) make.top.equalTo(label.snp.bottom).offset(0) make.bottom.equalToSuperview().offset(-10) } } } } ``` 在这段代码中,我们使用了 `bottom.lessThanOrEqualToSuperview()` 来设置 `UILabel` 的底部约束,使其不会超出 `contentView` 的底部。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值