Я хотел бы сохранить границу в нижней части только в UITextField
. Но я не знаю, как мы можем держать это на нижней стороне.
Не могли бы вы посоветовать мне?
Я создаю пользовательский, textField
чтобы сделать его повторно используемым компонентом для SwiftUI
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)
}
}
Swift 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)
Цель 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;
Если вы хотите обойтись без предварительного знания фреймов , без создания подклассов и без автоматического размещения :
Swift 5 / Swift 4.x / Swift 3.x
extension UITextField {
func setBottomBorder() {
self.borderStyle = .none
self.layer.backgroundColor = UIColor.white.cgColor
self.layer.masksToBounds = false
self.layer.shadowColor = UIColor.gray.cgColor
self.layer.shadowOffset = CGSize(width: 0.0, height: 1.0)
self.layer.shadowOpacity = 1.0
self.layer.shadowRadius = 0.0
}
}
Звоните как yourTextField.setBottomBorder()
угодно, не задумываясь о правильности кадров.
Результат выглядит так:
Swift 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
как показано ниже:источник
tintColor
вdidBeginEditing
иdidEndEditing
Ни одно из этих решений не соответствовало моим ожиданиям. Я хотел создать подкласс TextField, поскольку я не хочу устанавливать границу вручную все время. Я также хотел изменить цвет границы, например, для ошибки. Итак, вот мое решение с
Anchors
:---- По желанию ----
Чтобы изменить цвет, добавьте вот что
CustomTextField Class
:И чтобы вызвать ошибку вызвать это после того, как вы создали экземпляр CustomTextField
Надеюсь, это кому-нибудь поможет;)
источник
а затем просто сделайте это:
источник
viewDidLoad()
, кадр будет неправильным. Итак, у нас есть 2 варианта:viewDidLayoutSubviews()
илиviewDidAppear()
. НоviewDidLayoutSubviews()
звонил несколько раз, и звонил отviewDidAppear()
не будет хорошим опытом.viewDidLayoutSubviews()
также не будет работать, если текстовое поле вложено внутрьmultiple View
. Вы получите несколько шире.Вы можете создать это расширение вне класса и заменить ширину любой границей, которую вы хотите.
Swift 4
оригинал
а затем добавьте это в ваш viewDidLoad, заменив yourTextField на вашу переменную UITextField и любым цветом, который вы хотите на границе
Это в основном добавляет вид с этим цветом в нижней части текстового поля.
источник
Цель С
стриж
источник
Я создал расширение UITextField и добавил редактируемое свойство Designer. Установка этого свойства на любой цвет изменит границу (внизу) на этот цвет (установив другие границы на ноль).
Поскольку это также требует изменения цвета текста заполнителя, я также добавил это в расширение.
источник
На Swift 3. Вы можете создать расширение и добавить после вашего класса просмотра.
источник
Пожалуйста, посмотрите на приведенный ниже пример кода;
Свифт 4:
источник
Вот код swift3 с @IBInspectable
создать новый файл Какао Touch Class Swift File
}
и замените файл приведенным ниже кодом, и вы получите опцию в инспекторе атрибутов раскадровки следующим образом
Наслаждаться :)
источник
** Здесь myTF является выходом для текстового поля MT **
источник
Вы можете создать одно изображение для нижней границы и установить его в качестве фона вашего UITextField:
или установите значение borderStyle равным none и поместите изображение строки точно равной длины в текстовое поле!
источник
Обновленный код:
Swift 5.0
Теперь вызовите эту функцию в viewDidLayoutSubviews ()
ПРИМЕЧАНИЕ. Этот метод будет работать только в viewDidLayoutSubviews ().
источник
Я рассмотрел каждое из этих решений, которые, кажется, также работают с одной проблемой. Темный режим и настройка фона
Параметр Background в UITextField должен соответствовать фону родительского представления, иначе строка не появится
Так что это будет работать в светлом режиме. Чтобы начать работать в темном режиме, измените цвет фона на черный, и это работает. Исключите задний цвет, и линия не появится.
Это оказалось лучшим решением для меня
источник
Руководство
источник
SwiftUI
в SwiftUI есть
View
вызов,Divider
который идеально подходит для этого. Вы можете добавить его ниже любого представления, встроив их в простоеVStack
:источник
Вы можете использовать это ОРГАНИЗОВАНО, а также можете ПОЛЬЗОВАТЬСЯ этим расширением дальше:
источник
}
вызов метода на viewdidload
mobileNumberTextField.underlinedLogin()
passwordTextField.underlinedLogin()
// выбираем как текстовое поле на основной плате
источник
Для просмотра: (рекомендуется)
Работает для всех типов
UIView
подклассов (просмотр, текстовый файл, метка и т. Д.), ИспользуяUIView extension
Это проще и удобнее. Но единственным условием является
view
обязательное наличие автоматического макета.Как пользоваться?
и
источник