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

how to make Designable UIImage in Swift(如何在 Swift 中制作可设计的 UIImage)

问题描述

我是初学者.我想制作一个 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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！