Swift 无法绕过我的 UIButton 的角落

Question

我查看了几乎所有的 stackoverflow 解决方案，但由于某些奇怪的原因，我的按钮无法圆角。有人可以检查一下我做错了什么吗？

let goToMapsButton = UIButton(type: .custom)
    scrollView.addSubview(goToMapsButton)
       _ = goToMapsButton.anchor(map.bottomAnchor, left: nil, bottom: seperator.topAnchor, right: self.view.rightAnchor, topConstant: 16, leftConstant: 0, bottomConstant: 16, rightConstant: 16, widthConstant: 50, heightConstant: 50)


    goToMapsButton.backgroundColor = .green
    goToMapsButton.layer.cornerRadius = 0.5 * goToMapsButton.bounds.size.width
    goToMapsButton.clipsToBounds = true
    goToMapsButton.layer.masksToBounds = true

顺便说一句，我在视图控制器的 viewDidLoad 部分执行所有这些操作，如果该信息有所不同的话。

这里是完整的 viewDidLoadClass 供参考：` override func viewDidLoad() { super.viewDidLoad()

    let map = MKMapView()
    let view1 = UIView()
    view1.backgroundColor = .red

    let storeAddress = UILabel()
    storeAddress.text = "318 Atwood Avenue"
    storeAddress.font = UIFont.systemFont(ofSize: 20, weight: UIFont.Weight.medium)

    let storeCity = UILabel()
    storeCity.text = "Rainy River"
    storeCity.font = UIFont.systemFont(ofSize: 20, weight: UIFont.Weight.medium)

    let seperator = UIView()
    seperator.backgroundColor = .lightGray

    let goToMapsButton = UIButton(type: .custom)


    scrollView.addSubview(map)
    scrollView.addSubview(view1)
    scrollView.addSubview(storeAddress)
    scrollView.addSubview(storeCity)
    scrollView.addSubview(goToMapsButton)
    scrollView.addSubview(seperator)

    map.anchorToTop(scrollView.topAnchor, left: self.view.leftAnchor, bottom: nil, right: self.view.rightAnchor)
    map.heightAnchor.constraint(equalTo: self.view.heightAnchor, multiplier: 0.6).isActive = true

    _ = storeAddress.anchor(map.bottomAnchor, left: self.view.leftAnchor, bottom: nil, right: nil, topConstant: 16, leftConstant: 16, bottomConstant: 0, rightConstant: 0, widthConstant: 0, heightConstant: 0)
    _ = storeCity.anchor(storeAddress.bottomAnchor, left: self.view.leftAnchor, bottom: nil, right: nil, topConstant: 8, leftConstant: 16, bottomConstant: 0, rightConstant: 0, widthConstant: 0, heightConstant: 0)

    _ = goToMapsButton.anchor(map.bottomAnchor, left: nil, bottom: nil, right: self.view.rightAnchor, topConstant: 16, leftConstant: 0, bottomConstant: 16, rightConstant: 16, widthConstant: 50, heightConstant: 50)
    goToMapsButton.backgroundColor = .green
    print(goToMapsButton.frame.width)
    goToMapsButton.layer.cornerRadius = 0.25 * goToMapsButton.frame.width
    goToMapsButton.clipsToBounds = true
    goToMapsButton.layer.masksToBounds = true


    _ = seperator.anchor(storeCity.bottomAnchor, left: self.view.leftAnchor, bottom: nil, right: self.view.rightAnchor, topConstant: 8, leftConstant: 0, bottomConstant: 0, rightConstant: 0, widthConstant: 0, heightConstant: 1)

    view1.anchorToTop(map.bottomAnchor, left: self.view.leftAnchor, bottom: scrollView.bottomAnchor, right: self.view.rightAnchor)
    view1.heightAnchor.constraint(equalTo: self.view.heightAnchor, multiplier: 0.8).isActive = true

}`

Answer 1

将这段代码移到 viewWillLayoutSubviews 中：

override func viewWillLayoutSubviews() {
    super.viewWillLayoutSubviews()
    goToMapsButton.layer.cornerRadius = 0.25 * goToMapsButton.frame.width
}

或者为圆角按钮创建自定义类：

class RoundedButton: UIButton {
    @IBInspectable var cornerRadius: CGFloat = 0

    override func layoutSubviews() {
        super.layoutSubviews()
        clipsToBounds = true
        layer.cornerRadius = cornerRadius
    }
}

Answer 2

我今天遇到同样的问题，我也在使用 Anchor。嗯，对我来说，它看起来像 one line stuff，从来没想过它需要这么多代码。

难点在于我们无法在 UIButton 属性闭包中获取 frame.height 或 width，因为此时 autolayout 还没有计算尺寸。我做了一个测试以在viewDidLayoutSubviews 中应用纯圆角。

这就是它的样子，尽管这些 UIButton 的声明是分开的。我真的不喜欢这种方式，我想把所有的按钮声明代码放在同一个地方，就像一个闭包一样。但是我在互联网上找不到任何其他方法。

    let b1 = UIButton()
    let b2 = UIButton()
    let b3 = UIButton()
    let b4 = UIButton()

    override func viewDidLoad() {
        super.viewDidLoad()

        configureLayout()
    }

    private func configureLayout() {
        // disable large title
        navigationItem.largeTitleDisplayMode = .never
        
        let topLabel = UILabel()
        topLabel.text = "Import your music"
        topLabel.font = .systemFont(ofSize: 30, weight: .heavy)
        topLabel.numberOfLines = 0
        topLabel.textColor = .black
        topLabel.textAlignment = .center
        
        let stack = UIStackView()
        stack.translatesAutoresizingMaskIntoConstraints = false
        stack.axis = .vertical
        stack.spacing = 40
        stack.addArrangedSubview(topLabel)
        
        b1.setTitle("Local drive", for: .normal)
        b2.setTitle("Google", for: .normal)
        b3.setTitle("OneNote", for: .normal)
        b4.setTitle("DropBox", for: .normal)
        
        b1.backgroundColor = .myBlue
        b2.backgroundColor = .myGreen
        b3.backgroundColor = .systemPink
        b4.backgroundColor = .myPuple
        
        b1.tag = 1
        b2.tag = 2
        b3.tag = 3
        b4.tag = 4
        
        [b1, b2, b3, b4].forEach { b in
            b.titleLabel?.font = .systemFont(ofSize: 20, weight: .bold)
            b.setTitleColor(.white, for: .normal)
            b.setTitleColor(.gray, for: .highlighted)
            stack.addArrangedSubview(b)
            b.addTarget(self, action: #selector(buttonTapped(_:)), for: .touchUpInside)
        }
        view.addSubview(stack)
        
        let g = view.safeAreaLayoutGuide
        NSLayoutConstraint.activate([
            stack.centerXAnchor.constraint(equalTo: g.centerXAnchor),
            stack.centerYAnchor.constraint(equalTo: g.centerYAnchor),
            stack.widthAnchor.constraint(equalTo: g.widthAnchor, multiplier: 0.75)
        ])
    }
    
    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        
        [b1, b2, b3, b4].forEach { b in
            b.layer.cornerRadius = b1.frame.height / 2
            b.layer.cornerCurve = .continuous
        }
    }

Answer 3

给你的按钮一个框架。像这样

goToMapsButton.frame = CGRect(x: xposition, y:yposition, width: widthyouwant, height: heightyouwant)

目前您的按钮大小为零 0*0.5 = 零，这就是它不应用任何半径的原因。 给它框架，它会工作......

Answer 4

UIButton 可能具有带圆角的背景UIImage。它允许您为UIButton 的每个UIControlState 设置背景UIImage。

open class UIButton : UIControl, NSCoding {

    open func setBackgroundImage(_ image: UIImage?, for state: UIControlState)
}

如果您的UIButton 的大小在运行时确定并且半径是固定的 - 您可以使用可调整大小的图像：

open class UIImage : NSObject, NSSecureCoding {

    open func resizableImage(withCapInsets capInsets: UIEdgeInsets) -> UIImage
}

在下面的 gif 中，我使用 UIImage 大小 = CGSize(width: 7, height: 7)，圆角半径 = 3 和帽插入 = UIEdgeInsets(top: 3, left: 3, bottom: 3, right: 3)