Je voudrais garder la bordure dans la partie inférieure uniquement UITextField
. Mais je ne sais pas comment on peut garder ça en bas.
Pouvez-vous me conseiller?
Je crée un textField
composant personnalisé pour en faire un composant réutilisable pour 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)
}
}
}
Usage:
@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
J'utilise le langage de formatage visuel (VFL) ici, cela permettra d'ajouter une ligne à tout UIControl
.
Vous pouvez créer une UIView
classe d'extension commeUIView+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
}
}
}
Usage:
textField.addLine(position: .LINE_POSITION_BOTTOM, color: .darkGray, width: 0.5)
Objectif c:
Vous pouvez ajouter cette méthode d'assistance à votre classe d'assistance globale (j'ai utilisé la méthode de classe globale) ou dans le même contrôleur de vue (à l'aide d'une méthode d'instance).
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;
}
}
Usage:
[self addLine:self.textField atPosition:LINE_POSITION_TOP withColor:[UIColor darkGrayColor] lineWitdh:0.5];
Code 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;
Si vous voulez faire sans connaître les cadres à l' avance, sans sous - classement et sans Autolayout :
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
}
}
Appelez comme yourTextField.setBottomBorder()
de n'importe où sans vous assurer que les cadres sont corrects.
Le résultat ressemble à ceci:
Interface utilisateur rapide
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()
?Vous pouvez créer une sous-classe de
UITextField
comme indiqué ci-dessous:la source
tintColor
indidBeginEditing
etdidEndEditing
Aucune de ces solutions n'a vraiment répondu à mes attentes. Je voulais sous -classer le TextField car je ne veux pas définir la bordure manuellement tout le temps. Je voulais aussi changer la couleur de la bordure par exemple pour une erreur. Voici donc ma solution avec
Anchors
:---- Optionnel ----
Pour changer la couleur, ajoutez qc comme ceci au
CustomTextField Class
:Et pour déclencher l'erreur, appelez ceci après avoir créé une instance de CustomTextField
J'espère que ça aide quelqu'un;)
la source
puis faites ceci:
la source
viewDidLoad()
, le cadre serait incorrect. Nous avons donc 2 choix:viewDidLayoutSubviews()
ouviewDidAppear()
. MaisviewDidLayoutSubviews()
appeler plusieurs fois et appeler deviewDidAppear()
ne serait pas une bonne expérience.viewDidLayoutSubviews()
ne fonctionnera pas non plus si le champ de texte est imbriqué à l'intérieurmultiple View
. Vous obtiendrez plusieurs brodeurs.Vous pouvez créer cette extension en dehors de la classe et remplacer width par le borderWidth de votre choix.
Swift 4
Original
puis ajoutez ceci à votre viewDidLoad en remplaçant yourTextField par votre variable UITextField et par la couleur de votre choix dans la bordure
Cela ajoute essentiellement une vue avec cette couleur au bas du champ de texte.
la source
Objectif c
Rapide
la source
Ce que j'ai fait, c'est de créer une extension pour UITextField et d'ajouter une propriété modifiable Designer. Définir cette propriété sur n'importe quelle couleur changerait la bordure (en bas) en cette couleur (définir les autres bordures sur aucune).
Étant donné que cela nécessite également de changer la couleur du texte de l'espace réservé, j'ai également ajouté cela à l'extension.
la source
Sur Swift 3. Vous pouvez créer une extension et l'ajouter après votre classe d'affichage.
la source
Veuillez consulter l'exemple de code ci-dessous;
Swift 4:
la source
Voici le code swift3 avec @IBInspectable
créer un nouveau fichier Cocoa Touch Class Swift File
}
et remplacez le fichier par le code ci-dessous et vous obtiendrez l'option dans l'inspecteur d'attributs de storyboard comme celui-ci
Prendre plaisir :)
la source
** Ici myTF est la sortie pour MT TEXT FIELD **
la source
vous pouvez créer une image pour la bordure inférieure et la définir sur l'arrière-plan de votre UITextField:
ou définissez borderStyle sur none et mettez l'image de la ligne exactement égale à textfield!
la source
Code mis à jour:
Swift 5.0
Appelez maintenant cette fonction dans viewDidLayoutSubviews ()
REMARQUE: cette méthode ne fonctionnera que dans viewDidLayoutSubviews ()
la source
J'ai examiné chacune de ces solutions qui semblent également fonctionner avec un problème. Mode sombre et réglage de l'arrière-plan
Le paramètre d'arrière-plan de UITextField doit correspondre à l'arrière-plan de la vue parente ou aucune ligne n'apparaît
Donc, cela fonctionnera en mode clair Pour arriver au travail en mode sombre, changez la couleur d'arrière-plan en noir et cela fonctionne.Excluez la couleur arrière et la ligne n'apparaît pas
Cela a fini par être la meilleure solution pour moi
la source
Didacticiel
la source
SwiftUI
dans SwiftUI, il y a un
View
appeléDivider
qui correspond parfaitement à cela. Vous pouvez l'ajouter sous n'importe quelle vue en les intégrant dans un simpleVStack
:la source
Vous pouvez utiliser cette ORGANISÉ et peut également PERSONNALISER cette nouvelle extension:
la source
}
call méthode sur viewdidload
mobileNumberTextField.underlinedLogin()
passwordTextField.underlinedLogin()
// sélectionner comme champ de texte sur le tableau principal
la source
Pour la vue: (le plus recommandé)
Cela fonctionne pour tous les types de
UIView
sous - classes (vue, fichier texte, étiquette, etc.) en utilisantUIView extension
C'est plus simple et plus pratique. Mais la seule condition est que le
view
doit contenir une mise en page automatique.Comment utiliser?
et
la source