Maurice Barbar
Maurice Barbar

Reputation: 47

How do I make my textfields as lines instead of boxes?

This is the desired design for the Textfields:

This is the desired design for the Textfields

This is what I have designed:

This is what I have designed

Do I have to import some libraries or install some pods? Is there a programmatic way to do it?

Upvotes: 0

Views: 104

Answers (3)

Mark Angelo Hernandez
Mark Angelo Hernandez

Reputation: 123

You can use CosmicMind's Material framework and use textfield object. You can install the framework via cocoapods and you can follow the examples they have on the repo.

Upvotes: 0

Ashok R
Ashok R

Reputation: 20766

Below is the code.

@IBOutlet weak var fullName: UITextField!

override func viewDidLoad() {
    super.viewDidLoad()

    let bottomBorder = CALayer()
    bottomBorder.frame = CGRect(x: 0, y: fullName.frame.size.height-1, width: fullName.frame.size.width, height: 1.0)
    bottomBorder.backgroundColor = UIColor.white.cgColor
    fullName.layer.addSublayer(bottomBorder)
}

Output:

enter image description here

Upvotes: 1

iAkshay
iAkshay

Reputation: 1263

In swift, I've achieved it with following code :

class viewController: UIViewController 
{
    @IBOutlet weak var textfield: UITextField!

    let layer : CALayer = CALayer()

    override func viewDidLoad()
    {
         textfield.borderStyle = .none // can do this in xib or storyboard too
         textfield.layer.masksToBounds = true
         layer?.borderColor = UIColor.lightGray.cgColor
         layer?.borderWidth = 1.0
         textfield.layer.addSublayer(layer)
    }

   override func viewDidLayoutSubviews() 
   {

        layer?.frame = CGRect(x: 0,
                               y: textfield.frame.size.height - 1,
                               width:  textfield.frame.size.width,
                               height: 1.0)



    }

}

Upvotes: 0

Related Questions