답변:
textField
SwiftUI의 재사용 가능한 구성 요소로 만들기 위해 사용자 정의 를 작성하고 있습니다.
스위프트 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;
사전에 프레임을 알지 않고 서브 클래스 를 사용 하지 않고 자동 레이아웃 을 수행 하지 않으려면 다음을 수행 하십시오 .
스위프트 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)
}
}
}
viewDidLoad()
?
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
이 솔루션들 중 어느 것도 실제로 나의 기대를 충족시키지 못했습니다. 테두리를 항상 수동으로 설정하고 싶지 않기 때문에 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
그것이 누군가를 돕기를 바랍니다.)
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")
viewDidLoad()
하면 프레임이 올바르지 않을 것입니다. 그래서 우리는 두 가지 선택이 있습니다 : viewDidLayoutSubviews()
또는 viewDidAppear()
. 그러나 viewDidLayoutSubviews()
여러 번 전화를 거는 viewDidAppear()
것은 좋지 않은 경험이었습니다.
viewDidLayoutSubviews()
텍스트 필드가 안에 중첩되어 있으면 작동하지 않습니다 multiple View
. 당신은 여러 형제를 얻을 수 있습니다.
클래스 외부에서이 확장을 만들고 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())
이것은 기본적으로 텍스트 필드의 맨 아래에 해당 색상으로보기를 추가합니다.
목표 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
내가 한 것은 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
}
}
}
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)
}
}
아래 코드 샘플을 살펴보십시오.
스위프트 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)
}
}
다음은 @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()
}
}
}
}
파일을 아래 코드로 바꾸면 스토리 보드 속성 관리자에서 다음과 같은 옵션을 얻을 수 있습니다
즐겨 :)
** 여기 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
아래쪽 테두리에 대해 하나의 이미지를 만들고 UITextField의 배경으로 설정할 수 있습니다.
yourTextField.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"yourBorderedImageName"]];
또는 borderStyle을 none으로 설정하고 텍스트 필드와 정확히 동일한 길이의 줄 이미지를 넣으십시오!
업데이트 된 코드 :
스위프트 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 () 에서만 작동합니다
하나의 문제로도 작동하는 것처럼 보이는 각 솔루션을 살펴 보았습니다. 어두운 모드와 배경 설정
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
}
}
}
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
이 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
}
}
}
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()
// 메인 스토리 보드에서 텍스트 필드와 같은 선택
보기의 경우 : (가장 권장 됨) 다음을 사용
하여 모든 유형의 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)