iOS UI Development tips

Posted by ESCOZ on Thursday, October 07, 2010

The thing you’ll have to get familiar with when developing iPhone apps is CocoaTouch, the UI API used to “draw” iPhone apps. The CocoaTouch API is fairly simple and straightforward to develop on, and in MonoTouch, it gets even prettier, with things like delegates and events. It’s actually a joy to develop on, specially when compared to more traditional UI frameworks like Swing and Windows Forms. Apple provides Interface Builder as the tool of choice to use when developing the UI, but I actually think writing it all in code is faster and more flexible. Here’s a couple of tips on how to write iOS UI code, based on my experience during this last year:

  • In all seriousness, 50% of the work in writing an iPhone application is the design. Go back to the paper and pen and sketch everything before you even start writing the app, even the simplest tables. I always use this template when sketching but there are other options around. Make sure you know how events will make the UI flow from one view to another. Just when you know exactly what you'll be building, then go back to the computer.
  • Read the iOS documentation. Twice. Most things you want to do are already done for you by the framework, you just need to know how to turn it on.
  • Inheritance is key to maintaining the code clean. You can inherit from basically any class in the API, like buttons, controllers, views, etc. Inherit and add your customizations in those classes. Don't shove everything in the AppDelegate like many examples show, you'll thank me later on.
  • You can also inherit classes from Interface Builder. MonoTouch fully supports this by automatically creating partial classes. It works great. I wrote about how to inherit from a UIView some time ago. The process is pretty much the same for any class.
  • Have I mentioned inheritance already? Yes, do use inheritance.
  • The one thing iOS doesn't have is a layout manager, so if you're used to Java like you mentioned, this will sound a little strange. Different from what Java people think, this is not a big deal. UITableViews help tremendously with this (vide next point), and every UIView also has a "layboutSubviews" method you can override.
  • A lot of iphone apps are built on top of the UITableViewController, even apps that don't look like tables. It's a great framework to do anything related to scrolling. Learn to use it well. Almost anything that scrolls vertically is a UITVC, like the photo viewer control, email form, etc. Follow the guidelines that define when you create and when you dispose cells and objects.
  • Be careful about hardcoding Frame locations in your controls. Instead of setting hardcoded values, try using offsets from other locations (x+40, for example) whenever possible.
  • Make sure you add your views to the proper container as necessary. For example, if you're adding a global "Loading" view, add it to the Window object, while if you're adding a image on the left side of a table cell, use the ContentView. iOS changes those special views automatically all the time (resizing screen to fit "on call" bar at top, or rotating phone).

Finally, Miguel de Icaza has created a great framework for managing forms and tables, called MonoTouch Dialog. Lots of people have contributed extra elements with different cell types. It’s really worthy taking a look at.

I hope this is helpful for others starting on MonoTouch. If you have any other tips, add it to the comments below and I’ll include it in the list!