Swift 4.2: UITextField secureEntryText using Image instead of Default Bullets

Question

I want to make a custom class of UITextField where secureTextEntry turned on, so when I'm typing text, the text will hidden and changed to UIImage instead of default "bullets".

This question is related to this question, but instead of custom fonts, I want to use UIImage instead. Anyone know how?

Here's the example of expected result:

and here's my current customclass:

import UIKit
@IBDesignable
class SecuredBorderTextField: UITextField {
}

score 1 · Accepted Answer · answered Oct 31 '19 at 08:43

After two days struggling with this, I come to solution that can trick this. I'm creating stackView that contain of UITextField. I create array for temporary text that filled the UITextField. Then, when the UITextField is filled by some character, I programmatically add UIImage. In my code, will look like this.

let chars = Array(shieldString)
for (index, char) in chars.enumerated() {
                if let tmp = self.stackView.arrangedSubviews[index] as? UITextField {
                    let imageView = UIImageView(image: UIImage(named: "dotImage")!)
                    imageView.frame = CGRect(x: 0, y: 0, width: 28, height: 28)
                    imageView.center = CGPoint(x: tmp.frame.size.width  / 2, y: tmp.frame.size.height / 2)
                    imageView.tag = 100
                    tmp.addSubview(imageView)
                }
 }

And for clear the Image, just using this. I use tag so I can delete specific subview.

for ele in self.stackView.arrangedSubviews {
                if let viewWithTag = self.view.viewWithTag(100) {
                    viewWithTag.removeFromSuperview()
                }
}

I know that this not custom class, and quiet messy, but if you in a rush like me, this probably will save you.

Swift 4.2: UITextField secureEntryText using Image instead of Default Bullets

1 Answers1