İçeriğe geç

SwiftUI ile CustomTextField oluşturmak

Merhabalar bu yazımda SwiftUI ile arayüz oluştururken Custom bir TextField yaratarak bunu UITextFieldDelegate ile birlikte kullanımını göstereceğim.

SwiftUI ile Delegate yapısı ve UIKit nesnelerini birlikte kullanmak için UIViewRepresentable protokolünden türeyen bir yapı oluşturmanız gerekli. Ve bu yapı içerisinde gerekli nesne yaratma ve ui yenileme işlemleri ile birlikte, ilgili nesnenin delegate yapısına Basit bir ara Coordinator sınıfı yaratarak kullanabiliyorsunuz.

Yukarda gördüğünüz yapıda basit bir field seti arayüzü hazırladım.

struct CustomView:View {
    
    @State var email:String = ""
    @State var password:String = ""

    var body: some View {
        ZStack {
            Color(.lightGray)
            GeometryReader { v in
                VStack(spacing: 10) {
                    CustomTextField(text: self.$email, keyType: .emailAddress, placeHolder: "E-mail:")
                        .padding(EdgeInsets(top: 0, leading: 10, bottom: 0, trailing: 10))
                        .frame(width: 250, height: 50, alignment: .center)
                        .background(Color.white)
                        .cornerRadius(10)
                    CustomTextField(text: self.$password, keyType: .default, placeHolder: "Password:", isSecureText: true)
                        .padding(EdgeInsets(top: 0, leading: 10, bottom: 0, trailing: 10))
                        .frame(width: 250, height: 50, alignment: .center)
                        .background(Color.white)
                        .cornerRadius(10)
                    Button(action: {
                        print("Email: \(self.email) \n Password: \(self.password)")
                    }) {
                        Text("Register")
                            .frame(width: 120, height: 40, alignment: .center)
                            .background(Color.blue)
                            .foregroundColor(.white)
                            .cornerRadius(10)
                    }
                    .offset(x: 0, y: 10)
                }
                .frame(width: v.size.width, height: 300, alignment: .center)
                .offset(x: 0, y: v.size.height * 0.1)
                Spacer()
            }
        }
    }
}

Burada kullandığım CustomTextField sınıfınıda aşağıda inceleyebilirsiniz.

struct CustomTextField: UIViewRepresentable {
    
    class Coordinator: NSObject, UITextFieldDelegate {
        var parent: CustomTextField
        
        init(_ parent: CustomTextField) {
            self.parent = parent
        }
        
        func textFieldDidChangeSelection(_ textField: UITextField) {
            parent.text = textField.text ?? ""
        }
    }
    
    @Binding var text: String
    
    var keyType: UIKeyboardType
    var placeHolder: String
    var isSecureText:Bool? = nil
    
    func makeUIView(context: Context) -> UITextField {
        let textfield = UITextField()
        textfield.delegate = context.coordinator
        textfield.keyboardType = keyType
        if let secureType = isSecureText, secureType {
            textfield.isSecureTextEntry = secureType
        }
        let toolBar = UIToolbar(frame: CGRect(x: 0, y: 0, width: textfield.frame.size.width, height: 44))
        let doneButton = UIBarButtonItem(title: "Done", style: .done, target: self, action: #selector(textfield.doneButtonTapped(button:)))
        toolBar.items = [doneButton]
        textfield.inputAccessoryView = toolBar
        return textfield
    }
    
    func makeCoordinator() -> Coordinator {
        return Coordinator(self)
    }
    
    func updateUIView(_ uiView: UITextField, context: Context) {
        uiView.text = text
        uiView.placeholder = placeHolder
    }
}

extension  UITextField{
    @objc func doneButtonTapped(button:UIBarButtonItem) -> Void {
        self.resignFirstResponder()
    }
}

 

Tarih:SwiftUI

İlk Yorumu Siz Yapın

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Copyright © 2020 Kenan Atmaca