Search code examples
iosiphoneipadautolayout

UITextField border with AutoLayout is flickering


I am designing screen like a form, containing few UITextFields using AutoLayout. I wanted to set border only at bottom of the UITextFields. I have set border using CALayer. But UITextField occupies its height(after autolayout is applied to it) in method viewDidAppear, so adding border to UITextField in viewDidAppear makes it appear as if its flickering. So Is there any other way to set border to UITextFeild at bottom with AutoLayout.


Solution

  • class CustomTextField: UITextField {
    
    required init(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)!
        self.commonInit()
    }
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        self.commonInit()
    }
    
    func commonInit() {
        self.borderStyle = .none //To remove default border.
    
        let bottomBorder = UIView()
        bottomBorder.frame.size = CGSize(width: self.frame.size.width, height: 1)
        bottomBorder.frame.origin = CGPoint(x: 0, y: self.frame.size.height - 1)
        bottomBorder.backgroundColor = UIColor.lightGray
        bottomBorder.autoresizingMask = [.flexibleWidth, .flexibleTopMargin]
        self.addSubview(bottomBorder)
    }
    

    }

    Finally i achieved it by creating CustomUITextField with AutoLayout. Just apply above class to your UITextField in interface builder.