UIButton 在所有设备上的形状都不正确 [英] UIButtons are not correctly shaped on all devices

问题描述

我有一个带有四个方形按钮的 UIView 控制器，我用边框将它们设置为圆形.它在 iPhone 8 和 iPhone X 上完美运行，但在 iPhone SE 和 iPhone 8 Plus 中，UIButtons 不再是圆形的.我已将 UIButtons 设置为方形，并通过 Auto-Layout 保持该比例，但它似乎不起作用.

I've an UIView Controller with four square buttons and I've set them round with a border. It works perfectly on iPhone 8 and iPhone X but in iPhone SE and iPhone 8 Plus the UIButtons are not round anymore. I've set the UIButtons to be square and to keep that ratio with Auto-Layout but it doesn't appear to work.

在我的 ViewController.Swift 中，我已经链接了四个 UIButton，然后我应用了如下相同的代码:

In my ViewController.Swift, I've linked the four UIButtons and then I've applied the same code as below :

@IBOutlet weak var topLeftButtonImage: UIButton!


// Edit it to round
topLeftButtonImage.layer.cornerRadius = topLeftButtonImage.frame.size.width/2
topLeftButtonImage.clipsToBounds = true

// Add border
topLeftButtonImage.layer.borderColor = UIColor.white.cgColor // Button border color
topLeftButtonImage.layer.borderWidth = 4 // Button border width

您可以在此处查看 iPhone SE 和 iPhone 8 Plus 上的行为.iPhone 8 和 iPhone X 都可以.

Here you can see the behaviour on iPhone SE and iPhone 8 Plus. iPhone 8 and iPhone X are fine.

自动布局约束:

推荐答案

在viewcontroller的viewDidLayoutSubviews方法中设置按钮cornerRadius

set button cornerRadius in viewDidLayoutSubviews method of viewcontroller

 override func viewWillLayoutSubviews() {
    super.viewWillLayoutSubviews()
    // Edit it to round
    topLeftButtonImage.layer.cornerRadius = topLeftButtonImage.bounds.size.height / 2
    topLeftButtonImage.clipsToBounds = true

    // Add border
    topLeftButtonImage.layer.borderColor = UIColor.white.cgColor // Button border color
    topLeftButtonImage.layer.borderWidth = 4 // Button border width
}

这篇关于UIButton 在所有设备上的形状都不正确的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！