uiview - 圆形 UIView 不是一个完整的圆圈

Question

我有一个有趣的问题，但我不知道如何解决它。我正在尝试使用@IBInspectable 扩展 UIView。但是，使用这种方法，拐角半径似乎是从 nib 文件默认设置的，而不是视图的实际大小。

因此，当我在 IB 中将“视图为”设置为 iPhoneSE 并为 iPhoneSE 构建时，视图是一个圆圈。但是，如果我为 iPhone7 构建，角落不会完全圆成圆形。相反，如果我将“查看为”设置为 iPhone7 并为 iPhone7 构建，则视图是一个圆形，但是，如果我为 iPhoneSE 构建，则角会过度圆润。

图片和代码如下：

扩大

extension UIView {

    @IBInspectable var cornerRadius:Double {
        get {
            return Double(layer.cornerRadius)
        }
        set {
            layer.cornerRadius = CGFloat(newValue)
            layer.masksToBounds = newValue > 0
        }
    }

    @IBInspectable var circleView:Bool {
        get {
            return layer.cornerRadius == min(self.frame.width, self.frame.height) / CGFloat(2.0) ? true : false
        }
        set {
            if newValue {
                layer.cornerRadius = min(self.frame.width, self.frame.height) / CGFloat(2.0)
                layer.masksToBounds = true
            }
            else{
                layer.cornerRadius = 0.0
                layer.masksToBounds = false
            }
        }
    }

}

“查看为”在 IB 中设置为 iPhoneSE

专为 iPhoneSE 打造

为 iPhone 7 构建

“查看为”设置为iPhone7

为 iPhone SE 构建

为 iPhone 7 构建

IB设置

score 3 · Accepted Answer

如果您的视图是正方形，您只会得到一个完整的圆圈。

如果您的视图是一个矩形并且您设置的cornerRadius值小于最小尺寸的一半，您将获得第二个视图，如果它的值大于该值，您将获得菱形视图。

检查您的约束，您应该cornerRadius在视图完成布局后计算，viewDidLayout以便获得正确的大小。

这是一个 Playground 展示了这个（我添加了一个动画来更好地展示这个问题）：

import UIKit
import PlaygroundSupport

extension UIView
{
  func addCornerRadiusAnimation(from: CGFloat, to: CGFloat, duration: CFTimeInterval)
  {
    let animation = CABasicAnimation(keyPath:"cornerRadius")
    animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionLinear)
    animation.fromValue = from
    animation.toValue = to
    animation.duration = duration
    self.layer.add(animation, forKey: "cornerRadius")
    self.layer.cornerRadius = to
  }
}

let v = UIView(frame: CGRect(x: 0, y: 0, width: 350, height: 450))
PlaygroundPage.current.liveView = v

let squareView = UIView(frame: CGRect(x: 10, y: 10, width: 100, height: 100))
squareView.backgroundColor = .red
squareView.layer.masksToBounds = true
v.addSubview(squareView)
var cornerRadius = CGFloat(0.5*min(squareView.frame.width,
                                   squareView.frame.height))
squareView.addCornerRadiusAnimation(from: 0, to: cornerRadius, duration: 5)

let rectangleView = UIView(frame: CGRect(x: 10, y: 200, width: 100, height: 200))
rectangleView.backgroundColor = .blue
rectangleView.layer.masksToBounds = true
v.addSubview(rectangleView)
cornerRadius = CGFloat(0.5*min(rectangleView.frame.width,
                                   rectangleView.frame.height))
rectangleView.addCornerRadiusAnimation(from: 0, to: cornerRadius, duration: 5)

let diamondView = UIView(frame: CGRect(x: 200, y: 200, width: 100, height: 200))
diamondView.backgroundColor = .green
diamondView.layer.masksToBounds = true
v.addSubview(diamondView)
cornerRadius = CGFloat(0.5*max(diamondView.frame.width,
                               diamondView.frame.height))
diamondView.addCornerRadiusAnimation(from: 0, to: cornerRadius, duration: 5)

score 0 · Accepted Answer

0

您提到宽度和高度为 185.5，但您将宽度约束保持为 350。

于 2017-03-14T12:42:20.047 回答

score 0 · Accepted Answer

如果您不想继续使用 viewDidLayout，您可以在设置角半径之前简单地通过添加 .layoutIfNeeded() 来实现这一点。

yourCircleView.layoutIfNeeded()
yourCircleView.layer.cornerRadius = yourCircleView.frame.size.width/2

score 0 · Accepted Answer

如果仍然失败，在 Xcode 中删除所有（ALL）约束并在 Cell Class 中添加以下内容：

override func awakeFromNib() {
    super.awakeFromNib()        
    userImageView.layoutIfNeeded()
    userImageView.layer.cornerRadius = userImageView.frame.size.width / 2
    userImageView.layer.masksToBounds = true
    userImageView.clipsToBounds = true

}

uiview - 圆形 UIView 不是一个完整的圆圈

4 回答 4

Related

Reference