SwiftUI / Swift / Objective-C / Xamarin এ দেখতে নীচের লাইনটি যুক্ত করুন


154

আমি সীমানাটি কেবল নীচের অংশে রাখতে চাই UITextField। তবে আমি জানি না কীভাবে আমরা এটি নীচের দিকে রাখতে পারি।

আপনি আমাকে পরামর্শ দিতে পারেন?

উত্তর:


314

আমি textFieldএটিকে সুইফটআইআইয়ের জন্য পুনরায় ব্যবহারযোগ্য উপাদান তৈরি করতে কাস্টম তৈরি করছি

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

আমি এখানে ভিজ্যুয়াল ফরম্যাটিং ল্যাঙ্গুয়েজ (ভিএফএল) ব্যবহার করছি, এটি যে কোনও একটিতে লাইন যুক্ত করার অনুমতি দেবে 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;

156

আপনি যদি আগে ফ্রেম না জেনে , সাবক্লাসিং ছাড়াই এবং অটোলেআউট ব্যতীত করতে চান :

সুইফ্ট 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)
    }
  }
}

1
এটা আমার জন্য কাজ করে, আপনি আপনার কোড কিছু দেখাতে পারেন, তাই আমরা দেখব পারেন
sasquatch

1
চেষ্টা করবেন viewDidLoad()?
sasquatch

1
@markhorrocks আপনি কি আপনার ফলাফল ভাগ করতে পারেন? আমি এটি চেষ্টা করেছিলাম এবং এটি আমার পক্ষে কাজ করে।
সাসকাচ 13

11
আমরা যদি ব্যাকগ্রাউন্ডের রঙ সাফ রঙে পরিবর্তন করি তবে এটি কাজ করছে না।
সত্যম

8
হ্যাঁ. আমরা যদি সেলটি.টায়ার.ব্যাকগ্রাউন্ড কালার = ইউআইসিএল.র হোয়াইট.সি.এর রঙিন রঙে সাদা রঙ পরিবর্তন করি তবে এটি কাজ করছে না
সত্যম

44

আপনি 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()
    }
}

করতে সেরা পন্থা। আমি শুধু জানতে চেয়েছিলাম কীভাবে সম্পাদনা করার সময় বা "" ডডবেইগেনএডিটিং "পদ্ধতিতে এবং" "ডিএইডএইডিটিং"
দীপক চৌধুরী

আপডেট হওয়া উত্তরটি দেখুন, tintColorইন didBeginEditingএবংdidEndEditing
ব্যবহারকারী 1046037

এই আমি ব্যবহার সমাধান। আমি পাঠ্য প্রবেশের আন্ডারলাইনটিকে আরও কাছাকাছি নিয়ে যেতে ম্যাক্সওয়াই থেকে 4 বিয়োগ করেছি।
মার্খোরোকস

24

এর সমাধানগুলির কোনওটিই আমার প্রত্যাশাগুলি সত্যিই পূরণ করে নি। আমি টেক্সটফিল্ড সাবক্লাস করতে চেয়েছিলাম যেহেতু আমি সমস্ত সময় ম্যানুয়ালি সীমানা সেট করতে চাই না। আমিও ত্রুটির জন্য সীমান্তের রঙ পরিবর্তন করতে চেয়েছিলাম । সুতরাং এখানে আমার সমাধান এখানে 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

    }
}

---- alচ্ছিক ----

রঙ পরিবর্তন করতে এখানে এইভাবে যুক্ত করুন CustomTextField Class:

@IBInspectable var hasError: Bool = false {
    didSet {

        if (hasError) {

            bottomBorder.backgroundColor = UIColor.red

        } else {

            bottomBorder.backgroundColor = UIColor(rgb: 0xE2DCD1)

        }

    }
}

এবং কাস্টম টেক্সটফিল্ডের একটি উদাহরণ তৈরি করার পরে ত্রুটি কলটিকে ট্রিগার করতে

textField.hasError = !textField.hasError

এখানে চিত্র বর্ণনা লিখুন

আশা করি এটি কাউকে সহায়তা করবে;)


2
এখন অবধি সেরা সমাধান, আপনি অন্যান্য "বৈধতা" রাষ্ট্রগুলির জন্য এমনকি এটি সংশোধন করতে পারেন
ব্রুনো

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

এবং তারপরে কেবল এটি করুন:

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

3
আমি এটি করার মতো ভাবছিলাম, তবে আমরা যদি এটি ব্যবহার করি viewDidLoad()তবে ফ্রেমটি ভুল হবে। সুতরাং আমাদের 2 টি পছন্দ আছে: viewDidLayoutSubviews()বা viewDidAppear()। তবে viewDidLayoutSubviews()একাধিকবার কল করা এবং কল viewDidAppear()করা ভাল অভিজ্ঞতা হবে না।
iAkshay

viewDidLayoutSubviews()পাঠ্যক্ষেত্রের ভিতরে বাসা বাঁধলে এছাড়াও কাজ করবে না multiple View। আপনি একাধিক ব্রোডার পাবেন।
কুণাল কুমার

13

আপনি শ্রেণিবদ্ধের বাইরে এই এক্সটেনশানটি তৈরি করতে পারেন এবং যে কোনও বর্ডারউইডথের সাথে প্রস্থকে প্রতিস্থাপন করতে পারেন।

সুইফট 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())

এটি মূলত পাঠ্যের ক্ষেত্রের নীচে সেই রঙের সাথে একটি ভিউ যুক্ত করে।


দুর্দান্ত সমাধান, অন্যদের থেকে ভিন্ন হিসাবে একটি পরিষ্কার পটভূমি নিয়ে কাজ করে।
সার্ডনাদ

1
অটো লেআউট ব্যবহার করা হলে ডিডলয়আউটসুভিউগুলি () ভিউতে ফান কল যোগ করার কথা মনে রাখবেন :) অন্যথায় আপনার লাইনটি ফ্রেমের সাথে সঠিকভাবে মেলে না।
গর্ডনডাব্লু

10

এখানে চিত্র বর্ণনা লিখুন

উদ্দেশ্য গ

        [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

7

আমি যা করেছি তা হ'ল ইউআইটিেক্সটফিল্ডে এক্সটেনশন তৈরি করা এবং ডিজাইনার সম্পাদনাযোগ্য সম্পত্তি যুক্ত করা। এই বৈশিষ্ট্যটিকে যে কোনও রঙে সেট করার ফলে সীমানা (নীচে) রঙে পরিবর্তিত হবে (অন্য সীমানাগুলি কোনওটিতেই সেট করা যাবে না)।

যেহেতু এটির জন্য স্থান ধারক পাঠ্যের রঙও পরিবর্তন করা দরকার, তাই আমি এটিটি এক্সটেনশনে যুক্ত করেছি।

    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

        }
    }
}

আমার মনে হয় আপনি সুইফট ৪.০ এ "সেট" পরিবর্তন করে "ডডসেট" পরিবর্তন করতে হবে তবে অন্যথায় এটি কাজ করে, আপনাকে ধন্যবাদ
C0D3

6

সুইফটে ৩. আপনি একটি এক্সটেনশন তৈরি করতে এবং আপনার দর্শন শ্রেণীর পরে যুক্ত করতে পারেন।

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

1
আপনি কেবলমাত্র ডিডলয়আউটসুভিউগুলি () এ দেখুন এবং ডিভিডলয়েড () না এ कॉल করলে এটি আমার পক্ষে কাজ করেছে। এখানে কি উদ্দেশ্য ছিল?
চিজনাড

6

নীচের কোড নমুনা দেখুন দয়া করে;

সুইফট 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)
    }
 }

4

এখানে @ আইবিআইস্পেসটেবলের সাথে সুইফট 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()
           }

      }
 }

}

এবং নীচের কোডটি দিয়ে ফাইলটি প্রতিস্থাপন করুন এবং আপনি স্টোরিবোর্ড অ্যাট্রিবিউট ইন্সপেক্টর এর মত বিকল্প পাবেন

এখানে চিত্র বর্ণনা লিখুন

উপভোগ করুন :)


1

** এখানে মাইটিএফটি এমটি পাঠ্য ফিল্ডের আউটলেট রয়েছে **

        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

0

আপনি নীচের সীমানার জন্য একটি চিত্র তৈরি করতে পারেন এবং এটি আপনার ইউআইটিেক্সটফিল্ডের পটভূমিতে সেট করতে পারেন:

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

বা সীমানা স্টাইলকে কোনওটিতে সেট না করে লাইনের চিত্রটি পাঠ্যক্ষেত্রের ঠিক সমান দৈর্ঘ্যে রাখুন!


আমি এই এক সৌরভের দিকে একবার নজর রাখব ut তবে এটি কোডের মাধ্যমে আমরা এটি তৈরি করতে পারি তা দুর্দান্ত হবে? আপনার কি কোনও ধারণা আছে?
ধাওয়াল শাহ

0

আপডেট কোড:

সুইফ্ট 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()} }

এখন এই ফানকে ভিউ-তে কল করুন ডিডলআউটআউটভিউগুলি ()

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

দ্রষ্টব্য: এই পদ্ধতিটি কেবলমাত্র ViewDidLayoutSubviews () এ কাজ করবে


0

আমি এই সমাধানগুলির প্রতিটিটিতে দেখেছি যা একটি ইস্যুতে কাজ করে বলে মনে হয়। গাark় মোড এবং পটভূমি সেটিংস

ইউআইটিেক্সটফিল্ডের ব্যাকগ্রাউন্ড সেটিং অবশ্যই প্যারেন্ট ভিউয়ের পটভূমির সাথে মেলে বা কোনও লাইন প্রদর্শিত হবে না

সুতরাং এটি হালকা মোডে কাজ করবে ডার্ক মোডে কাজ করতে পটভূমির রঙটি কালোতে পরিবর্তন করুন এবং এটি কাজ করে পিছনের রঙ বাদ দিন এবং লাইনটি উপস্থিত হবে না

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

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

অভিভাবকসংবঁধীয়


আমার জন্য দ্রুত 4.2 এ কাজ করুন
অভি কাপুর

0

SwiftUI

SwiftUI, একটি হল Viewনামক Dividerযে পুরোপুরি এই জন্য মেলানো হয়। আপনি এটিকে যে কোনও দৃশ্যের নীচে একটি সাধারণকে এমবেড করে যোগ করতে পারেন VStack:

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

-1

আপনি এই সংগঠিত ব্যবহার করতে পারেন এবং এই এক্সটেনশনটি আরও কাস্টমাইজ করতে পারেন :

ভিডিডআইপিয়ারে " একটি লাইন বাস্তবায়ন " (যাতে ফ্রেমের আকারটি সঠিক হবে):

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

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

}

ভিউডিডলোডে কল পদ্ধতি

mobileNumberTextField.underlinedLogin()

passwordTextField.underlinedLogin()

// মেনস্টোরিবোর্ডে পাঠ্য ক্ষেত্রের মতো নির্বাচন করুন

ভাবমূর্তি


-1

দেখার জন্য: (সর্বাধিক প্রস্তাবিত)

এটি সব ধরণের 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)

এখানে চিত্র বর্ণনা লিখুন


এই লাইনটি সেট করার পরে সরানোর কোনও সহজ উপায় আছে? উদাহরণস্বরূপ, আমার টেক্সটফিল্ডটি সক্রিয় থাকাকালীন আমি এটি রাখতে চাই অন্যথায় আমি এটিকে ডিফল্ট শৈলীতে ফিরিয়ে দেব।
timetraveler90

হ্যাঁ, যখন আপনার প্রয়োজন হয় কেবল কোনও সরান বা লুকান / প্রদর্শন করুন object :)
ইলেশ পি
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.