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

Posted 2023-03-15

【中文标题】如何在 Swift 中制作可设计的 UIImage

【英文标题】：how to make Designable UIImage in Swift

【发布时间】：2018-02-07 09:11:47

【问题描述】：

我是初学者。我想制作一个 swift 文件，其中包含制作 Designable UIImage 的代码，所以我不会通过编码来编辑 UI 元素显示，只是在 Interface builder 中通过将此 swift 文件分配给 UI 类。

我可以在 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)
        
    

对于 UIImage，通常我们要添加圆角或使用此代码制作圆形 UIImage

// 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

如何将这些代码制作为 UIImage 的 @IBDesignable 代码类，如上面的 Designable UIButton？我试图通过子类化 UIImage 来制作，但我不知道为什么我无法访问 layer 和 clipToBounds

【参考方案1】：

您不能将UIImage 用作可设计的，因为UIImage 不是UIView 子类，您需要将UIImageView 设为可设计，而UIImage 不能单独呈现，需要@987654326 @ 被渲染

使用这个类

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()
    

【讨论】：

圆形图像怎么样，先生，您能否在代码中添加该功能？