Magnification Magnifier with White Text and Transparent Background on Iphone

Question

You guys have helped so much with my last question, I thought I would give you a shot at another. I wrote an application with a theme that uses a dark blue glass background and white / gray text and shortcuts. The text fields in my application have clear backgrounds and white texts, and all this shows up very well. My only concern is that when you keep clicking in the text box to get a magnifying glass, of course, the white text appears on a white background ... which you cannot read. Has anyone got any ideas on how to implement a useful magnifier here?

Answer 1

I found out a simple job that achieved the desired effect. I also went through the full process of creating my own magnifier, but since there is clear documentation on creating your own magnifier (see kiyoshi's answer), and this other method is ridiculously simple, I decided to write it here. It basically just pretends to be a clear background, so white text appears in the magnifying glass. The background that I use for presentation 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 a visible text box and black background to make it look better:

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

Then I took this screenshot and made it translucent in Photoshop and overlaid my original background image to pinpoint where the text box appeared in the background:

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

Then I copied the exact pixels that will be used as the background of the text field to the new PNG, and saved it and set it as the background image:

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

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

Remember that the image will be repeated as a pattern inside the magnifying glass ... therefore, if you do not want to see the edges, just make sure your text box is larger than the height and width of the magnifying glass.

Before:

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

After

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

Hope this helps someone out there!

Answer 2

Unfortunately, the only "public" way that I know how to change the background of the magnifier is to set textField.backgroundColor

I assume that since you set your background as clearColor, the default is white, so the only way is to set backgroundColor to be somehow obscure.

I also assume that since you mentioned that you set your backgrounds, it is clear that if this is not clear, this is not an option. So I can figure out how to get around this:

• Assuming that the magnifying magnifier gets its background color by calling the implementation of backgroundColor (and not some other obscure private API method): override the backgroundColor method and return a solid color.
• Create your own magnifying glass (maybe this is not possible)

Answer 3

In fact, it is entirely possible to create your own cycle. I haven’t tried to serve an apple, but I don’t know how they relate to this.

The main idea is to redefine touches, use a timer to see how long the user has touched the screen. A magnifying glass is just a UIView that captures an image as an image and enlarges it.

Check out this Craftymind article here.

The article has a cache of the entire image, which is definitely faster for rendering the magnifying glass, but if you have things (i.e. text fields) that are constantly changing, I was able to render the image in real time without too much of a performance.