Creating Custom Glossy Gradient Buttons Programmatically

As my experience, and hopefully skill, in iPhone development has matured over the past year and half I am in the constant search for the best techniques for my apps to run better, faster, and consequently more efficient.  Of the top developers that I follow they all make references to the importance of utilizing subclasses of UIViews and the underlying subsets of views in general.

I love the UI elements that are used on the phone. I didn't realize the awesome power of CoreAnimation and the flexibility that it gives you to manipulate and create graphics as such a granular level.  I set out to see if I could recreate a common iPhone UI element completely programmatically: a glossy gradient button that still responds to touch events.

The end result was a success and a great learning experience.  I still need to add in more testing to make sure that interacting with all these views is more efficient than interacting with standard pngs.

This biggest issue that I ran into was "re-enable" the button actions.

Simply subclassing UIButton did create a problem when dealing with the UIControlEventTouchUpInside/UIControlEventTouchUpOutside methods that you associate with buttons.

I was able to overcome this issue by implementing the touchesBegan and touchesEnded methods.  Remember...UIButton inherits from UIControl, which in-turn inherits from UIView.

Problem solved.

Download Project

Turn by Turn Directions with MapKit and Google Maps

Update - 03.31.2010

I decided that I didn't like the accuracy of the location from the browser.  It is isn't as good as the MapKit or default Google Maps app on the phone.  I added a button the directions page to open default maps application.

One of the best features used in Google Maps is the turn-by-turn directions.  Unfortunately, I haven't seen, and don't even know if it exists without proprietary code, an effective way to show turn-by-turn directions using the MapKit API in the iPhone SDK.  Though Google announced that they have included it in their Android platform they were vague about if/when it might come to the iPhone SDK.  No matter, where there is CoreLocation there is a way.

Most smaller companies only have one "brick and mortar" location.  So I wanted to show that location on the map and then present the user with ability to get turn by turn directions to their location.  In my example app the marker will show the location of my favorite sushi place in Memphis, Sekisui's Pacific Rim.

No clear way to implement turn-by-turn directions with MapKit using the iPhone SDK.  Though Safari for the iPhone has the ability to get your current location via the browser, i wasn't very impressed with it's accuracy.

Use CoreLocation to get the user's lat/long and then pass that to a UIWebView that will display a Google Map with directions.  Though in this example I am using a local html that is stored on the phone a better implementation would be to have the file stored remotely and then cached on the user's phone for faster load time.  However, it is important to note that you should "decache" the file if the user's previous coordinates are different then their new current location.

For the best results and accuracy it is better to run this on your device since CoreLocation the simulate will show Apple's headquarters as the user's location.

UIViews with Rounded Corners and Animations

One of the best iPhone reference books on the market today is iPhone SDK Development by Bill Dudney and Chris Adamson, published by Pragmatic Programmers.  The examples are real-world, easy to follow and cover just about any area of development that one needs.  In my earlier projects and example code I tended to use a lot of graphics for buttons and backgrounds because I need something with rounded corners and/or a gradient.  However, in my latest project I have wanted to get away from that and utilize CoreAnimation and more UIView drawing techniques and the results have been outstanding.  Load time on my views are much faster because all the drawing and rendering are done on the compiled view level and not from the rendering of an image.

 I created a sample project that loads a three different views onto the controller and animates them.  There is nothing overly complex about the code at all and can be customized to be more configurable, but is written to show the power and flexibility of creating custom views and animations.

The rounded corner drawing in the project was sample code from the iPhone SDK Development Book.  Credit where  credit is due to Bill and Chris.

As always I encourage anyone who downloads the project to make any modifications and/or enhancements.  For example, you could add in the functionality of firing of the animation based upon text field values or randomizing the speed of the animation.

Displaying Data on the iPhone with Index UITableView

It is forgone conclusion that if you need to present a large amount of data with a UITableView then you should do so using an index and index sections.  As with most tutorials that I have read on this topic, the scenarios used got me 80% of the way.  In my humble opinion, the solutions where either over engineered or they didn't apply to my use case.  Hopefully this tutorial/sample project will bridge the gap.

The tutorial that I got the most from is: iPhone Development: Creating Native Contacts like screen.

One of the biggest hurdles that I had to over come, that was different from the contacts tutorial, was that I wasn't using a database and therefore didn't have a predefined sub-result set for each character.  I was having to do the opposite.  I had to iterate over my result set, array of states, grab the first letter from each item, check to see if there was already a dictionary key that existed for that letter and proceed accordingly.

Logic Flow
Iterate over states
Get the first letter of that particular state
Check to see if there is a key in the objectsForCharacter dictionary
   - YES: add the state string to the arrayOfNames array and then set the arrayOfNames to the objectsForCharacter dictionary for the appropriate key
  -  NO: remove all objects from the arrayOfNames array and add the firstLetter to the arrayOfCharacters.  Then proceed on to the above "YES" steps
Once all the states have been "proceed" then reload the table data

Final Model
Though it sounds some what complicated with all the arrays, dictionarys, etc. once you break it down to a visual model then the code is easier to comprehend.

[[objectsForCharacters objectForKey:@"A"] objectAtIndex:0]; // Alabama
[[objectsForCharacters objectForKey:@"A"] objectAtIndex:1]; // Alaska
[[objectsForCharacters objectForKey:@"A"] objectAtIndex:2]; // Arizona
[[objectsForCharacters objectForKey:@"A"] objectAtIndex:3]; // Arkansas

Download Example Project (comments/enhancements are welcomed)