SwiftUI / Swift / Objective-C / Xamarin में देखने के लिए नीचे की पंक्ति जोड़ें

Question

मैं केवल नीचे के हिस्से में सीमा रखना चाहूंगा UITextField। लेकिन मुझे नहीं पता कि हम इसे नीचे की तरफ कैसे रख सकते हैं।

क्या आप मुझे सलाह दे सकते हैं?

Answer 1

मैं textFieldSwiftUI के लिए इसे पुन: प्रयोज्य घटक बनाने के लिए कस्टम बना रहा हूं

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

उपयोग:

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

---

---

स्विफ्ट 5.0

मैं यहां विजुअल फॉर्मेटिंग लैंग्वेज (VFL) का उपयोग कर रहा हूं, यह किसी भी लाइन को जोड़ने की अनुमति देगा UIControl।

आप एक UIViewएक्सटेंशन क्लास बना सकते हैंUIView+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
        }
    }
}

उपयोग:

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

---

उद्देश्य सी:

आप इस सहायक विधि को अपने वैश्विक सहायक वर्ग में जोड़ सकते हैं (मैंने वैश्विक कक्षा विधि का उपयोग किया है) या उसी दृश्य नियंत्रक में (उदाहरण विधि का उपयोग करके)।

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

उपयोग:

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

---

ज़मीरिन कोड:

 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;

Answer 2

आप क्या करना चाहते हैं फ्रेम जानने के बिना पहले से, उपवर्गीकरण बिना और autolayout बिना :

स्विफ्ट 5 / स्विफ्ट 4.x / स्विफ्ट 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
  }
}

yourTextField.setBottomBorder()फ्रेम सही होने के बारे में सुनिश्चित किए बिना कहीं से भी कॉल करें।

परिणाम इस तरह दिखता है:

यूआई स्विफ्ट

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

Comments

यह मेरे लिए काम करता है, क्या आप अपना कुछ कोड दिखा सकते हैं, तो हम देख सकते हैं

— sasquatch

में कोशिश करो viewDidLoad()?

— sasquatch

क्या आप अपना परिणाम साझा कर सकते हैं? मैंने इसकी कोशिश की और यह मेरे लिए काम कर गया।

— sasquatch 13

यदि हम रंग बदलने के लिए पृष्ठभूमि का रंग बदलते हैं, तो यह काम नहीं कर रहा है।

— सत्यम

हाँ। यदि हम स्वेत रंग को स्पष्ट करने के लिए सफेद रंग में बदलते हैं। लेयर.बैकग्राउंडरकलर = UIColor.white.cgColor इसके काम नहीं कर रहा है

— सत्यम

Answer 3

आप UITextFieldनीचे दिखाए गए अनुसार उपवर्ग बना सकते हैं :

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

Comments

सबसे अच्छा तरीका है। मैं सिर्फ यह जानना चाहता था कि एडिटिंग के दौरान या "didBeginEditing" के दौरान अंडरलाइन रंग कैसे बदलना है और "didEndEditing" पर रंग बदलना है

— दीपक चौधरी

अपडेट किया गया उत्तर देखें, और tintColorमें सेट करेंdidBeginEditingdidEndEditing

— user1046037

यह मेरे द्वारा उपयोग किया जाने वाला समाधान है। मैंने टेक्स्ट प्रविष्टि के करीब अंडरलाइन को स्थानांतरित करने के लिए अधिकतम 4 से घटाया।

— markhorrocks

Answer 4

इनमें से कोई भी समाधान वास्तव में मेरी उम्मीदों पर खरा नहीं उतरा। मैं टेक्स्टफिल्ड को उप-वर्ग करना चाहता था क्योंकि मैं हर समय सीमा को मैन्युअल रूप से सेट नहीं करना चाहता। मैं एक त्रुटि के लिए बॉर्डर का रंग बदलना चाहता था । तो यहाँ मेरा समाधान है 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

    }
}

---- वैकल्पिक ----

रंग जोड़ने के लिए इस तरह से sth जोड़ें CustomTextField Class:

@IBInspectable var hasError: Bool = false {
    didSet {

        if (hasError) {

            bottomBorder.backgroundColor = UIColor.red

        } else {

            bottomBorder.backgroundColor = UIColor(rgb: 0xE2DCD1)

        }

    }
}

और जब आप CustomTextField का एक उदाहरण बनाते हैं, तब त्रुटि कॉल को ट्रिगर करने के लिए

textField.hasError = !textField.hasError

आशा है कि यह किसी की मदद करता है;)

Comments

अब तक का सबसे अच्छा समाधान, आप इसे अन्य "सत्यापन" राज्यों के लिए संशोधित भी कर सकते हैं

— ब्रूनो फेरेरा

Answer 5

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

और फिर बस यह करें:

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

Comments

मैं ऐसा करने के लिए सोच रहा था, लेकिन अगर हम इसमें इस्तेमाल करते हैं viewDidLoad(), तो फ्रेम गलत होगा। तो हमारे पास 2 विकल्प हैं: viewDidLayoutSubviews()या viewDidAppear()। लेकिन viewDidLayoutSubviews()कई बार कॉल viewDidAppear()करना और कॉल करना अच्छा अनुभव नहीं होगा।

— अक्षय

viewDidLayoutSubviews()पाठ फ़ील्ड के अंदर नेस्टेड होने पर भी काम नहीं करेगा multiple View। आपको कई ब्रॉडर मिलेंगे।

— कुणाल कुमार

Answer 6

आप इस एक्सटेंशन को क्लास के बाहर बना सकते हैं और जो चाहें बॉर्डर के साथ चौड़ाई बदल सकते हैं।

स्विफ्ट 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)
    }
}

मूल

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

और फिर इसे अपने दृश्य में जोड़ें। अपने यूटैक्सफ़िल्ड वैरिएबल और सीमा में किसी भी रंग के साथ अपना टेक्स्ट बदलें।

yourTextField.setBottomBorder(UIColor.blackColor())

यह मूल रूप से टेक्स्ट फ़ील्ड के निचले भाग में उस रंग के साथ एक दृश्य जोड़ता है।

Comments

महान समाधान, दूसरों में से कुछ के विपरीत एक स्पष्ट पृष्ठभूमि के साथ काम करता है।

— सर्पनाद

अगर ऑटो लेआउट का उपयोग कर रहे हैं तो viewDidLayoutSubviews () को फंक कॉल जोड़ना याद रखें अन्यथा आपकी लाइन सही तरीके से फ्रेम से मेल नहीं खाएगी।

— गॉर्डन डब्ल्यू 27:19

Answer 7

उद्देश्य सी

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

तीव्र

        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

Answer 8

मैंने जो किया वह UITextField के लिए एक एक्सटेंशन बनाने के लिए था और एक डिजाइनर संपादन योग्य संपत्ति को जोड़ा। इस प्रॉपर्टी को किसी भी रंग में सेट करने से बॉर्डर (बॉटम) उस कलर में बदल जाएगा (अन्य बॉर्डर्स टू नो)।

चूँकि इसके लिए स्थान धारक को टेक्स्ट रंग बदलने की भी आवश्यकता होती है, इसलिए मैंने इसे एक्सटेंशन में भी जोड़ा।

    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

        }
    }
}

Comments

मुझे लगता है कि स्विफ्ट 4.0 में आपको "सेट" को "डिडसेट" में बदलने की आवश्यकता है, लेकिन अन्यथा यह काम करता है, धन्यवाद

— C0D3

Answer 9

स्विफ्ट 3. पर आप एक एक्सटेंशन बना सकते हैं और अपने व्यू क्लास के बाद जोड़ सकते हैं।

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

Comments

यह केवल मेरे लिए काम करता है अगर आप इसे viewDidLayoutSubviews () और viewDidLoad () नहीं कहते हैं। क्या यहीं इरादा था?

— चेजनडेड

Answer 10

कृपया नीचे दिए गए कोड नमूने पर एक नज़र डालें;

स्विफ्ट 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)
    }
 }

Answer 11

यहां @IBInspectable के साथ स्विफ्ट 3 कोड है

एक नई फ़ाइल कोको टच क्लास स्विफ्ट फ़ाइल बनाएँ

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

      }
 }

}

और फ़ाइल को नीचे दिए गए कोड के साथ बदलें और आपको स्टोरीबोर्ड विशेषता निरीक्षक में विकल्प मिलेगा

का आनंद लें :)

Answer 12

** यहाँ myTF 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

Answer 13

आप नीचे की सीमा के लिए एक छवि बना सकते हैं और इसे अपने UITextField की पृष्ठभूमि में सेट कर सकते हैं:

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

या कोई भी सीमा निर्धारित करें और टेक्स्टफ़ील्ड के लिए रेखा की छवि को बिल्कुल समान लंबाई में रखें!

Comments

मैं इस एक saurabh पर नजर डालूंगा। लेकिन यह बहुत अच्छा होगा कि हम इसे कोड द्वारा बना सकते हैं? क्या आपके पास कोई विचार है?

— धवल शाह

Answer 14

अपडेट किया गया कोड:

स्विफ्ट 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()} }

अब इस func को viewDidLayoutSubviews () में कॉल करें

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

नोट: यह विधि केवल viewDidLayoutSubviews () में काम करेगी

Answer 15

मैंने इनमें से प्रत्येक समाधान पर ध्यान दिया है जो एक मुद्दे के साथ काम करता है। डार्क मोड और बैकग्राउंड सेटिंग

UITextField की पृष्ठभूमि सेटिंग को पैरेंट दृश्य की पृष्ठभूमि से मेल खाना चाहिए या कोई रेखा दिखाई नहीं देती है

तो यह लाइट मोड पर काम करेगा। डार्क मोड में काम करने के लिए बैकग्राउंड कलर को ब्लैक में बदलें और यह बैक कलर को छोड़ देता है और लाइन दिखाई नहीं देती है

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

यह मेरे लिए सबसे अच्छा समाधान होने के नाते समाप्त हो गया

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

Answer 16

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

ट्यूटोरियल

Comments

मेरे लिए स्विफ्ट 4.2 में काम करें

— अभि कपूर

Answer 17

SwiftUI

SwiftUI में, एक Viewकहा जाता है Dividerजो इसके लिए पूरी तरह से मेल खाता है। आप इसे एक सरल में एम्बेड करके किसी भी दृश्य के नीचे जोड़ सकते हैं VStack:

VStack {
    Text("This could be any View")
    Divider()
}

Answer 18

आप इस ऑर्गनाइज्ड का उपयोग कर सकते हैं और आगे भी इस एक्सटेंशन को कस्टमाइज़ कर सकते हैं :

ViewDidAppear में " वन लाइन कार्यान्वयन " (ताकि फ्रेम का आकार सही होगा):

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

Answer 19

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
}

}

viewdidload पर कॉल विधि

mobileNumberTextField.underlinedLogin()

passwordTextField.underlinedLogin()

// मेनस्टोरीबोर्ड पर टेक्स्ट फ़ील्ड की तरह चुनें

Answer 20

व्यू के लिए: (सर्वाधिक अनुशंसित)

यह सभी प्रकार के UIViewउपवर्गों (दृश्य, टेक्स्टफल्ड, लेबल, आदि ...) का उपयोग करने के लिए काम करता हैUIView extension

यह अधिक सरल और सुविधाजनक है। लेकिन एकमात्र शर्त viewएक ऑटो लेआउट होना चाहिए।

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

कैसे इस्तेमाल करे?

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

तथा

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

Comments

क्या इसे स्थापित करने के बाद इस लाइन को हटाने का एक आसान तरीका है? उदाहरण के लिए, मैं यह चाहता हूं कि जब मेरा टेक्स्टफिल सक्रिय हो, तो मैं इसे डिफ़ॉल्ट शैली में वापस कर दूं।

— टाइमट्रेलर 90

हाँ, बस किसी भी वस्तु को छिपाने या छिपाने / दिखाने के लिए जब आपको इसकी आवश्यकता होती है। :)

— Ilesh P