如何在 Swift 中制作可设计的 UIImage

Question

我是初学者。我想制作一个 swift 文件，其中包含制作可设计 UI 图像的代码，因此我不会通过编码编辑 UI 元素显示，只是在界面生成器中通过分配此 swift 文件到 UI class.

我可以在 UIButton 中做类似的事情，例如，如果我想制作圆角并向 UIButton 添加边框，我可以做这样的事情

import UIKit

@IBDesignable
class DesignableButton: UIButton {

    @IBInspectable var cornerRadiusOfButton : CGFloat = 0 {
        didSet {
            layer.cornerRadius = cornerRadiusOfButton
        }
    }

    @IBInspectable var borderWidth: CGFloat {
        set {
            layer.borderWidth = newValue
        }
        get {
            return layer.borderWidth
        }
    }

    @IBInspectable var borderColor: UIColor? {
        set {
            guard let uiColor = newValue else { return }
            layer.borderColor = uiColor.cgColor
        }
        get {
            guard let color = layer.borderColor else { return nil }
            return UIColor(cgColor: color)
        }
    }


}

对于UI图片，通常我们想添加圆角或者制作圆形UI图片，使用这段代码

// round corner
        someImage.layer.cornerRadius = checkinPhoto.bounds.width/20
        someImage.clipsToBounds = true

 //  circular image
        someImage.layer.cornerRadius = someImage.frame.size.width / 2
        someImage.clipsToBounds = true

如何将这些代码制作成@IBDesignable 代码class for UIImage like Designable UIButton above？我尝试通过子classing UI图像来制作，但我不明白为什么我无法访问layer和clipToBounds

Answer 1

您不能将 UIImage 用作 designable，因为 UIImage 不是 UIView subclass，您需要将 UIImageView 设为 designable， UIImage 不能自己渲染需要 UIImageView 来渲染

使用这个class

import UIKit

@IBDesignable
class RoundableImageView: UIImageView {

    @IBInspectable var cornerRadius : CGFloat = 0.0{
        didSet{
            self.applyCornerRadius()
        }
    }

    @IBInspectable var borderColor : UIColor = UIColor.clear{
        didSet{
            self.applyCornerRadius()
        }
    }

    @IBInspectable var borderWidth : Double = 0{
        didSet{
            self.applyCornerRadius()
        }
    }

    @IBInspectable var circular : Bool = false{
        didSet{
            self.applyCornerRadius()
        }
    }

    func applyCornerRadius()
    {
        if(self.circular) {
            self.layer.cornerRadius = self.bounds.size.height/2
            self.layer.masksToBounds = true
            self.layer.borderColor = self.borderColor.cgColor
            self.layer.borderWidth = CGFloat(self.borderWidth)
        }else {
            self.layer.cornerRadius = cornerRadius
            self.layer.masksToBounds = true
            self.layer.borderColor = self.borderColor.cgColor
            self.layer.borderWidth = CGFloat(self.borderWidth)
        }
    }

    override func awakeFromNib() {
        super.awakeFromNib()
        self.applyCornerRadius()
    }

    override func layoutSubviews() {
        super.layoutSubviews()
        applyCornerRadius()
    }

}

如何在 Swift 中制作可设计的 UIImage

how to make Designable UIImage in Swift

uiimageview

uiimage

ios

swift

ibdesignable