SwiftUI / Swift / Objective-C / Xamarin에서 볼 수있는 결론 추가


154

의 하단 부분에만 테두리를 유지하고 싶습니다 UITextField. 그러나 우리가 어떻게 그것을 바닥에 유지할 수 있는지 모르겠습니다.

저에게 조언 해주시겠습니까?

답변:


314

textFieldSwiftUI의 재사용 가능한 구성 요소로 만들기 위해 사용자 정의 를 작성하고 있습니다.

스위프트 UI

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 (Visual Formatting Language)을 사용하고 있습니다. 그러면 any에 행을 추가 할 수 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)

목표 C :

이 도우미 메서드를 전역 도우미 클래스 (글로벌 클래스 메서드 사용) 또는 동일한 뷰 컨트롤러 (인스턴스 메서드 사용)에 추가 할 수 있습니다.

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

Xamarin 코드 :

 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()프레임이 올바른지 확인하지 않고 어디서나 전화 를 걸 수 있습니다.

결과는 다음과 같습니다.

견본

스위프트 UI

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 결과를 공유 할 수 있습니까? 나는 그것을 시도했고 그것은 나를 위해 일했다.
sasquatch

11
배경색을 선명한 색으로 변경하면 작동하지 않습니다.
Satyam

8
예. self.layer.backgroundColor = UIColor.white.cgColor에서 흰색을 클리어 컬러로 변경하면 작동하지 않습니다
Satyam

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

최선의 방법. 편집 중 또는 "didBeginEditing"방법 중에 밑줄 색을 변경하고 "didEndEditing"에서 색을 변경하는 방법을 알고 싶었습니다
Deepak Chaudhary

업데이트 된 대답을 참조 설정 tintColor에서 didBeginEditingdidEndEditing
user1046037

이것이 내가 사용한 솔루션입니다. maxY에서 4를 빼서 밑줄을 텍스트 항목에 더 가깝게 이동했습니다.
markhorrocks

24

이 솔루션들 중 어느 것도 실제로 나의 기대를 충족시키지 못했습니다. 테두리를 항상 수동으로 설정하고 싶지 않기 때문에 TextField 를 서브 클래스 화 하고 싶었 습니다. 또한 오류 등 테두리 색상변경하고 싶었습니다 . 그래서 여기 내 해결책이 있습니다 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

여기에 이미지 설명을 입력하십시오

그것이 누군가를 돕기를 바랍니다.)


2
지금까지 가장 좋은 솔루션은 다른 "유효성"상태에 맞게 수정할 수도 있습니다
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
   }
}

그리고 나서 이것을하십시오 :

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

3
나는 이것을 이렇게 생각하고 있었지만에서 이것을 사용 viewDidLoad()하면 프레임이 올바르지 않을 것입니다. 그래서 우리는 두 가지 선택이 있습니다 : viewDidLayoutSubviews()또는 viewDidAppear(). 그러나 viewDidLayoutSubviews()여러 번 전화를 거는 viewDidAppear()것은 좋지 않은 경험이었습니다.
iAkshay

viewDidLayoutSubviews()텍스트 필드가 안에 중첩되어 있으면 작동하지 않습니다 multiple View. 당신은 여러 형제를 얻을 수 있습니다.
Kunal Kumar

13

클래스 외부에서이 확장을 만들고 width를 원하는 borderWidth로 바꿀 수 있습니다.

스위프트 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)
    }
}

그런 다음 이것을 viewDidLoad에 추가하십시오 .TextField를 UITextField 변수와 테두리에서 원하는 색상으로 바꾸십시오.

yourTextField.setBottomBorder(UIColor.blackColor())

이것은 기본적으로 텍스트 필드의 맨 아래에 해당 색상으로보기를 추가합니다.


훌륭한 해결책은 다른 것과는 달리 명확한 배경으로 작동합니다.
Serdnad

1
자동 레이아웃을 사용하는 경우 viewDidLayoutSubviews ()에 func 호출을 추가해야합니다. :) 그렇지 않으면 선이 프레임과 올바르게 일치하지 않습니다.
GordonW

10

여기에 이미지 설명을 입력하십시오

목표 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;

빠른

        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

내가 한 것은 UITextField에 대한 확장을 만들고 Designer 편집 가능 속성을 추가하는 것이 었습니다. 이 속성을 임의의 색으로 설정하면 테두리 (아래쪽)가 해당 색으로 변경됩니다 (다른 테두리는 없음으로 설정).

또한 자리 표시 자 텍스트 색상도 변경해야하므로 확장에 추가했습니다.

    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

        }
    }
}

난 당신이 "didSet"에있는 "설정"을 변경해야하지만, 그렇지 않으면 작동 스위프트 4.0 생각하면 감사
C0D3

6

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

1
viewDidLoad ()가 아닌 viewDidLayoutSubviews ()에서 호출하면 나에게 효과적입니다. 그게 의도입니까?
cheznead

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

다음은 @IBInspectable이있는 swift3 코드입니다

새 파일 만들기 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()
           }

      }
 }

}

파일을 아래 코드로 바꾸면 스토리 보드 속성 관리자에서 다음과 같은 옵션을 얻을 수 있습니다

여기에 이미지 설명을 입력하십시오

즐겨 :)


1

** 여기 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

0

아래쪽 테두리에 대해 하나의 이미지를 만들고 UITextField의 배경으로 설정할 수 있습니다.

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

또는 borderStyle을 none으로 설정하고 텍스트 필드와 정확히 동일한 길이의 줄 이미지를 넣으십시오!


나는이 하나의 saurabh을 볼 것입니다. 그러나 그것은 코드로 만들 수 있습니까?
dhaval shah 5

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

이제 viewDidLayoutSubviews () 에서이 함수를 호출하십시오.

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

참고 : 이 방법은 viewDidLayoutSubviews () 에서만 작동합니다


0

하나의 문제로도 작동하는 것처럼 보이는 각 솔루션을 살펴 보았습니다. 어두운 모드와 배경 설정

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

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에서 나를 위해 일하십시오
Abhi Kapoor

0

스위프트 UI

SwiftUI에는 이와 완벽하게 일치 하는 View호출 Divider이 있습니다. 간단한보기에 포함시켜보기 아래에 추가 할 수 있습니다 VStack.

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

-1

ORGANIZED 를 사용 하고이 확장을 추가로 사용자 정의 할 수도 있습니다 .

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

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

}

viewdidload의 호출 메소드

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)

여기에 이미지 설명을 입력하십시오


이 줄을 설정 한 후 제거하는 쉬운 방법이 있습니까? 예를 들어, textField가 활성화 된 상태로 유지하려면 기본 스타일로 되돌리려 고합니다.
timetraveler90

예, 필요할 때 객체를 제거하거나 숨기거나 보이기 만하면됩니다. :)
Ilesh P
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.