single border for UITextField within a UIcollectionViewCell (swift 3 xcode)

Question

I'm trying to apply a single bottom border to a textField that sits within one of my collectionViewCells. Here is the code:

class AddressCell: UICollectionViewCell {


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


func basicTextField(placeHolderString: String) -> UITextField {
    let textField = UITextField()
    textField.font = UIFont.boldSystemFont(ofSize: 12)
    textField.attributedPlaceholder = NSAttributedString(string: placeHolderString, attributes:[NSForegroundColorAttributeName: UIColor.lightGray, NSFontAttributeName: UIFont.boldSystemFont(ofSize: 12)])
    textField.backgroundColor = UIColor.white
    textField.translatesAutoresizingMaskIntoConstraints = false
    return textField
}

required init?(coder aDecoder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
}

func setupViews() {
    backgroundColor = UIColor.white
    layer.addBorder(edge: UIRectEdge.bottom, color: .black, thickness: 0.5)

    let streetTextfield = basicTextField(placeHolderString: "street")

    addSubview(streetTextfield)
}

}

I am using an extension that enables me to apply a single border, which has worked great so far:

extension CALayer {

func addBorder(edge: UIRectEdge, color: UIColor, thickness: CGFloat) {

    let border = CALayer()

    switch edge {
    case UIRectEdge.top:
        border.frame = CGRect.init(x: 0, y: 0, width: frame.width, height: thickness)
        break
    case UIRectEdge.bottom:
        border.frame = CGRect.init(x: 0, y: frame.height - thickness, width: frame.width, height: thickness)
        break
    case UIRectEdge.left:
        border.frame = CGRect.init(x: 0, y: 0, width: thickness, height: frame.height)
        break
    case UIRectEdge.right:
        border.frame = CGRect.init(x: frame.width - thickness, y: 0, width: thickness, height: frame.height)
        break
    default:
        break
    }

    border.backgroundColor = color.cgColor;

    self.addSublayer(border)
}

}

When i simply add a borderWidth to the textfield like this:

textField.layer.borderWidth = 0.5

I get a border and it renders fine. However, when i apply the extension to add a bottom border, like this:

textField.layer.addBorder(edge: UIRectEdge.bottom, color: .black, thickness: 0.5)

the border doesn't apply for some reason.

Answer 1

I'm not sure about the extension, but I have a working solution for a TextField with a bottom border.

basically create a class BottomBorderedTextField subclassing UITextField and insert the following code:

class BottomBorderedTextField: UITextField {

    override func draw(_ rect: CGRect) {

        super.draw(rect)

        //this is the color of the bottom border. Change to whatever you what
        let color: UIColor = UIColor.rgb(red: 230, green: 230, blue: 230)

        let bottomBorder = CALayer()

        bottomBorder.frame = CGRect(x: 0, y: bounds.size.height - 1, width: bounds.size.width, height: 2)

        bottomBorder.backgroundColor = color.cgColor

        self.layer.addSublayer(bottomBorder)

    }
}

Then on your basicTextField function set the return type to the BottomBorderedTextField class you just made. so your new code will look like:

func basicTextField(placeHolderString: String) -> BottomBorderedTextField {
    let textField = BottomBorderedTextField()
    textField.font = UIFont.boldSystemFont(ofSize: 12)
    textField.attributedPlaceholder = NSAttributedString(string: placeHolderString, attributes:[NSForegroundColorAttributeName: UIColor.lightGray, NSFontAttributeName: UIFont.boldSystemFont(ofSize: 12)])
    textField.backgroundColor = UIColor.white
    textField.translatesAutoresizingMaskIntoConstraints = false
    return textField
}

Answer 2

I wrote a UIView extension that accomplishes the same thing:

extension UIView {

    func addBottomBorder(width: CGFloat, color: UIColor, alpha: CGFloat) {
        let border = CALayer()
        let width = width
        border.borderColor = color.withAlphaComponent(alpha).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.layer.addSublayer(border)
        self.layer.masksToBounds = true
    }
}

Usage:

    usernameField.addBottomBorder(width: 2.0, color: UIColor.white, alpha: 0.5)

Also, seems within setupViews() you're calling:

layer.addBorder... //this is being called on the collection view cells layer

As opposed to:

streetTextfield.layer.addBorder...