为什么我的自定义UITextField在Interface Builder上与在设备上运行时看起来有所不同？

Question

Hi everyone I'm a bit new to swift .

I wanna subclass UITextField and add extra features in order to create my own new TextField , I've modified TextField's border by creating aa new instance of CALayer to create a new underline border so

I'm running problem with my textfield that is my TextField looks like different in InterfaceBuild VS when running on device as shown below in photo ?

I've tried to called setborder func in prepareForInterfaceBuilder but that didn't work for me so my first question is what should i do to fix this problem ?

the second what is the difference between calling my func setborder in init func vs draw func ?

TextFieldPhoto attributes inspector thanks in advance

import FontAwesome_swift

@IBDesignable
class NewUITextField: UITextField {


    override init(frame: CGRect) {
        super.init(frame: frame)
        setBorder()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        setBorder()

    }


    override func leftViewRect(forBounds bounds: CGRect) -> CGRect {

        var txtRec = super.leftViewRect(forBounds: bounds)

        txtRec.origin.x += leftPadding

        return txtRec
    }




    override func textRect(forBounds bounds: CGRect) -> CGRect {

        return bounds.inset(by: UIEdgeInsets(top: 0, left: 35, bottom: 0, right: 0))
    }

    override func placeholderRect(forBounds bounds: CGRect) -> CGRect {

        return bounds.inset(by: UIEdgeInsets(top: 0, left: 35, bottom: 0, right: 0))
    }

    override func editingRect(forBounds bounds: CGRect) -> CGRect {
        return bounds.inset(by: UIEdgeInsets(top: 0, left: 35, bottom: 0, right: 0))
    }


    @IBInspectable  var leftPadding : CGFloat  = 0


    @IBInspectable  var borderColor :UIColor = UIColor.lightGray {

        didSet{

            setBorder()

        }
    }

    @IBInspectable  var borderWidth : CGFloat = 0.4 {

        didSet{
            setBorder()
        }
    }


    @IBInspectable  var leftImage : UIImage? {

        didSet{
            setleftImage()
        }
    }



    func setBorder()  {


        let border = CALayer()

        let width = CGFloat(self.borderWidth)


        border.borderColor =  self.borderColor.cgColor    //UIColor.lightGray.cgColor

        border.frame = CGRect(x: 0, y: self.frame.size.height - width, width: self.frame.size.width, height: self.frame.size.height)

        border.borderWidth = width

        self.borderStyle = .none

        self.layer.addSublayer(border)

        self.layer.masksToBounds = true




    }


    func setleftImage()  {

        if let img = leftImage{

            self.leftViewMode = .always

            let imgView = UIImageView(frame: CGRect(x: 0, y: 0, width: 20, height: 20))

            imgView.image = img


            imgView.contentMode = .scaleAspectFit

            imgView.tintColor = UIColor.lightGray

            self.leftView = imgView

        }
        else {

            self.leftViewMode = .never

            self.leftView = nil
        }
    }


    override func prepareForInterfaceBuilder() {
        setBorder()
    }

}

Answer 1

hi i am getting expected output in interface builder, without changing any code given by you.

please check attached image

and For getting the same please check below image of attribute inspector has Up to date status as shown in image

if you don't get Up To date status then please select Editor -> Refresh All Views from menu

also make sure you have deselected few option to see expected o/p from Editor -> Canvas -> Show Layout Rectangles and Show Bound Rectangles