rob's blog » iphone

Using an HTML Web View with a Transparent Background in iPhone SDK’s Interface Builder and Xcode

rob — Fri, 26 Jun 2009 16:32:36 +0000

Something almost every iPhone application needs is an About and Help view that allows the user to learn a little bit about the application they’re using and how it should be operated. The problem with a UITextView in Apple’s XCode and Interface Builder SDK is that you can not use rich-text styling or even bold one line over another.

One solution to this problem would be to create image files containing stylized text and then rasterize them and allow the user to page through them. The problem with this is that you can’t have tappable URLs or links embedded in the text.

David Peixotto, coding ninja and my business partner for Neutrinos, suggested we look at using a Webview or HTML view and put an imageview in the background. The trick is telling the iPhone to display a UIWebView with a transparent background. I looked around for the solution to this and came across this helpful post in the iPhone Developer SDK forums.

Step one of getting a transparent web view in interface builder is to create HTML in the controller.m for the view containing the webview that contains the CSS line: Inside the sections of the html.

Step two is to set the background color of the webview to clear or transparent: myWebView.backgroundColor = [UIColor clearColor];

Step three is to make sure that the “Opaque” box on the inspector of properties of the WebView is unchecked.

That should be all you need to do. Drop a UIImageView behind the newly transparented web view object and you should be able to use a scrollable rich text with hyperlinks. Horray.

If this helped you or confused you more, please post in the comments! We do have it working on 3.0 much to the happiness of our client.

Bonnaroo 2009 Pocket Images for the iPhone

rob — Mon, 08 Jun 2009 02:30:07 +0000

The less you need to carry around, the more you can focus on the music and artistic displays at Bonnaroo. I put together two sets of Bonnaroo schedules formatted for the iPhone.

Download the 2009 Bonnaroo Schedule Formatted for the iPhone

Set one is meant to be saved as a athe following five jpeg images formatted for the iPhone in 480×320. The schedules are taken from Mizary’s printable schedule.

It is pretty hard to read, you have to hold it close–but if you already know the band names and are already familiar with the schedule you’re fine.

Set two is a set of larger, portrait-oriented daily festival schedules that you can just view from your photo gallary. Here’s Friday (I included the inforoo brunch):

Here are two ways to get these onto your iphone / ipod touch:

Download the zip of images at the bottom of this post.
Attach a set of the images to an email, send it to yourself.
Open the email on your iPhone, then tap to open each of the five images.
Tap and hold one of the images.
Select Save all 5 Images.

Download the zip of images at the bottom of this post.
Add them to your photo library in iTunes and sync.

– For Wallpapers: Go to image gallery chose the action button and tap Save as Wallpaper. Change for each day of the festival For Portrait images: Just view through them in the photo gallery.

Download the 2009 Bonnaroo Schedule Formatted for the iPhone

iPhone Developer Resource: Preview Application Icon 3D Effect

rob — Tue, 29 Jul 2008 05:02:37 +0000

My friend Dave Peixotto is in charge of coding and software repository work on our iPhone application development. I am in charge of the marketing and business aspects of our software company, Neutrinos, LLC.

One of my tasks with the release of our recently submitted iPhone application, TipTotaler was to select an icon for our app. As you may be aware from Apple’s iPhone application submission guidelines, you must include a flat 57 x 57 pixel and 512 x 512 pixel image for use on the iPhone and iPod Touch home screen and for the iTunes store.

There are a couple of challenges for iPhone Application icon graphic designers: First, it isn’t always easy to tell what will look good at both 512×512 and 57×57. Second, having the developer rebuild and send updated screenshots is laborious as is monkeying around in Photoshop to eyeball how the images look at lower resolution with 3D effects.

In order to speed up the process, I put together an Adobe Photoshop macro aka ‘action’ that will quickly take any square image and apply similar 3D effects that Apple uses. The 3D effects used on buttons on the iPhone home screen and the iTunes store application pages include rounded corners and a light sheen over rounded across the top third to one half of the button. My macro automatically transforms any image into a 3D iPhone Application icon with these characteristics.

I’ve recorded a screen cast demonstration of how to use the macro using Jing. You can view the screencast here. Click the link below to download a zip file containing the Photoshop action macro and iPhone gallery image to test out your 3D button on.

Remember, your starting image must be a perfect square of any size prior to running the macro. Questions? Watch the screencast above or post a comment.

-> Download iPhone Application Icon Preview Macro