iOS开发气泡图标不变形

原创

mob64ca12f3496a 2023-11-14 03:13:04 ©著作权

文章标签 图层背景图代码示例 文章分类 iOS 移动开发

©著作权归作者所有：来自51CTO博客作者mob64ca12f3496a的原创作品，请联系作者获取转载授权，否则将追究法律责任

iOS开发气泡图标不变形

在iOS开发中，气泡图标常用于显示消息提示或者未读消息数量。然而，当气泡中的数字变化时，我们需要确保图标不会因为数字的增加而变形。本文将介绍一种实现气泡图标不变形的方法，并提供代码示例。

实现方法

为了实现气泡图标不变形，我们可以使用一个背景图和一个数字图层来构建气泡图标。

首先，我们创建一个自定义的BubbleView继承自UIView，并在BubbleView的初始化方法中设置背景图和数字图层。代码示例如下：

class BubbleView: UIView {

    private var bubbleImageView: UIImageView!
    private var numberLabel: UILabel!

    override init(frame: CGRect) {
        super.init(frame: frame)

        // 设置背景图
        bubbleImageView = UIImageView(image: UIImage(named: "bubble_background"))
        bubbleImageView.frame = self.bounds
        self.addSubview(bubbleImageView)

        // 设置数字图层
        numberLabel = UILabel(frame: self.bounds)
        numberLabel.textAlignment = .center
        numberLabel.textColor = .white
        numberLabel.font = UIFont.systemFont(ofSize: 14)
        self.addSubview(numberLabel)
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

在上述代码中，我们使用bubble_background作为气泡的背景图。你可以替换为自己的背景图。

接下来，我们需要在BubbleView中添加一个用于设置数字的方法setNumber(_:)。这个方法用于更新气泡中的数字，并调整数字图层的大小和位置以适应不同的数字大小。代码示例如下：

extension BubbleView {

    func setNumber(_ number: Int) {
        numberLabel.text = "\(number)"

        // 根据数字调整数字图层的大小
        let textWidth = ceil(numberLabel.sizeThatFits(.zero).width)
        let textHeight = ceil(numberLabel.font.lineHeight)
        let minWidth = max(textWidth + 12, textHeight + 6)
        numberLabel.frame.size.width = minWidth
        numberLabel.frame.size.height = textHeight

        // 调整数字图层的位置
        let center = bubbleImageView.center
        numberLabel.center = CGPoint(x: center.x, y: center.y - 2)
        numberLabel.layer.cornerRadius = numberLabel.frame.height / 2
        numberLabel.layer.masksToBounds = true
    }
}

在上述代码中，我们使用sizeThatFits(_:)方法获取数字文本所需的最小宽度，并将数字的高度设置为字体的行高。然后，我们通过调整数字图层的大小和位置，使其适应不同大小的数字。

最后，在我们的视图控制器中，我们可以使用BubbleView来创建一个气泡图标，并设置数字。代码示例如下：

class ViewController: UIViewController {

    private var bubbleView: BubbleView!

    override func viewDidLoad() {
        super.viewDidLoad()

        bubbleView = BubbleView(frame: CGRect(x: 100, y: 100, width: 30, height: 30))
        self.view.addSubview(bubbleView)
    }

    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)

        bubbleView.setNumber(10)
    }
}

在上述代码中，我们创建了一个气泡图标，并在视图控制器的viewDidAppear(_:)方法中设置数字为10。