CODEWITHSUNDEEP
iosiphonecocoa-touchuitextfielduikit
Mike Weller
Mike Weller

Reputation: 45598

UITextField blurred text

I am having a problem with a UITextField's text being blurred/anti-aliased even with a standard font size. The text will appear crisp when the control is the first responder, but blurred again when it loses focus:

alt text
(source: mikeweller.com)

Does anybody know how to fix this?

Upvotes: 10

Views: 8435

Answers (8)

user186297
user186297

Reputation:

I would love to contribute as I just discovered the answer on my own after quite a bit of frustration.

The UITextField in InterfaceBuilder has a forced frame height of 31 pixels. This cannot be click-dragged to resize nor can it be set in the frame properties in IB. You need to go to viewDidLoad and adjust the frame height to 32 pixels, and this should solve the problem.

Hopefully, future versions of IB will correct this.

Upvotes: 0

Dave
Dave

Reputation: 12206

Solution from this site explains that it can be related to resizing and iOS does not take care of this bug for layers, only the various views. I updated it to Swift 4:

view.contentScaleFactor = UIScreen.main.scale

Upvotes: 0

samvermette
samvermette

Reputation: 40437

Simply setting the UITextField frame height to an even value fixed it for me.

Upvotes: 0

sd.
sd.

Reputation: 1

I encountered this problem before. The solution below works perfectly for any text or frame size because it uses the round function to get rid of the fractional pixel values. Insert the following code after your instantiation of the uitextfield in question. 

CGRect temp = textField.frame;
temp.origin.x = round(temp.origin.x);
temp.origin.y = round(temp.origin.y);
textField.frame = temp;

Upvotes: 0

hfossli
hfossli

Reputation: 22962

i tried using CGRectIntegral and stuff. In my case changing min font size and font size in IB did it.

Upvotes: 0

Ortwin Gentz
Ortwin Gentz

Reputation: 54121

In addition to using non-fractional positioning one should make sure to use a non-centered vertical alignment for the UITextField. Looks like centered vertical alignment in combination with an odd font size results in blurred text, too.

Upvotes: 1

Mike Weller
Mike Weller

Reputation: 45598

OK I'm answering my own question here.

I found a number of references to this bug through Google, but everybody worked around it by playing with font sizes. After much hunting I found this thread that says anti-aliasing is applied when a view's frame contains fractional pixel values, e.g. if you calculate its size as a fraction of the super view.

Sure enough, casting the CGRect values to (int) for the view's frame worked perfectly. So as an example, if you wanted your text field to be centered vertically in the superview, you should use an (int) cast like this:

textFieldWidth = 300;
textFieldHeight = 31;
offsetX = 0;
offsetY = (superview.bounds.size.height - textFieldHeight) / 2;

textField.frame = CGRectMake((int) offsetX,
                             (int) offsetY,
                             (int) textFieldWidth,
                             (int) textFieldHeight);

There is also the CGRectIntegral function that you can use to convert a CGRect to integral values.

Upvotes: 12

Daniel Dickison
Daniel Dickison

Reputation: 21882

Use CGRectIntegral to make sure the text fields' frames are based on integer coordinates. You'll get fuzzy antialiasing when things lie on fractional coordinates.

Upvotes: 27

Related Questions