如何在 Swift 中制作可设计的 UIImage [英] how to make Designable UIImage in Swift

问题描述

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

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

导入 UIKit@IBDesignable类DesignableButton:UIButton {@IBInspectable var cornerRadiusOfButton : CGFloat = 0 {设置{layer.cornerRadius =cornerRadiusOfButton}}@IBInspectable var borderWidth: CGFloat {放 {layer.borderWidth = newValue}得到 {返回 layer.borderWidth}}@IBInspectable var borderColor: UIColor?{放 {守卫让 uiColor = newValue else { return }layer.borderColor = uiColor.cgColor}得到 {守卫让颜色 = layer.borderColor else { return nil }返回 UIColor(cgColor: 颜色)}}}

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

//圆角someImage.layer.cornerRadius = checkinPhoto.bounds.width/20someImage.clipsToBounds = true//圆形图片someImage.layer.cornerRadius = someImage.frame.size.width/2someImage.clipsToBounds = true

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

解决方案

你不能使用 UIImage 作为 designable 因为 UIImage 不是 UIView 子类，您需要使 UIImageView 可设计，而 UIImage 不能自己呈现，需要 UIImageView 来呈现p>

使用这个类

导入 UIKit@IBDesignable类 RoundableImageView: UIImageView {@IBInspectable varcornerRadius:CGFloat = 0.0{设置{self.applyCornerRadius()}}@IBInspectable var borderColor : UIColor = UIColor.clear{设置{self.applyCornerRadius()}}@IBInspectable var borderWidth : Double = 0{设置{self.applyCornerRadius()}}@IBInspectable var 循环:Bool = false{设置{self.applyCornerRadius()}}函数应用角半径(){如果(自我.循环){self.layer.cornerRadius = self.bounds.size.height/2self.layer.masksToBounds = trueself.layer.borderColor = self.borderColor.cgColorself.layer.borderWidth = CGFloat(self.borderWidth)}别的 {self.layer.cornerRadius = 角半径self.layer.masksToBounds = trueself.layer.borderColor = self.borderColor.cgColorself.layer.borderWidth = CGFloat(self.borderWidth)}}覆盖 func awakeFromNib() {super.awakeFromNib()self.applyCornerRadius()}覆盖 func layoutSubviews() {super.layoutSubviews()应用角半径()}}

I am a beginner. I want to make a swift file that contains a code to make Designable UIImage, so I will not edit the UI element display by coding, just in Interface builder by assigning this swift file to UI class.

I can do something similar in UIButton, for example if i want to make round corner and add border to UIButton i can do something like this

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


}

for UIImage, usually we want to add round corner or to make circular UIImage by using this code

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

how to make those code to @IBDesignable code class for UIImage like Designable UIButton above? I have tried to make by subclassing UIImage, but i don't why i can't access layer and clipToBounds

解决方案

You can't use UIImage as designable because UIImage is not a UIView subclass you need to make designable your UIImageView instead, the UIImage can't be rendered by itself needs a UIImageView to be rendered

Use this 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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！