Saya ingin menjaga perbatasan hanya di bagian bawah saja UITextField
. Tapi saya tidak tahu bagaimana kita bisa mempertahankannya.
Bisakah Anda memberi tahu saya?
Saya membuat custom textField
untuk membuatnya komponen yang dapat digunakan kembali untuk 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)
}
}
}
Pemakaian:
@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
Saya menggunakan Bahasa Pemformatan Visual (VFL) di sini, ini akan memungkinkan menambahkan baris ke apa pun UIControl
.
Anda dapat membuat UIView
kelas ekstensi sepertiUIView+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
}
}
}
Pemakaian:
textField.addLine(position: .LINE_POSITION_BOTTOM, color: .darkGray, width: 0.5)
Sasaran C:
Anda bisa menambahkan metode helper ini ke kelas helper global Anda (saya menggunakan metode kelas global) atau di controller tampilan yang sama (menggunakan metode 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;
}
}
Pemakaian:
[self addLine:self.textField atPosition:LINE_POSITION_TOP withColor:[UIColor darkGrayColor] lineWitdh:0.5];
Kode 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;
Jika Anda ingin melakukannya tanpa mengetahui frame sebelumnya, tanpa subklas dan tanpa 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
}
}
Panggil sebagai yourTextField.setBottomBorder()
dari mana saja tanpa memastikan frame menjadi benar.
Hasilnya terlihat seperti ini:
UI cepat
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()
?Anda dapat membuat subkelas
UITextField
seperti yang ditunjukkan di bawah ini:sumber
tintColor
dididBeginEditing
dandidEndEditing
Tidak ada solusi yang memenuhi harapan saya. Saya ingin subkelas TextField karena saya tidak ingin mengatur perbatasan secara manual setiap saat. Saya juga ingin mengubah warna batas misalnya untuk kesalahan. Jadi, inilah solusi saya dengan
Anchors
:---- Pilihan ----
Untuk mengubah warna tambahkan sth seperti ini ke
CustomTextField Class
:Dan untuk memicu panggilan Kesalahan ini setelah Anda membuat instance CustomTextField
Semoga ini bisa membantu seseorang;)
sumber
dan kemudian lakukan ini:
sumber
viewDidLoad()
, bingkai akan salah. Jadi kita punya 2 pilihan:viewDidLayoutSubviews()
atauviewDidAppear()
. TetapiviewDidLayoutSubviews()
menelepon berkali-kali dan menelepon dariviewDidAppear()
bukan pengalaman yang baik.viewDidLayoutSubviews()
juga tidak akan berfungsi jika bidang teks bersarang di dalammultiple View
. Anda akan mendapatkan beberapa broder.Anda dapat membuat ekstensi ini di luar kelas dan ganti lebar dengan apa pun borderWidth yang Anda inginkan.
Cepat 4
Asli
dan kemudian menambahkan ini ke viewDidLoad Anda menggantikan YourTextField dengan variabel UITextField Anda dan dengan warna apa pun yang Anda inginkan di perbatasan
Ini pada dasarnya menambahkan tampilan dengan warna itu di bagian bawah bidang teks.
sumber
Tujuan C
Cepat
sumber
Apa yang saya lakukan adalah membuat ekstensi ke UITextField dan menambahkan properti Designer yang dapat diedit. Mengatur properti ini ke warna apa pun akan mengubah batas (bawah) ke warna itu (mengatur batas lainnya menjadi tidak ada).
Karena ini juga mengharuskan untuk mengubah warna teks tempat penampung, saya juga menambahkan itu ke ekstensi.
sumber
Pada Swift 3. Anda dapat membuat ekstensi dan menambahkan setelah kelas tampilan Anda.
sumber
Silakan lihat contoh kode di bawah ini;
Swift 4:
sumber
Berikut adalah kode swift3 dengan @IBInspectable
buat file baru File Swift Kelas Cocoa Touch
}
dan ganti file dengan kode di bawah ini dan Anda akan mendapatkan opsi di inspektur atribut storyboard seperti ini
Nikmati :)
sumber
** Di sini myTF adalah outlet untuk MT TEXT FIELD **
sumber
Anda dapat membuat satu gambar untuk batas bawah dan mengaturnya ke latar belakang UITextField Anda:
atau atur borderStyle ke none dan masukkan gambar garis dengan panjang yang sama persis dengan textfield!
sumber
Kode Diperbarui:
Swift 5.0
Sekarang panggil fungsi ini di viewDidLayoutSubviews ()
CATATAN: Metode ini hanya akan berfungsi di viewDidLayoutSubviews ()
sumber
Saya telah melihat masing-masing solusi yang juga tampaknya bekerja dengan satu masalah. Mode Gelap dan pengaturan latar belakang
Pengaturan Latar Belakang UITextField harus sesuai dengan latar belakang tampilan induk atau tidak ada garis yang muncul
Jadi ini akan bekerja pada mode cahaya. Untuk mulai bekerja dalam mode gelap, ubah warna latar belakang menjadi hitam dan berfungsi. Kecualikan kembali warna dan garis tidak muncul
Ini akhirnya menjadi solusi terbaik bagi saya
sumber
Tutorial
sumber
SwiftUI
di SwiftUI, ada
View
yang disebutDivider
yang sangat cocok untuk ini. Anda dapat menambahkannya di bawah tampilan apa pun dengan menyematkannya menjadi sederhanaVStack
:sumber
Anda dapat menggunakan ini TERORGANISASI dan juga dapat MENYESUAIKAN ekstensi ini lebih lanjut:
sumber
}
metode panggilan pada viewdidload
mobileNumberTextField.underlinedLogin()
passwordTextField.underlinedLogin()
// pilih bidang teks seperti di papan induk
sumber
For View: (Paling Direkomendasikan)
Ini berfungsi untuk semua jenis
UIView
subclass (lihat, textfiled, label, dll ...) menggunakanUIView extension
Itu lebih sederhana dan nyaman. Tetapi satu-satunya syarat adalah
view
harus mengandung tata letak otomatis.Cara Penggunaan?
dan
sumber