UITextField Grenze nur für die Unterseite

Ich würde gerne verhindern, dass der Rand im unteren Teil nur in UITextField.
Aber ich weiß nicht, wie wir verhindern können, dass es auf der unteren Seite.

Können Sie bitte mir raten?

InformationsquelleAutor der Frage dhaval shah | 2014-11-07

249

Diese Antwort wird perfekt funktionieren, wenn Sie UITextField - Objekt programmgesteuert.

Hinweis: Wenn UITextField - Objekt erstellt wird, in der Storyboard legen Sie dann seine Border Style Eigenschaft None im Storyboard Attributes Inspector.

Folgende variable textField ist ein Objekt der UITextField Steuerelement, in dem die Unterste Grenze festgelegt wird.

Swift-code:

let border = CALayer()
let width = CGFloat(2.0)
border.borderColor = UIColor.darkGray.cgColor
border.frame = CGRect(x: 0, y: textField.frame.size.height - width, width:  textField.frame.size.width, height: textField.frame.size.height)

border.borderWidth = width
textField.layer.addSublayer(border)
textField.layer.masksToBounds = true

Objective-C-Code:

CALayer *border = [CALayer layer];
CGFloat borderWidth = 2;
border.borderColor = [UIColor darkGrayColor].CGColor;
border.frame = CGRectMake(0, textField.frame.size.height - borderWidth, textField.frame.size.width, textField.frame.size.height);
border.borderWidth = borderWidth;
[textField.layer addSublayer:border];
textField.layer.masksToBounds = YES;

Xamarin-code:

 var border = new CALayer();
 nfloat width = 2;
 border.BorderColor = UIColor.Black.CGColor;
 border.Frame = new CoreGraphics.CGRect(0, textField.Frame.Size.Height - width, textField.Frame.Size.Width, textField.Frame.Size.Height);
 border.BorderWidth = width;
 textField.Layer.AddSublayer(border);
 textField.Layer.MasksToBounds = true;

Edit:

Viele Benutzer hatten ein problem mit Auto-Layout und einige Leute nicht in der Lage waren zu erbringen die UITextField-Grenze. Hier ist die Lösung:

Wenn du schreibst folgenden code in viewDidLoad() Methode als die Zeit, die Sie nicht bekommen Rahmen für textField, So dass der Rand nicht richtig dargestellt.

Korrekte Rahmen für die Grenze Überschreiben viewDidLayoutSubviews() - code schreiben.

viewDidLayoutSubviews() Methode wird aufgerufen, nachdem alle Untersichten sind geladen in den Blick.

Vergessen Sie nicht, dass diese Methode mehrfach aufgerufen wird, und es ist nicht ein Teil der ViewController Lebenszyklus, also seien Sie vorsichtig, während Sie diese.

InformationsquelleAutor der Antwort Kampai

Wenn Sie wollen, zu tun ohne zu wissen, frames vorher und ohne Unterklassen:

Swift 4 /Swift 3.x

extension UITextField {
  func setBottomBorder() {
    self.borderStyle = .none
    self.layer.backgroundColor = UIColor.white.cgColor

    self.layer.masksToBounds = false
    self.layer.shadowColor = UIColor.gray.cgColor
    self.layer.shadowOffset = CGSize(width: 0.0, height: 1.0)
    self.layer.shadowOpacity = 1.0
    self.layer.shadowRadius = 0.0
  }
}

Ruf als yourTextField.setBottomBorder() von überall aus, ohne dass der Rahmen zu Recht.

Das Ergebnis sieht wie folgt aus:

InformationsquelleAutor der Antwort sasquatch

Können Sie erstellen eine Unterklasse der UITextField wie unten gezeigt:

class TextField : UITextField {

    override var tintColor: UIColor! {

        didSet {
            setNeedsDisplay()
        }
    }

    override func draw(_ rect: CGRect) {

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

        let path = UIBezierPath()

        path.move(to: startingPoint)
        path.addLine(to: endingPoint)
        path.lineWidth = 2.0

        tintColor.setStroke()

        path.stroke()
    }
}

InformationsquelleAutor der Antwort user1046037

 extension UITextField
{  
  func setBottomBorder(color:String)
  {
    self.borderStyle = UITextBorderStyle.None;
    let border = CALayer()
    let width = CGFloat(1.0)
    border.borderColor = UIColor(hexString: color)!.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
   }

}

dann nur dazu:

yourTextField.setBottomBorder(color: "#3EFE46")

InformationsquelleAutor der Antwort idris yıldız

UITextField Grenze nur für die Unterseite

Objective C

        [txt.layer setBackgroundColor: [[UIColor whiteColor] CGColor]];
        [txt.layer setBorderColor: [[UIColor grayColor] CGColor]];
        [txt.layer setBorderWidth: 0.0];
        [txt.layer setCornerRadius:12.0f];
        [txt.layer setMasksToBounds:NO];
        [txt.layer setShadowRadius:2.0f];
        txt.layer.shadowColor = [[UIColor blackColor] CGColor];
        txt.layer.shadowOffset = CGSizeMake(1.0f, 1.0f);
        txt.layer.shadowOpacity = 1.0f;
        txt.layer.shadowRadius = 1.0f;

Swift

        txt.layer.backgroundColor = UIColor.white.cgColor
        txt.layer.borderColor = UIColor.gray.cgColor
        txt.layer.borderWidth = 0.0
        txt.layer.cornerRadius = 5
        txt.layer.masksToBounds = false
        txt.layer.shadowRadius = 2.0
        txt.layer.shadowColor = UIColor.black.cgColor
        txt.layer.shadowOffset = CGSize.init(width: 1.0, height: 1.0)
        txt.layer.shadowOpacity = 1.0
        txt.layer.shadowRadius = 1.0

InformationsquelleAutor der Antwort Mitul Marsoniya

Ist keine dieser Lösungen wirklich meine Erwartungen erfüllt. Ich wollte Unterklasse die TextField-da ich nicht möchte, um die Grenze manuell die ganze Zeit. Ich wollte auch ändern Sie die Rahmenfarbe z.B. für einen Fehler. Also hier ist meine Lösung mit Anchors:

class CustomTextField: UITextField {

    var bottomBorder = UIView()

    override func awakeFromNib() {

            //Setup Bottom-Border

            self.translatesAutoresizingMaskIntoConstraints = false

            bottomBorder = UIView.init(frame: CGRect(x: 0, y: 0, width: 0, height: 0))
            bottomBorder.backgroundColor = UIColor(rgb: 0xE2DCD1) //Set Border-Color
            bottomBorder.translatesAutoresizingMaskIntoConstraints = false

            addSubview(bottomBorder)

            bottomBorder.bottomAnchor.constraint(equalTo: bottomAnchor).isActive = true
            bottomBorder.leftAnchor.constraint(equalTo: leftAnchor).isActive = true
            bottomBorder.rightAnchor.constraint(equalTo: rightAnchor).isActive = true
            bottomBorder.heightAnchor.constraint(equalToConstant: 1).isActive = true //Set Border-Strength

    }
}

---- Optional ----

Ändern Sie die Farbe hinzufügen sth wie dies für die CustomTextField Class:

@IBInspectable var hasError: Bool = false {
    didSet {

        if (hasError) {

            bottomBorder.backgroundColor = UIColor.red

        } else {

            bottomBorder.backgroundColor = UIColor(rgb: 0xE2DCD1)

        }

    }
}

Und zum auslösen des Fehlers rufen Sie diese nach der Erstellung einer Instanz von CustomTextField

textField.hasError = !textField.hasError

UITextField Grenze nur für die Unterseite

Hoffe es hilft jemandem 😉

InformationsquelleAutor der Antwort inf1783

Auf Swift-3. Sie können erstellen Sie eine Erweiterung und fügen Sie nach Ihrer Ansicht Klasse.

extension UITextField
{
    func setBottomBorder(borderColor: UIColor)
    {

        self.borderStyle = UITextBorderStyle.none
        self.backgroundColor = UIColor.clear
        let width = 1.0

        let borderLine = UIView()
        borderLine.frame = CGRect(x: 0, y: Double(self.frame.height) - width, width: Double(self.frame.width), height: width)

        borderLine.backgroundColor = borderColor
        self.addSubview(borderLine)
    }
}

InformationsquelleAutor der Antwort afrodev

Können Sie erstellen, die diese Erweiterung außerhalb der Klasse, und ersetzen Sie Breite, mit was auch immer borderWidth Sie wollen -

extension UITextField
{
    func setBottomBorder(borderColor: UIColor)
    {
        self.borderStyle = UITextBorderStyle.None
        self.backgroundColor = UIColor.clearColor()
        let width = 1.0

        let borderLine = UIView(frame: CGRectMake(0, self.frame.height - width, self.frame.width, width))
        borderLine.backgroundColor = borderColor
        self.addSubview(borderLine)
    }
}

und dann fügen Sie diese zu Ihrem viewDidLoad ersetzen yourTextField mit Ihrem UITextField-variable und eine beliebige Farbe, die Sie wollen in der Grenze

yourTextField.setBottomBorder(UIColor.blackColor())

Diesem Grunde fügt eine Ansicht mit, dass die Farbe am unteren Rand des Textfeld.

InformationsquelleAutor der Antwort Rishabh Wadhwa

Was ich Tat, war zu erstellen, die eine Erweiterung UITextField und fügte hinzu, eine Designer-editable-Eigenschaft. Das einstellen dieser Eigenschaft auf eine beliebige Farbe ändern würde, die Grenze (unten), die Farbe (andere Einstellung Grenzen none).

Da dies auch eine änderung der Platzhalter-text Farbe, ich habe auch Hinzugefügt, dass zu der Erweiterung.

    extension UITextField {

    @IBInspectable var placeHolderColor: UIColor? {
        get {
            return self.placeHolderColor
        }
        set {
            self.attributedPlaceholder = NSAttributedString(string:self.placeholder != nil ? self.placeholder! : "", attributes:[NSForegroundColorAttributeName: newValue!])
        }
    }


    @IBInspectable var bottomBorderColor: UIColor? {
        get {
            return self.bottomBorderColor
        }
        set {
            self.borderStyle = UITextBorderStyle.None;
            let border = CALayer()
            let width = CGFloat(0.5)
            border.borderColor = newValue?.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

        }
    }
}

InformationsquelleAutor der Antwort Krishna Vedula

Hier ist swift3 code mit @IBInspectable

erstellen Sie eine neue Datei Cocoa Touch Class Swift-Datei

import UIKit


extension UIView {

@IBInspectable var cornerRadius: CGFloat {
    get {
        return layer.cornerRadius
    }
    set {
        layer.cornerRadius = newValue
        layer.masksToBounds = newValue > 0
    }
}

@IBInspectable var borderWidth: CGFloat {
    get {
        return layer.borderWidth
    }
    set {
        layer.borderWidth = newValue
    }
}

@IBInspectable var borderColor: UIColor? {
    get {
        return UIColor(cgColor: layer.borderColor!)
    }
    set {
        layer.borderColor = newValue?.cgColor
    }
}

@IBInspectable var leftBorderWidth: CGFloat {
    get {
        return 0.0   //Just to satisfy property
    }
    set {
        let line = UIView(frame: CGRect(x: 0.0, y: 0.0, width: newValue, height: bounds.height))
        line.translatesAutoresizingMaskIntoConstraints = false
        line.backgroundColor = UIColor(cgColor: layer.borderColor!)
       line.tag = 110
        self.addSubview(line)

        let views = ["line": line]
        let metrics = ["lineWidth": newValue]
        addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "|[line(==lineWidth)]", options: [], metrics: metrics, views: views))
        addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|[line]|", options: [], metrics: nil, views: views))
    }
}

@IBInspectable var topBorderWidth: CGFloat {
    get {
        return 0.0   //Just to satisfy property
    }
    set {
        let line = UIView(frame: CGRect(x: 0.0, y: 0.0, width: bounds.width, height: newValue))
        line.translatesAutoresizingMaskIntoConstraints = false
        line.backgroundColor = borderColor
       line.tag = 110
        self.addSubview(line)

        let views = ["line": line]
        let metrics = ["lineWidth": newValue]
        addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "|[line]|", options: [], metrics: nil, views: views))
        addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|[line(==lineWidth)]", options: [], metrics: metrics, views: views))
    }
}

@IBInspectable var rightBorderWidth: CGFloat {
    get {
        return 0.0   //Just to satisfy property
    }
    set {
        let line = UIView(frame: CGRect(x: bounds.width, y: 0.0, width: newValue, height: bounds.height))
        line.translatesAutoresizingMaskIntoConstraints = false
        line.backgroundColor = borderColor
       line.tag = 110
        self.addSubview(line)

        let views = ["line": line]
        let metrics = ["lineWidth": newValue]
        addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "[line(==lineWidth)]|", options: [], metrics: metrics, views: views))
        addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|[line]|", options: [], metrics: nil, views: views))
    }
}
@IBInspectable var bottomBorderWidth: CGFloat {
    get {
        return 0.0   //Just to satisfy property
    }
    set {
        let line = UIView(frame: CGRect(x: 0.0, y: bounds.height, width: bounds.width, height: newValue))
        line.translatesAutoresizingMaskIntoConstraints = false
        line.backgroundColor = borderColor
      line.tag = 110
        self.addSubview(line)

        let views = ["line": line]
        let metrics = ["lineWidth": newValue]
        addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "|[line]|", options: [], metrics: nil, views: views))
        addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:[line(==lineWidth)]|", options: [], metrics: metrics, views: views))
    }
}
 func removeborder() {
      for view in self.subviews {
           if view.tag == 110  {
                view.removeFromSuperview()
           }

      }
 }

}

und ersetzen Sie die Datei mit dem code unten und Sie erhalten die Möglichkeit, sich in der storyboard-Attribut-Inspektor wie diese

UITextField Grenze nur für die Unterseite

Genießen 🙂

InformationsquelleAutor der Antwort Azharhussain Shaikh

* * * * Hier myTF ist die Steckdose für den MT-TEXT-FELD **

        let border = CALayer()
        let width = CGFloat(2.0)
        border.borderColor = UIColor.darkGray.cgColor
        border.frame = CGRect(x: 0, y: self.myTF.frame.size.height - width, width:  self.myTF.frame.size.width, height: self.myTF.frame.size.height)

        border.borderWidth = width
        self.myTF.layer.addSublayer(border)
        self.myTF.layer.masksToBounds = true

InformationsquelleAutor der Antwort Sai kumar Reddy

0

können Sie ein Bild erstellen für die untere Grenze und legen Sie es auf dem hintergrund der UITextField :
```
 yourTextField.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"yourBorderedImageName"]];
```
oder legen Sie die borderStyle auf none, und stellen image der Zeile genau die gleiche Länge zu textfield!

InformationsquelleAutor der Antwort Saurabh Prajapati

-1

Können Sie diese ORGANISIERT und kann auch ANPASSEN diese extension weiter:

"Ein Line-Implementierung" viewDidAppear(so dass die frame-Größe wird richtig sein):

//Add layer in your textfield    
yourTextField.addLayer(.bottom).addPadding(.left)


//Extension
    extension UITextField {

    enum Position {
        case up, bottom, right, left
    }

    // MARK: - Add Single Line Layer
    func addLayer(_ position: Position) -> UITextField {

        //bottom layer
        let bottomLayer = CALayer()
        //set width
        let height = CGFloat(1.0)
        bottomLayer.borderWidth = height
        //set color
        bottomLayer.borderColor = UIColor.white.cgColor
        //set frame
        //y position changes according to the position
        let yOrigin = position == .up ? 0.0 : frame.size.height - height
        bottomLayer.frame = CGRect.init(x: 0, y: yOrigin, width: frame.size.width, height: height)
        layer.addSublayer(bottomLayer)
        layer.masksToBounds = true

        return self
    }

    //Add right/left padding view in textfield
    func addPadding(_ position: Position, withImage image: UIImage? = nil) {
        let paddingHeight = frame.size.height
        let paddingViewFrame = CGRect.init(x: 0.0, y: 0.0, width: paddingHeight * 0.6, height: paddingHeight)
        let paddingImageView = UIImageView.init(frame: paddingViewFrame)
        paddingImageView.contentMode = .scaleAspectFit

        if let paddingImage = image {
            paddingImageView.image = paddingImage
        }

        //Add Left/Right view mode
        switch position {
        case .left:
            leftView        = paddingImageView
            leftViewMode    = .always
        case .right:
            rightView       = paddingImageView
            rightViewMode    = .always
        default:
            break
        }
    }
}

InformationsquelleAutor der Antwort Bhuvan Bhatt

-1

import UIkit 

extension UITextField

{

func underlinedLogin()

{

    let border = CALayer()

    let width = CGFloat(1.0)

    border.borderColor = UIColor.black.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
}

}

rufen Sie die Methode viewdidload auf

mobileNumberTextField.underlinedLogin()

passwordTextField.underlinedLogin()

//auswählen, wie text-Feld auf mainstoryboard

UITextField Grenze nur für die Unterseite

InformationsquelleAutor der Antwort Rupesh Babu

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.