-1

How can i customise my textfield like this

joec
  • 1
  • 3

3 Answers3

1

Answer for this question contains two parts. First one i related to the part of question "How to put it in a sigle file". To do this you can make a class:

class MyTextFiled: UITextField {

    override func awakeFromNib() {
       super.awakeFromNib()

    // additional code to make UITextField looking according to your needs
    //placeholder    
       self.text = "Placeholder"
       self.textColor = UIColor.lightGrayColor()

    // bottom line instead of border

}

and than click on the TextField in Interface builder and use Identity inspector to set Custom Class to MyTextField. Now you will see in run time that TextField is presented as defined in the class.

Second part is related to look of border. You have few answers here on stackoverflow covering that topic and it is all about drawing on self.layer. For example: UITextField Only Top And Bottom Border

Take a look to Text View (UITextView) Placeholder Swift too...

Kerberos
  • 4,036
  • 3
  • 36
  • 55
tosha
  • 168
  • 1
  • 8
1

You can do this in a lot of ways.

First, you can subclass UITextField and use the subclass all the time:

@IBDesignable
class CustomTextField: UITextField {
    override func drawRect(rect: CGRect) {
        super.drawRect(rect)
        // do your custom drawing here...
    }
}

override func awakeFromNib() {
    super.awakeFromNib()
    // initialize properties here...
}

However, if you don't need to draw custom stuff, you can try playing around with appearance(). For example, put this in applicationDidFinishLaunchingWithOptions and it will set all text field's background color to blue:

UITextField.appearance().backgroundColor = UIColor.blueColor()

Just by looking at the screenshot you provided, it is unclear how exactly you want your text field to look like. Is the white padding around the placeholder text a part of the text field? Is the grey border also a part of the text field? It is very unclear. But I think the first method is probably more suitable in this situation.

P.S. Your text field looks material, maybe you can try out the text field view in MaterialKit.

Sweeper
  • 213,210
  • 22
  • 193
  • 313
0
import UIKit

class MyTextField: UITextField {

  override func drawRect(rect: CGRect) {

    let startingPoint   = CGPoint(x: rect.minX, y: rect.maxY)
    let endingPoint     = CGPoint(x: rect.maxX, y: rect.maxY)

    let path = UIBezierPath()

    path.moveToPoint(startingPoint)
    path.addLineToPoint(endingPoint)
    path.lineWidth = 3.0

    tintColor.setStroke()

    path.stroke()
  }
}
Kerberos
  • 4,036
  • 3
  • 36
  • 55
joec
  • 1
  • 3