尝试在 Swift 中创建圆形 UIView 时出错

Posted 2023-02-24

【中文标题】尝试在 Swift 中创建圆形 UIView 时出错

【英文标题】：Error trying to make a circular UIView in Swift

【发布时间】：2015-06-05 13:33:06

【问题描述】：

我的屏幕布局中有一个 UIImageView，它根据容器视图尺寸动态调整大小。我想将其转换为圆形视图，我正在使用以下代码：

let dSize: CGFloat = min(imageview.frame.height, imageview.frame.width)
imageview.frame = CGRectMake(0, 0, dSize, dSize)
imageview.clipsToBounds = true
imageview.layer.cornerRadius = dSize/2.0
imageview.layer.borderWidth = 1.0
imageview.layer.borderColor = UIColor.whiteColor().CGColor

问题在于生成的视图并不总是圆形的。为了达到这个效果，我必须在 iPhone 4 上将dSize 除以 2.0，在 iPhone 5/5s 上除以 1.7，在 iPhone 上除以 1.5 6/6 秒。我不知道我做错了什么。

【问题讨论】：

您是否对imageview添加了任何约束？

是否在 viewDidLoad 函数中？

您的视图总是正方形吗？因为如果width != height，那么它就不是一个圆，它更像是一个圆角矩形

我添加了一个纵横比 1:1 的约束，理论上它总是正方形的（我知道这是实现圆形的必要条件）

viewDidLoad 对于几何来说太早了，试试viewDidLayoutSubviews

【参考方案1】：

你可以试试这个

//To make your imageView circular
imageView.layer.cornerRadius = imageView.frame.size.height/2;
imageView.layer.masksToBounds = YES;

//To add border
imageView.layer.borderColor = [UIColor whiteColor].CGColor;
imageView.layer.borderWidth = 2;

【讨论】：

嗨。请检查 cmets。将代码放在 viewDidLayoutSubviews 中可以解决问题，但我可以看到视图在一个圆圈中变换。

我在 viewDidLoad 中执行此操作，到目前为止没有任何问题。

你能在 viewDidLayoutSubviews 中用我的代码替换你的代码吗？

@Claus：在它周围创建一个CATransaction 并禁用动画。首先：CATransaction.begin()，然后是 CATransaction.setValue(kCFBooleanTrue, forKey: kCATransactionDisableActions)，然后是您的代码，然后是 CATransaction.commit()。 （不能在 cmets 中换行。）

我没有得到一个完美的圆圈。我只使用我的问题中的方法来达到效果

【参考方案2】：

viewDidLoad() 对您的 UIImageView 上的几何图形来说还为时过早，请尝试使用 viewWillAppear()，因为这是保证几何图形可用的地方。

由于您使用的是自动布局，我建议将其粘贴到viewDidLayoutSubviews()。每次发生自动布局时都会调用它。即使视图没有改变方向，这也可能是多次。正如您在 cmets 中所指出的，请确保在方法内部调用 super（您也应该对 viewDidLoad() 等视图控制器生命周期方法执行相同操作）

override func viewWillAppear(animated: Bool) 
    super.viewWillAppear(animated)
    self.addCircleBorderToImageView(self.imageView)


override func viewDidLayoutSubviews() 
    super.viewDidLayoutSubviews()
    self.addCircleBorderToImageView(self.imageView)


// I made this UIView so it can be used with any view not just image views.
func addCircleBorderToImageView(imgView: UIView) 
    let dSize: CGFloat = min(imgView.frame.height, imgView.frame.width)
    imgView.bounds = CGRectMake(0, 0, dSize, dSize) // centered in container you want to use bounds over frame for this scenario
    imgView.clipsToBounds = true
    imgView.layer.cornerRadius = dSize/2.0
    imgView.layer.borderWidth = 1.0
    imgView.layer.borderColor = UIColor.whiteColor().CGColor

【讨论】：

感谢您的完整回答。不幸的是，结果是一样的：我一直看到视图是正方形的半秒钟，然后它变成了一个圆圈。我也尝试添加@Jesper 提出的CATransaction 代码，但没有。

我正在加载一个方形图像，uiimageview 设置在 Aspect Fill 上，并且我设置了纵横比 1:1。我唯一注意到的是，当到达 addCircleBorderToImageView 函数 LOG (lldb) po imgView.frame (0.0, 0.0, 240.0, 128.0) 时，视图不是方形的

您的限制是什么？我有一个演示项目，对于我固定到左边距的图像视图，固定到顶部布局指南，并将高度/宽度设置为 50。我建议添加一些自动布局规则以保持宽度/高度相同

视图以 X 和 Y 上的容器为中心。与容器高度相等，纵横比为 1:1，使其像正方形

我更新了我的演示项目，使其以容器 x 和 y 为中心，高度 = 50，纵横比为 1:1，我没有任何问题。刚刚对我的答案进行了编辑，它应该是 bounds 而不是 frame 为 frame 并将其位置原点更改为 (0,0) 如果您想比较演示项目，请私信我。