Mobile Safari-style back button for UIWebView?

Question

I haven't been able to find any sort UIBarButtonSystemItem representing tha "Back" button in Mobile Safari. I want my UIWebView's controls to look just like the ones in Mobile Safari so it makes sense. Would the best solution be to just screenshot UIBarButtonSystemItemPlay (same image as the Forward button) and flip it?

Thanks.

Answer 1

I'm not sure how iPhone apps are packaged, but if you can open the .app folder and poke around, you should be able to find the actual image file in there in the resources folder...

Answer 2

I think the right move is to try and find the raw icon somewhere (try Terminal, and find in your /Developer directory).

It's possible that

/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator3.1.sdk/Applications/WebSheet.app/ArrowBack.png

is the right file.

Just taking a screenshot isn't going to work, as the toolbar icons are based on alpha levels rather than colours. If you grab a screenshot and flip it, you'll just end up with a solid square for your button.

Answer 3

Hi, you can access iPhone app packages by cd command in terminal. You will probably find images in resources folder or the main folder of the app. Then you can copy them with cp command in terminal.

Good luck

Answer 4

I had the same problem but have found a very nice solution:

http://outerlevel.com/blog/2008/12/26/code-example-drawing-the-iphone-back-button/

But you have to change some values

as the following:

CGContextBeginPath(context);
CGContextMoveToPoint(context, 8.0f, 12.0f);
CGContextAddLineToPoint(context, 24.0f, 3.0f);
CGContextAddLineToPoint(context, 24.0f, 21.0f);
CGContextClosePath(context);
CGContextFillPath(context);

only a little tweak from me because the back button was not aligned to the forward button, back button was 1px too high. btw should I make this to community Wiki ? im new here ...

Answer 5

Unicode is your friend here.

Create a UIBarButtonItem (in Interface Builder or in code) and set it to "Custom" where you can enter text for the button.

Now use these Unicode characters to simulate the back & forward buttons:

◄ and ►

I use it in my apps and it looks great.