CODEWITHSUNDEEP
swiftxcodeuitextfield
Rey Bruno
Rey Bruno

Reputation: 363

Is possible make a UITextField like this?

Situation: I want to use a custom UITextField class for my textField in a xcode project. I want to the textField look like this:

My text field

I had no problems in making the edges rounded, and change the color of my placeholder, but I have no idea how to keep the bottom edges flat and draw a black border only on the bottom.

This is my code: 

import UIKit

class GrayTextField: UITextField {
    override func awakeFromNib() {
        super.awakeFromNib()
        backgroundColor = .grayf1f1f1
        layer.borderWidth = 1
        layer.borderColor = UIColor.black.cgColor
        layer.cornerRadius = 10
        clipsToBounds = true
    }

    override var placeholder: String? {
        didSet {
            let attributes = [ NSAttributedString.Key.foregroundColor: UIColor.black, NSAttributedString.Key.font : UIFont.systemFont(ofSize: 16, weight: .thin)]
            attributedPlaceholder = NSAttributedString(string: placeholder ?? "", attributes: attributes)
        }
    }
}

And my current result:

Current result

Upvotes: 1

Views: 244

Answers (2)

McDonal_11
McDonal_11

Reputation: 4075

In your answer, still there is some issue in bottom left and right corner.

To achieve exact result, change your UITextField Border Style to No Border.

enter image description here

Padding for Text:

class GrayTextField: UITextField {

    let padding = UIEdgeInsets(top: 0, left: 15, bottom: 0, right: 5)

    ..... Your Exact Code .....

    override open func textRect(forBounds bounds: CGRect) -> CGRect {
        return bounds.inset(by: padding)
    }

    override open func placeholderRect(forBounds bounds: CGRect) -> CGRect {
        return bounds.inset(by: padding)
    }

    override open func editingRect(forBounds bounds: CGRect) -> CGRect {
        return bounds.inset(by: padding)
    }
}

OutPut

enter image description here

Upvotes: 2

Rey Bruno
Rey Bruno

Reputation: 363

Well, after some researching, i do it. Here if my final code:

import UIKit

class GrayTextField: UITextField {
    override func awakeFromNib() {
        super.awakeFromNib()
        backgroundColor = .grayf1f1f1
        clipsToBounds = true

        let maskPath = UIBezierPath(roundedRect: self.bounds,
                                    byRoundingCorners: [.topLeft, .topRight],
                                    cornerRadii: CGSize(width: 10.0, height: 10.0))

        let shape = CAShapeLayer()
        shape.path = maskPath.cgPath
        layer.mask = shape

        addBottomBorder(with: .darkGray, andWidth: 1)
    }


    override var placeholder: String? {
        didSet {
            let attributes = [ NSAttributedString.Key.foregroundColor: UIColor.black, NSAttributedString.Key.font : UIFont.systemFont(ofSize: 16, weight: .thin)]
            attributedPlaceholder = NSAttributedString(string: placeholder ?? "", attributes: attributes)
        }
    }

    func addBottomBorder(with color: UIColor?, andWidth borderWidth: CGFloat) {
        let border = UIView()
        border.backgroundColor = color
        border.autoresizingMask = [.flexibleWidth, .flexibleTopMargin]
        border.frame = CGRect(x: 0, y: frame.size.height - borderWidth, width: frame.size.width, height: borderWidth)
        addSubview(border)
    }
}

And this is the result:

result

Upvotes: 0

Related Questions