Loupe Magnification with White Text & Clear Background on Iphone

Question

You guys helped so much with my last question, I figured I'd give you a shot at another. I have written an app with a theme that uses a dark blue glassy background and white / gray text and labels. The textfields in my app have clearcolor backgrounds and white texts and everything shows up very well. My only concern is that when you hold down a touch in a text box to get the magnification loupe, of course the white text shows up on a white background... which you can not read. Anybody got any ideas on how to implement a usable loupe here?

Answer 1

I figured out a simple work around that achieved the desired effect. I also went through the full process of making my own loupe but since there is clear documentation on making your own loupe (see kiyoshi's answer), and this other method is ridiculously simple, I decided to document it here. It is basically just faking the clear background so that the white text shows up in the loupe. The background I am using for the view looks like blue smoke on a darker blue background:

alt text http://img231.imageshack.us/img231/9835/beforestatex.jpg

I took a screenshot of the simulator with the textfield visible and a black background so it would show up better:

alt text http://img193.imageshack.us/img193/9023/blackfieldx.jpg

Then I took that screenshot and made it semi transparent in photoshop, and overlayed my original background image to find exactly where the textfield appeared on the background:

alt text http://img266.imageshack.us/img266/9493/transparencyfullscreenx.jpg

Then I copied the exact pixels that would be used as the background of the textfield into a new PNG and saved that and set it as the the background image:

alt text http://img41.imageshack.us/img41/3450/textboxback.png

forwardToField.backgroundColor = [UIColor colorWithPatternImage: [UIImage imageNamed:@"textboxback.png"]];

Keep in mind that the image will be repeated as a pattern within the loupe... so if you don't want to see the edges, simply make sure your textfield is larger than the loupe height and width.

Before:

alt text http://img196.imageshack.us/img196/2672/beforex.jpg

After:

alt text http://img23.imageshack.us/img23/2182/afterxd.jpg

I hope this helps somebody out there!

Answer 2

Unfortunately, the only "public" way I know how to change the loupe background is by setting textField.backgroundColor

I assume that since you're setting your backgrounds as clearColor, the magnifier defaults to white background, so the only way is to set your backgroundColor as something not clear.

I'm also assuming that since you did mention that you set your backgrounds a clear, that having it not be clear is not an option. So two ways I can think up in my mind about how to get around this is:

1. Assuming that the magnification lopue gets its background color by calling the backgroundColor implementation (and not some other obscure private API method): override the backgroundColor method and return a solid color.
2. Create your own loupe (probably not feasible)

Answer 3

Actually its pretty feasible to create your own loop. Haven't tried subitting to apple yet so don't know how they feel about it.

Basic idea is override touches, use a timer to see how long the user has been touching the screen. The loupe is just a UIView that grabs as an image the view behind it and magnifies it.

Check out this article from Craftymind here

The article has you cache the entire image behind which is definitely faster, for rendering the loupe, but if you have stuff (i.e. textFields) that are constantly changing I've been able to render the loope image real-time without too much of a performance hit.