将角半径应用于 Storyboard 内的特定 UIView 角不适用于所有角

Posted 2023-03-12

【中文标题】将角半径应用于 Storyboard 内的特定 UIView 角不适用于所有角

【英文标题】：Applying corner radius to a specific UIView corner inside Storyboard does not work for all corners

【发布时间】：2019-05-30 17:42:37

【问题描述】：

我为此创建了一个自定义类。但它仅适用于左上角，不适用于其他：

@IBDesignable
public class RoundedView: UIView 

    @IBInspectable public var topLeft: Bool = false
    @IBInspectable public var topRight: Bool = false
    @IBInspectable public var bottomLeft: Bool = false
    @IBInspectable public var bottomRight: Bool = false
    @IBInspectable public var cornerRadius: Int = 0

    public override func awakeFromNib() 
        var options = UIRectCorner()

        if topLeft  options =  options.union(.topLeft) 
        if topRight  options =  options.union(.topRight) 
        if bottomLeft  options =  options.union(.bottomLeft) 
        if bottomRight  options =  options.union(.bottomRight) 

        let path = UIBezierPath(roundedRect:self.bounds,
                                byRoundingCorners:options,
                                cornerRadii: CGSize(width: cornerRadius, height: cornerRadius))

        let maskLayer = CAShapeLayer()

        maskLayer.path = path.cgPath
        self.layer.mask = maskLayer
    

这是在模拟器中运行时的外观，我为所有 4 个角应用角半径：

这里发生了什么？ TopLeft 工作，TopRight 轻微和底角根本没有。我很困惑。

【问题讨论】：

layoutIfNeeded 我认为它适用于您的 ui 更新

@YogeshPatel - 这将触发 layoutSubviews 被调用，所以除非他将代码移到该方法中，否则调用 layoutIfNeeded 不会做任何事情。而且，顺便说一句，打电话给setNeedsLayout 可能更谨慎（如果你要更新多个角落，你不希望重复调用layoutSubviews）。

是的哇你太棒了@Rob

【参考方案1】：

您应该更新 layoutSubviews 的覆盖中的掩码。随着约束更新视图的frame，layoutSubviews 被调用，所以这是更新掩码的正确位置。

---

顺便说一句，我不鼓励使用awakeFromNib 来配置视图。如果您使用情节提要，它可以正常工作，但以编程方式创建的视图不会调用它。如果您确实想在创建视图时对其进行配置，最好将代码放在由init(frame:) 和init(coder:) 调用的私有配置方法中。这样，它适用于故事板和以编程方式创建的视图。

我还可能建议观察者对可检查属性进行检查，以触发圆角的更新。如果您更改这些属性，您希望圆角自动更新。

---

因此：

@IBDesignable
public class RoundedView: UIView 

    @IBInspectable public var topLeft: Bool = false       didSet  setNeedsLayout()  
    @IBInspectable public var topRight: Bool = false      didSet  setNeedsLayout()  
    @IBInspectable public var bottomLeft: Bool = false    didSet  setNeedsLayout()  
    @IBInspectable public var bottomRight: Bool = false   didSet  setNeedsLayout()  
    @IBInspectable public var cornerRadius: CGFloat = 0   didSet  setNeedsLayout()  

    public override func layoutSubviews() 
        super.layoutSubviews()

        var options = UIRectCorner()

        if topLeft      options.formUnion(.topLeft) 
        if topRight     options.formUnion(.topRight) 
        if bottomLeft   options.formUnion(.bottomLeft) 
        if bottomRight  options.formUnion(.bottomRight) 

        let path = UIBezierPath(roundedRect: bounds,
                                byRoundingCorners: options,
                                cornerRadii: CGSize(width: cornerRadius, height: cornerRadius))

        let maskLayer = CAShapeLayer()

        maskLayer.path = path.cgPath
        layer.mask = maskLayer
    

---

或者，如果针对 ios 11 及更高版本，我们可以让 CoreAnimation 进行舍入：

@IBDesignable
public class RoundedView: UIView 

    @IBInspectable public var topLeft: Bool = false       didSet  updateCorners()  
    @IBInspectable public var topRight: Bool = false      didSet  updateCorners()  
    @IBInspectable public var bottomLeft: Bool = false    didSet  updateCorners()  
    @IBInspectable public var bottomRight: Bool = false   didSet  updateCorners()  
    @IBInspectable public var cornerRadius: CGFloat = 0   didSet  updateCorners()  

    public override init(frame: CGRect = .zero) 
        super.init(frame: frame)
        updateCorners()
    

    required init?(coder aDecoder: NSCoder) 
        super.init(coder: aDecoder)
        updateCorners()
    


private extension RoundedView 
    func updateCorners() 
        var corners = CACornerMask()

        if topLeft      corners.formUnion(.layerMinXMinYCorner) 
        if topRight     corners.formUnion(.layerMaxXMinYCorner) 
        if bottomLeft   corners.formUnion(.layerMinXMaxYCorner) 
        if bottomRight  corners.formUnion(.layerMaxXMaxYCorner) 

        layer.maskedCorners = corners
        layer.cornerRadius = cornerRadius
    

后一种方法的好处是，如果我们碰巧为视图的frame 设置动画，CoreAnimation 将支持我们的圆角：

如果您使用上述layoutSubviews 方法，则必须手动管理动画（例如使用CADisplayLink）。

【讨论】：

感谢有关不使用 awakeFromNib 的提示。