I’m trying to create a layout very similar to ABNewPersonViewController that will allow a user to create a new contact in my app. My app doesn’t use AddressBook nor would it need several of the fields in the ABNewPersonViewController, so I’m trying to replicate the layout of ABNewPersonViewController in a storyboard.
I’m settling right now on the following solution…
View Controller
View
UIButton ('add photo' button, left-aligned)
Table View (~85% width to allow for 'add photo' button)
Cell w/ text field (first name)
Cell w/ text field (last name)
Table View (100% width)
Cells w/ remaining details
First, I’m curious if anyone has any suggestions on a better layout.
Secondly, I don’t know how the vertical border can be implemented for certain cells (e.g., phone number has a left detail w/ the type [mobile, home, iPhone] and then text field at right w/ the actual number). Any ideas?
The contact picker looks to me like a UITableView that uses grouped cells. Each of the groups has that rounded look around it.
There are different types of UITableViewCells that are provided by the iOS SDK. The one that you are describing is called “Left Detail” in Interface Builder and programmatically is called UITableViewCellStyleValue2. You can set each cell individually based on what you want in the UITableViewController cellForRowAtIndexPath method.
EDIT:
A possible way to create this in IB is to create a UIView and then add an image container and two table views to it.
UIView (Primary View)
–> UIImageView (In top left corner.)
–> Grouped UITableView (In top right. Contains first, last, and company.)
–> Grouped UITableView (Below the above two items, goes across the screen. Contains the rest.)