Re: Drawing boxes around each digit entered in UITextField (Number Pad)
Re: Drawing boxes around each digit entered in UITextField (Number Pad)
- Subject: Re: Drawing boxes around each digit entered in UITextField (Number Pad)
- From: Devarshi Kulshreshtha <email@hidden>
- Date: Sun, 10 Feb 2019 09:31:03 +0530
To be more specific I am trying to implement OTP field as a single text
field. I was trying to plot 6 boxes in a field, so that user can enter one
digit in each box.
On Sunday, February 10, 2019, Gary L. Wade <email@hidden>
wrote:
> Rather than using a UITextField and guessing where things are, look at
> UITextView and its underlying components to know where each character
> actually is and how to coordinate your drawing with the drawing of each
> grapheme. If you only want to draw the boxes when editing, you could
> instead provide your own field editor that does the same thing, and drawing
> when not editing would follow the non-boxed method.
> --
> Gary L. Wade
> http://www.garywade.com/
>
> On Feb 9, 2019, at 12:36 PM, Devarshi Kulshreshtha <
> email@hidden> wrote:
>
> I am trying to draw boxes around each digit entered by a user in
> UITextField for which keyboard type is - Number Pad.
>
> To simplify the problem statement I assumed that each of the digits (0 to
> 9) will have same bounding box for its glyph, which I obtained using below
> code:
>
> func getGlyphBoundingRect() -> CGRect? {
> guard let font = font else {
> return nil
> }
> // As of now taking 8 as base digit
> var unichars = [UniChar]("8".utf16)
> var glyphs = [CGGlyph](repeating: 0, count: unichars.count)
> let gotGlyphs = CTFontGetGlyphsForCharacters(font, &unichars,
> &glyphs, unichars.count)
> if gotGlyphs {
> let cgpath = CTFontCreatePathForGlyph(font, glyphs[0], nil)!
> let path = UIBezierPath(cgPath: cgpath)
> return path.cgPath.boundingBoxOfPath
> }
> return nil
> }
>
> I am drawing each bounding box thus obtained using below code:
>
> func configure() {
> guard let boundingRect = getGlyphBoundingRect() else {
> return
> }
> for i in 0..<length { // length denotes number of allowed digits in
> the box
> var box = boundingRect
> box.origin.x = (CGFloat(i) * boundingRect.width)
> let shapeLayer = CAShapeLayer()
> shapeLayer.frame = box
> shapeLayer.borderWidth = 1.0
> shapeLayer.borderColor = UIColor.orange.cgColor
> layer.addSublayer(shapeLayer)
> }
> }
>
> Now problem is - if I am entering digits - 8,8,8 in the text field then
> for first occurrence of digit the bounding box drawn is aligned, however
> for second occurrence of same digit the bounding box appears a bit offset
> (by negative x), the offset value (in negative x) increases for subsequent
> occurrences of same digit.
>
> I tried to solve the problem by setting NSAttributedString.Key.kern to 0,
> however it did not change the behavior.
>
> Am I missing any important property in X axis from the calculation due to
> which I am unable to get properly aligned bounding box over each digit?
> Please suggest.
>
> --
> Thanks,
>
> Devarshi
>
>
>
--
Thanks,
Devarshi
_______________________________________________
Cocoa-dev mailing list (email@hidden)
Please do not post admin requests or moderator comments to the list.
Contact the moderators at cocoa-dev-admins(at)lists.apple.com
Help/Unsubscribe/Update your Subscription:
This email sent to email@hidden