ios - Swift iOS - 如何排列子层位置以匹配按钮文本的中心

Question

我有一个文本按钮。我添加了一个红色背景子图层，并使背景图层的宽度和高度大于按钮文本。我尝试使用以下方法将背景层居中放置在按钮上:

backgroundLayer.position = button.center

它不是居中的。这是我得到的:

我知道我可以直接在按钮上设置背景颜色和 cornerRadius，但是当我这样做时，红色背景会紧贴文本:

button.backgroundColor = UIColor.red
button.layer.cornerRadius = 10

我希望红色背景比文字更宽更高:

backgroundLayer.frame = CGRect(x: 0, y: 0, width: buttonTextSize.width + 10, height: buttonTextSize.height + 5

我想以 Photoshop 为例，但目前我面前没有 Photoshop。这是我能找到的最接近的。这是来自 Vimeo 的按钮。他们没有使用文本，但是 backgroundLayer 比按钮图像更宽更高，并且 backgroundLayer 的位置与按钮的 midX 和 midY 对齐:

如何让背景 subLayer 的位置与按钮文本的中心对齐？

let button: UIButton = {
    let button = UIButton()
    button.translatesAutoresizingMaskIntoConstraints = false
    button.setTitle("Next", for: .normal)
    button.setTitleColor(UIColor.white, for: .normal)
    button.contentHorizontalAlignment = .center
    button.titleLabel?.font = UIFont.systemFont(ofSize: 23)
    return button
}()

let backgroundLayer: CALayer = {
    let layer = CALayer()
    layer.backgroundColor = UIColor.red.cgColor
    layer.cornerRadius = 10
    return layer
}()

override func viewDidLoad() {
    super.viewDidLoad()
    view.backgroundColor = UIColor.lightGray

    view.addSubview(button)
    button.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
    button.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
}

override func viewWillLayoutSubviews() {
    super.viewWillLayoutSubviews()

    let buttonText = button.titleLabel?.text
    let buttonTextSize = (buttonText! as NSString).size(withAttributes: [NSAttributedStringKey.font: UIFont.systemFont(ofSize: 23.0)])

    // I added 10 points to the backgroundLayer's width and 5 points to the backgroundLayer's height so its wider then the text
    backgroundLayer.frame = CGRect(x: 0, y: 0, width: buttonTextSize.width + 10, height: buttonTextSize.height + 5)
    button.layer.insertSublayer(backgroundLayer, at: 0)

    backgroundLayer.position = button.center
}

Answer 1

这是一个看起来像你想要的样子的按钮(当然你可以调整任何不适合你感觉的参数):

此按钮自动为红色、圆角且比其文本大得多(即使按钮是使用自动布局定位时也是如此)。

下面是它是如何通过子类实现的:

class MyRedButton : UIButton {
    override func layoutSubviews() {
        super.layoutSubviews()
        self.backgroundColor = .red
        self.layer.cornerRadius = 10
    }
    override var intrinsicContentSize: CGSize {
        var sz = super.intrinsicContentSize
        sz.width += 30; sz.height += 30
        return sz
    }
}