How to Draw Credit Card Logo in your TextField (Swift-XCode)
using leftView property in UITextField.
in the GIF, you can see the logo appears accordingly with the user input, how do we recognize a credit card brand ? the credit card number is what we need to find if we have a MasterCard or a Visa and so forth.
you can find surfing the web that the first four digit are enough to understand the Card provider and then put the logo in the right spot, let’s dive into it !
in your project folder create a new folder called View and create a Cocoa Touch Class inside of it.
the file has to have a Subclass the UITextField and you can name the file “drawingCreditCardLogoInTextField” .
what is a leftView in a TextField? it is basically a ImageView rectangle and it will be the place of our Credit Card logo, since our text field size could depend on thousands of variables, we need to override this property to fit our logo in the textField. Type leftViewRect and choose the leftViewRect(forBounds: CGRect).
write this code in the func. You will call this property on the textview with this subclass, it will draw the leftView with the above setup. Height and width take the value from the the TextField frame itself ( self.) , as per the height is perfect as it is, on the other hand we don’t want the default width , that’s the purpose of dividing by 6 my width value, it will depends on your project and on how big it is your textField.(the one in the GIF is 346 width). The newSize constant redefines the leftView and it will put this rectangle in the lefthand side corner (see the GIF). X and y parameters determinate the point where the view will be displayed, Y is 20 times smaller than the textField height value, our constants height and weight will finish to set up the rectangle store in the newSize constant. Eventually return newSize as a function result. Now, We need the functions to find which credit card the user typed in and then choose the right image. Download the images from the following link and paste them in your Project into the Assets folder.
the function will be based on the first credit card digits, as you might know MasterCard is all numbers starting with 51 throughout 55, Visa is all numbers starting with 4, American Express is all numbers starting with 34 or 37 and Discover is all numbers starting with 6011, 622126–622925, 644, 645, 646, 647, 648, 649, 65. On the web you can find tons of data and info about the credit card issuer numbers, for instance, I found that discover was identified with 6011 and all of the numbers starting with 68, I do not know which one is true and it is not the purpose of my article. Let’s talk about coding the function. We will parse one String parameter in our method and we will return a Boolean value (true or false) whether the string meet the criteria.
func masterCard(userInput: String) -> Bool {} , this will return true if it is a masterCard and false if it is not. we have to right some logic based on the criteria explained above ( MasterCard is all numbers starting with 51 throughout 55) :
the other methods are based on this concept. When you have the four methods in place we can write the function to assign the logo to the LeftView.
the logic will be IF discover then show the discover logo, if masterCard show the masterCard logo and so forth. We need to assign an ImageView to theLeftViewMode in the textField, therefore we need to create a constant and assign the ImageView() type, let imageView = UIImageView(), then we will create an image value and we will assign the proper image accordingly to the if statement we are in.
let Image = UIImage(named: “mc_symbol_opt_45_3x.png”) // this will be the MasterCard. Now we can assign the image to the imageView and then the ImageView to the leftViewMode:
let imageView = UIImageView()
let Image = UIImage(named: “mc_symbol_opt_45_3x.png”)
imageView.image = Image
textField.leftView = imageView
before all of that, you also need to set the leftViewMode property as .always if you want to see the image in the textfield, the complete method:
call the function in the @IBAction linked to the textField you want the credit card logo shown to see the result in the textField while you’re typing
I hope it was helpful. if you have some feedbacks or suggestions on how to improve the method I’d love to receive them.
Thank you all very much