Fügen Sie die unterste Zeile hinzu, um sie in SwiftUI / Swift / Objective-C / Xamarin anzuzeigen

154

Ich möchte die Grenze im unteren Teil nur in behalten UITextField. Aber ich weiß nicht, wie wir es auf der Unterseite halten können.

Können Sie mich bitte beraten?

Dhaval Shah
quelle

Antworten:

314

Ich erstelle benutzerdefinierte textField, um es wiederverwendbare Komponente für SwiftUI zu machen

SwiftUI

struct CustomTextField: View {
    var placeHolder: String
    @Binding var value: String

    var lineColor: Color
    var width: CGFloat

    var body: some View {
        VStack {
            TextField(self.placeHolder, text: $value)
            .padding()
            .font(.title)

            Rectangle().frame(height: self.width)
                .padding(.horizontal, 20).foregroundColor(self.lineColor)
        }
    }
}

Verwendung:

@Binding var userName: String
@Binding var password: String

var body: some View {
    VStack(alignment: .center) {
        CustomTextField(placeHolder: "Username", value: $userName, lineColor: .white, width: 2)
        CustomTextField(placeHolder: "Password", value: $password, lineColor: .white, width: 2)
    }
}


Swift 5.0

Ich verwende hier Visual Formatting Language (VFL). Dies ermöglicht das Hinzufügen einer Zeile zu einer beliebigen UIControl.

Sie können eine UIViewErweiterungsklasse wie erstellenUIView+Extention.swift

import UIKit

enum LINE_POSITION {
    case LINE_POSITION_TOP
    case LINE_POSITION_BOTTOM
}

extension UIView {
    func addLine(position : LINE_POSITION, color: UIColor, width: Double) {
        let lineView = UIView()
        lineView.backgroundColor = color
        lineView.translatesAutoresizingMaskIntoConstraints = false // This is important!
        self.addSubview(lineView)

        let metrics = ["width" : NSNumber(value: width)]
        let views = ["lineView" : lineView]
        self.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|[lineView]|", options:NSLayoutConstraint.FormatOptions(rawValue: 0), metrics:metrics, views:views))

        switch position {
        case .LINE_POSITION_TOP:
            self.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|[lineView(width)]", options:NSLayoutConstraint.FormatOptions(rawValue: 0), metrics:metrics, views:views))
            break
        case .LINE_POSITION_BOTTOM:
            self.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:[lineView(width)]|", options:NSLayoutConstraint.FormatOptions(rawValue: 0), metrics:metrics, views:views))
            break
        }
    }
}

Verwendung:

textField.addLine(position: .LINE_POSITION_BOTTOM, color: .darkGray, width: 0.5)

Ziel c:

Sie können diese Hilfsmethode zu Ihrer globalen Hilfsklasse (ich habe die globale Klassenmethode verwendet) oder im selben Ansichtscontroller (unter Verwendung einer Instanzmethode) hinzufügen.

typedef enum : NSUInteger {
    LINE_POSITION_TOP,
    LINE_POSITION_BOTTOM
} LINE_POSITION;


- (void) addLine:(UIView *)view atPosition:(LINE_POSITION)position withColor:(UIColor *)color lineWitdh:(CGFloat)width {
    // Add line
    UIView *lineView = [[UIView alloc] init];
    [lineView setBackgroundColor:color];
    [lineView setTranslatesAutoresizingMaskIntoConstraints:NO];
    [view addSubview:lineView];

    NSDictionary *metrics = @{@"width" : [NSNumber numberWithFloat:width]};
    NSDictionary *views = @{@"lineView" : lineView};
    [view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[lineView]|" options: 0 metrics:metrics views:views]];

    switch (position) {
        case LINE_POSITION_TOP:
            [view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-0-[lineView(width)]" options: 0 metrics:metrics views:views]];
            break;

        case LINE_POSITION_BOTTOM:
            [view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[lineView(width)]|" options: 0 metrics:metrics views:views]];
            break;
        default: break;
    }
}

Verwendung:

[self addLine:self.textField atPosition:LINE_POSITION_TOP withColor:[UIColor darkGrayColor] lineWitdh:0.5];

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;
Kampai
quelle
156

Wenn Sie ohne vorherige Kenntnis von Frames , ohne Unterklassen und ohne Autolayout auskommen möchten :

Swift 5 / Swift 4.x / 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
  }
}

Rufen Sie an als yourTextField.setBottomBorder() von überall an, ohne sicherzustellen, dass die Rahmen richtig sind.

Das Ergebnis sieht folgendermaßen aus:

Stichprobe

Schnelle Benutzeroberfläche

struct MyTextField: View {
  var myPlaceHolder: String
  @Binding var text: String

  var underColor: Color
  var height: CGFloat

  var body: some View {
    VStack {
        TextField(self.myPlaceHolder, text: $text)
        .padding()
        .font(.title)

        Rectangle().frame(height: self.height)
            .padding(.horizontal, 24).foregroundColor(self.underColor)
    }
  }
}
sasquatch
quelle
1
Es funktioniert für mich, können Sie einen Teil Ihres Codes zeigen, damit wir untersuchen können
sasquatch
1
Anprobieren viewDidLoad()?
Sasquatch
1
@markhorrocks Kannst du dein Ergebnis teilen? Ich habe es versucht und es hat bei mir funktioniert.
Sasquatch
11
Wenn wir die Hintergrundfarbe in klare Farbe ändern, funktioniert dies nicht.
Satyam
8
Ja. Wenn wir die weiße Farbe in self.layer.backgroundColor = UIColor.white.cgColor in klare Farbe ändern, funktioniert dies nicht
Satyam
44

Sie können eine Unterklasse UITextFieldwie folgt erstellen :

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()
    }
}
user1046037
quelle
Bester Ansatz zu tun. Ich wollte nur wissen, wie man die Unterstreichungsfarbe während der Bearbeitung oder während der Methode "didBeginEditing" ändert und die Farbe bei "didEndEditing"
Deepak Chaudhary
Siehe die aktualisierte Antwort, setzen Sie die tintColorin didBeginEditingunddidEndEditing
user1046037
Dies ist die Lösung, die ich verwendet habe. Ich habe 4 von maxY abgezogen, um die Unterstreichung näher an die Texteingabe zu bringen.
Markhorrocks
24

Keine dieser Lösungen hat meine Erwartungen wirklich erfüllt. Ich wollte das TextField in Unterklassen unterteilen, da ich den Rahmen nicht immer manuell festlegen möchte. Ich wollte auch die Rahmenfarbe ändern, zB für einen Fehler. 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 ----

Um die Farbe zu ändern, fügen Sie Folgendes hinzu CustomTextField Class:

@IBInspectable var hasError: Bool = false {
    didSet {

        if (hasError) {

            bottomBorder.backgroundColor = UIColor.red

        } else {

            bottomBorder.backgroundColor = UIColor(rgb: 0xE2DCD1)

        }

    }
}

Um den Fehler auszulösen, rufen Sie dies auf, nachdem Sie eine Instanz von CustomTextField erstellt haben

textField.hasError = !textField.hasError

Geben Sie hier die Bildbeschreibung ein

Hoffe es hilft jemandem;)

inf1783
quelle
2
Die bisher beste Lösung, Sie können sie sogar für andere "Validierungs" -Zustände ändern
Bruno Ferreira
22
 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
   }
}

und dann mach einfach das:

yourTextField.setBottomBorder(color: "#3EFE46")
idris yıldız
quelle
3
Ich dachte daran, dies zu tun, aber wenn wir dies in verwenden viewDidLoad(), wäre der Rahmen falsch. Wir haben also zwei Möglichkeiten: viewDidLayoutSubviews()oder viewDidAppear(). Aber viewDidLayoutSubviews()mehrmals angerufen und angerufen von viewDidAppear()wäre keine gute Erfahrung.
iAkshay
viewDidLayoutSubviews()funktioniert auch nicht, wenn das Textfeld darin verschachtelt ist multiple View. Sie erhalten mehrere Broder.
Kunal Kumar
13

Sie können diese Erweiterung außerhalb der Klasse erstellen und die Breite durch die gewünschte borderWidth ersetzen.

Swift 4

extension UITextField
{
    func setBottomBorder(withColor color: UIColor)
    {
        self.borderStyle = UITextBorderStyle.none
        self.backgroundColor = UIColor.clear
        let width: CGFloat = 1.0

        let borderLine = UIView(frame: CGRect(x: 0, y: self.frame.height - width, width: self.frame.width, height: width))
        borderLine.backgroundColor = color
        self.addSubview(borderLine)
    }
}

Original

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)
    }
}

Fügen Sie dies dann zu viewDidLoad hinzu und ersetzen Sie yourTextField durch Ihre UITextField-Variable und durch eine beliebige Farbe im Rahmen

yourTextField.setBottomBorder(UIColor.blackColor())

Dadurch wird im Grunde eine Ansicht mit dieser Farbe am unteren Rand des Textfelds hinzugefügt.

Rishabh Wadhwa
quelle
Tolle Lösung, arbeitet mit einem klaren Hintergrund im Gegensatz zu einigen anderen.
Serdnad
1
Denken Sie daran, viewDidLayoutSubviews () einen Funktionsaufruf hinzuzufügen, wenn Sie das automatische Layout verwenden :) Andernfalls stimmt Ihre Linie nicht korrekt mit dem Rahmen überein.
GordonW
10

Geben Sie hier die Bildbeschreibung ein

Ziel 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;

Schnell

        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
Mitul Marsoniya
quelle
7

Ich habe eine Erweiterung für UITextField erstellt und eine bearbeitbare Designer-Eigenschaft hinzugefügt. Wenn Sie diese Eigenschaft auf eine beliebige Farbe setzen, wird der Rand (unten) in diese Farbe geändert (andere Ränder werden auf keine gesetzt).

Da dazu auch die Textfarbe des Platzhalters geändert werden muss, habe ich diese auch zur Erweiterung hinzugefügt.

    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

        }
    }
}
Krishna Vedula
quelle
Ich denke, in Swift 4.0 müssen Sie das "Set" in "didSet" ändern, aber sonst funktioniert es, danke
C0D3
6

In Swift 3. Sie können eine Erweiterung erstellen und nach Ihrer Ansichtsklasse hinzufügen.

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)
    }
}
afrodev
quelle
1
Dies funktionierte nur bei mir, wenn Sie es in viewDidLayoutSubviews () und nicht in viewDidLoad () aufrufen. War das die Absicht hier?
Cheznead
6

Bitte schauen Sie sich das folgende Codebeispiel an.

Swift 4:

@IBDesignable class DesignableUITextField: UITextField {

    let border = CALayer()

    @IBInspectable var borderColor: UIColor? {
        didSet {
            setup()
        }
    }

    @IBInspectable var borderWidth: CGFloat = 0.5 {
        didSet {
            setup()
        }
    }

    func setup() {
        border.borderColor = self.borderColor?.cgColor

        border.borderWidth = borderWidth
        self.layer.addSublayer(border)
        self.layer.masksToBounds = true
    }

    override func layoutSubviews() {
        super.layoutSubviews()
        border.frame = CGRect(x: 0, y: self.frame.size.height - borderWidth, width:  self.frame.size.width, height: self.frame.size.height)
    }
 }
Iman
quelle
4

Hier ist swift3-Code mit @IBInspectable

Erstellen Sie eine neue Datei Cocoa Touch Class Swift File

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 durch den folgenden Code, und Sie erhalten die Option im Storyboard-Attributinspektor wie folgt

Geben Sie hier die Bildbeschreibung ein

Genießen :)

Azharhussain Shaikh
quelle
1

** Hier ist myTF Outlet für MT TEXT FIELD **

        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
Sai Kumar Reddy
quelle
0

Sie können ein Bild für den unteren Rand erstellen und es auf den Hintergrund Ihres UITextField setzen:

 yourTextField.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"yourBorderedImageName"]];

oder setze borderStyle auf none und setze das Bild der Linie genau gleich lang wie das Textfeld!

Saurabh Prajapati
quelle
Ich werde mir diesen einen Saurabh ansehen. Aber es wird großartig sein, dass wir ihn per Code erstellen können. Hast du eine Idee?
Dhaval Shah
0

Aktualisierter Code:

Swift 5.0

extension UITextField {
  func addUnderline() { 
   let layer = CALayer()
   layer.backgroundColor = #colorLiteral(red: 0.6666666865, green: 0.6666666865, blue: 0.6666666865, alpha: 1)
   layer.frame = CGRect(x: 0.0, y: self.frame.size.height - 1.0, width: self.frame.size.width, height: 1.0)
   self.clipsToBounds = true
   self.layer.addSublayer(layer)
   self.setNeedsDisplay()} }

Rufen Sie diese Funktion nun in viewDidLayoutSubviews () auf.

override func viewDidLayoutSubviews() {
    textField.addUnderline()
}

HINWEIS: Diese Methode funktioniert nur in viewDidLayoutSubviews ()

Prakhar Prakash Bhardwaj
quelle
0

Ich habe mir jede dieser Lösungen angesehen, die auch mit einem Problem zu funktionieren scheinen. Dunkler Modus und die Hintergrundeinstellung

Die Hintergrundeinstellung des UITextField muss mit dem Hintergrund der übergeordneten Ansicht übereinstimmen, da sonst keine Linie angezeigt wird

Dies funktioniert also im hellen Modus. Um im dunklen Modus zu arbeiten, ändern Sie die Hintergrundfarbe in Schwarz und es funktioniert. Schließen Sie die Hintergrundfarbe aus und die Linie wird nicht angezeigt

let field = UITextField() 
field.backgroundColor = UIColor.white
field.bottomBorderColor = UIColor.red

Dies war die beste Lösung für mich

extension UITextField {

    func addPadding() {
        let paddingView = UIView(frame: CGRect(x:0, y:0, width: 10, height: self.frame.height))
        self.leftView = paddingView
        self.leftViewMode = .always
      }

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

      @IBInspectable var bottomBorderColor: UIColor? {
          get {
              return self.bottomBorderColor
          }
          set {
            self.borderStyle = .none
            self.layer.masksToBounds = false
            self.layer.shadowColor = newValue?.cgColor
            self.layer.shadowOffset = CGSize(width: 0.0, height: 1.0)
            self.layer.shadowOpacity = 1.0
            self.layer.shadowRadius = 0.0
          }
      }
    }
Taylor Maxwell
quelle
0
let border = CALayer()
     let lineWidth = CGFloat(0.3)
     border.borderColor = UIColor.lightGray.cgColor
     border.frame = CGRect(x: 0, y: emailTextField.frame.size.height - lineWidth, width:  emailTextField.frame.size.width, height: emailTextField.frame.size.height)
     border.borderWidth = lineWidth
     emailTextField.layer.addSublayer(border)
     emailTextField.layer.masksToBounds = true

Lernprogramm

Abhi Kapoor
quelle
Arbeite für mich in schnellem 4.2
Abhi Kapoor
0

SwiftUI

In SwiftUI gibt es einen ViewAufruf Divider, der perfekt darauf abgestimmt ist. Sie können es unter jeder Ansicht hinzufügen, indem Sie sie in eine einfache Datei einbetten VStack:

VStack {
    Text("This could be any View")
    Divider()
}
Mojtaba Hosseini
quelle
-1

Sie können diese verwenden ORGANISIERT und kann auch FERTIGEN diese Erweiterung weiter:

" Einzeilige Implementierung " in viewDidAppear (damit die Frame-Größe korrekt ist):

// 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
        }
    }
}
Bhuvan Bhatt
quelle
-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
}

}}

Aufrufmethode für viewdidload

mobileNumberTextField.underlinedLogin()

passwordTextField.underlinedLogin()

// Ähnliches Textfeld auf dem Mainstoryboard auswählen

Bild

Rupesh Babu
quelle
-1

Für Ansicht: (Am meisten empfohlen) Funktioniert

für alle Arten von UIViewUnterklassen (Ansicht, Textdatei, Beschriftung usw.) mitUIView extension

Es ist einfacher und bequemer. Die einzige Bedingung ist viewjedoch, dass ein automatisches Layout enthalten sein muss.

extension UIView {
    enum Line_Position {
        case top
        case bottom
    }

    func addLine(position : Line_Position, color: UIColor, height: Double) {
        let lineView = UIView()
        lineView.backgroundColor = color
        lineView.translatesAutoresizingMaskIntoConstraints = false // This is important!
        self.addSubview(lineView)

        let metrics = ["width" : NSNumber(value: height)]
        let views = ["lineView" : lineView]
        self.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|[lineView]|", options:NSLayoutConstraint.FormatOptions(rawValue: 0), metrics:metrics, views:views))

        switch position {
        case .top:
            self.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|[lineView(width)]", options:NSLayoutConstraint.FormatOptions(rawValue: 0), metrics:metrics, views:views))
            break
        case .bottom:
            self.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:[lineView(width)]|", options:NSLayoutConstraint.FormatOptions(rawValue: 0), metrics:metrics, views:views))
            break
        }
    }
}

Wie benutzt man?

// UILabel
self.lblDescription.addLine(position: .bottom, color: UIColor.blue, height: 1.0)

Geben Sie hier die Bildbeschreibung ein
und

// UITextField
self.txtArea.addLine(position: .bottom, color: UIColor.red, height: 1.0)

Geben Sie hier die Bildbeschreibung ein

Ilesh P.
quelle
Gibt es eine einfache Möglichkeit, diese Zeile nach dem Einstellen zu entfernen? Zum Beispiel möchte ich es haben, während mein textField aktiv ist, sonst würde ich es auf den Standardstil zurücksetzen.
timetraveler90
Ja, halten Sie einfach ein Objekt zum Entfernen oder Ausblenden / Anzeigen, wenn Sie es benötigen. :)
Ilesh P