chronotruck / FlagPhoneNumber

A formatted phone number UITextField with country flag picker.
Apache License 2.0
437 stars 318 forks source link

Textfield bottom border #120

Open texyz opened 5 years ago

texyz commented 5 years ago

Please how do i create a bottom border for the textfield

ambrusha commented 4 years ago

@IBOutlet weak var phoneNumberTextField: FPNTextField!

override func viewDidLoad() { phoneNumberTextField.addBorder(edges: .bottom, width: 2, color: borderColor) }

func addBorders(edges: UIRectEdge, width: CGFloat, color: UIColor) {

    func createBorder() -> UIView {
        let borderView = UIView(frame: CGRect.zero)
        borderView.translatesAutoresizingMaskIntoConstraints = false
        borderView.backgroundColor = color
        return borderView
    }

    if (edges.contains(.all) || edges.contains(.top)) {
        let topBorder = createBorder()
        addSubview(topBorder)
        NSLayoutConstraint.activate([
            topBorder.topAnchor.constraint(equalTo: topAnchor),
            topBorder.leadingAnchor.constraint(equalTo: leadingAnchor),
            topBorder.trailingAnchor.constraint(equalTo: trailingAnchor),
            topBorder.heightAnchor.constraint(equalToConstant: width)
            ])
    }
    if (edges.contains(.all) || edges.contains(.left)) {
        let leftBorder = createBorder()
        addSubview(leftBorder)
        NSLayoutConstraint.activate([
            leftBorder.topAnchor.constraint(equalTo: topAnchor),
            leftBorder.bottomAnchor.constraint(equalTo: bottomAnchor),
            leftBorder.leadingAnchor.constraint(equalTo: leadingAnchor),
            leftBorder.widthAnchor.constraint(equalToConstant: width)
            ])
    }
    if (edges.contains(.all) || edges.contains(.right)) {
        let rightBorder = createBorder()
        addSubview(rightBorder)
        NSLayoutConstraint.activate([
            rightBorder.topAnchor.constraint(equalTo: topAnchor),
            rightBorder.bottomAnchor.constraint(equalTo: bottomAnchor),
            rightBorder.trailingAnchor.constraint(equalTo: trailingAnchor),
            rightBorder.widthAnchor.constraint(equalToConstant: width)
            ])
    }
    if (edges.contains(.all) || edges.contains(.bottom)) {
        let bottomBorder = createBorder()
        addSubview(bottomBorder)
        NSLayoutConstraint.activate([
            bottomBorder.bottomAnchor.constraint(equalTo: bottomAnchor),
            bottomBorder.leadingAnchor.constraint(equalTo: leadingAnchor),
            bottomBorder.trailingAnchor.constraint(equalTo: trailingAnchor),
            bottomBorder.heightAnchor.constraint(equalToConstant: width)
            ])
    }
}`
KevinGiacomino commented 4 years ago

The @ambrusha codes works well. If you are using SWIFT you can make an extension of FPNTextField to use it :


extension FPNTextField
    {
    func addBorders(edges: UIRectEdge, width: CGFloat, color: UIColor)
        {
        /**-----------------------------------------------
         */
        func createBorder() -> UIView
            {
            let borderView = UIView(frame: CGRect.zero)
            borderView.translatesAutoresizingMaskIntoConstraints = false
            borderView.backgroundColor = color
            return borderView
            }

        /**-----------------------------------------------
         * TOP BORDER :
         */
        if (edges.contains(.all) || edges.contains(.top))
            {
            let topBorder = createBorder()
            addSubview(topBorder)
            NSLayoutConstraint.activate([
                topBorder.topAnchor.constraint(equalTo: topAnchor),
                topBorder.leadingAnchor.constraint(equalTo: leadingAnchor),
                topBorder.trailingAnchor.constraint(equalTo: trailingAnchor),
                topBorder.heightAnchor.constraint(equalToConstant: width)
                ])
            }
        /**-----------------------------------------------
         * LEFT BORDER :
         */
        if (edges.contains(.all) || edges.contains(.left))
            {
            let leftBorder = createBorder()
            addSubview(leftBorder)
            NSLayoutConstraint.activate([
                leftBorder.topAnchor.constraint(equalTo: topAnchor),
                leftBorder.bottomAnchor.constraint(equalTo: bottomAnchor),
                leftBorder.leadingAnchor.constraint(equalTo: leadingAnchor),
                leftBorder.widthAnchor.constraint(equalToConstant: width)
                ])
            }
        /**-----------------------------------------------
         * RIGHT BORDER :
         */
        if (edges.contains(.all) || edges.contains(.right))
            {
            let rightBorder = createBorder()
            addSubview(rightBorder)
            NSLayoutConstraint.activate([
                rightBorder.topAnchor.constraint(equalTo: topAnchor),
                rightBorder.bottomAnchor.constraint(equalTo: bottomAnchor),
                rightBorder.trailingAnchor.constraint(equalTo: trailingAnchor),
                rightBorder.widthAnchor.constraint(equalToConstant: width)
                ])
            }
        /**-----------------------------------------------
         * BOTTOM BORDER :
         */
        if (edges.contains(.all) || edges.contains(.bottom))
            {
            let bottomBorder = createBorder()
            addSubview(bottomBorder)
            NSLayoutConstraint.activate([
                bottomBorder.bottomAnchor.constraint(equalTo: bottomAnchor),
                bottomBorder.leadingAnchor.constraint(equalTo: leadingAnchor),
                bottomBorder.trailingAnchor.constraint(equalTo: trailingAnchor),
                bottomBorder.heightAnchor.constraint(equalToConstant: width)
                ])
            }
        }
    }