Generic UI TextField in iOS

As iOS developers, most often we develop apps that have one or more forms prompting the user to enter his/her email address, date of birth, gender, phone number, etc. In such cases, we typically use UITextField and customize a few properties to launch different view pickers/keyboards.

‍

Since this is very common in iOS apps, we have created a UITextField wrapper class called AITextField that allows us to use a single textfield to present different pickers/keyboards as required.

‍

Why do we need a wrapper ?

The wrapper saves us precious time previously spent developing the most common UI behavior and allows us to focus on solving new problems instead.

‍

How Do I Use AITextField?

Adding AITextField to your project is simple – just follow the steps below.

a) Using Through Interface Builder

1. Drag and drop the UITextField in the screen.
2. Update the class name to AITextField here.

‍

‍

3. Create an IBOutlet and use it in your class.

‍

‍

b) Using Programmatically.

Use the init with frame function and add the field to your view.

let myTextField = AITextField.init(frame: myFrame)
self.view.addSubview(myTextField)

‍

For Date Picker

dateOfBirthTextField.textFieldType = .DatePickerTextField
dateOfBirthTextField.updateUIAsPerTextFieldType()

‍

For Phone Pad

phoneNumberTextField.textFieldType = .PhoneNumberTextField
phoneNumberTextField.updateUIAsPerTextFieldType()

‍

For Text Picker

genderTextField.pickerViewArray = [“Female”, “Male", “Others”]
genderTextField.textFieldType = .TextPickerTextField
genderTextField.updateUIAsPerTextFieldType()

‍

You can also use this AITextField as a general UITextField.

Customizing AITextField

‍

Adding Left and Right Views

myTextField.setLeftGap(width: 10, placeHolderImage: UIImage(named: “settings”)!)

or

myTextField.setRightGap(width: 10, placeHolderImage: UIImage(named: "copy")!)

‍

Styling Input View

We can add a separator at the bottom of the text field using:

myTextField.createSeparator(borderColor: .darkGray, xpos: 10)

‍

You can find the source code and AITextField class here.