The contact cell is a table view cell which fits inside the table view container. It is used to give quick access to the various methods of communicating with a contact. It is commonly found in an object and object details floorplan.
Compact contact cell (left) and regular contact cell (right)
Anatomy of a contact cell
A. Detail Image
A detail image or avatar can be used on the far left of the cell. The image cannot be used if four actions are also included in the cell.
B. Name and Title
The name of the contact is displayed here with an option to display the contact’s title or some other subtitle.
If a description has been defined, it will appear in regular mode only. This is a good place to display something like an address.
D. Action Icons
There are four possible communication actions (call, FaceTime, message, and email) and it is up to the application team to decide which of the 4 to include for their use case.
Tapping on the contact cell itself will navigate to the profile detail screen of the contact.
Tapping on the call icon will trigger an alert asking if the call should be made. If yes, then the phone call will launch.
Tapping on the FaceTime icon will trigger an alert asking if the FaceTime call should be made. If yes, then the FaceTime call will launch.
Tapping on the message icon will trigger a modal where the message can immediately be drafted and sent.
Tapping on the email icon will trigger a modal where the email can immediately be drafted and sent.
The Contact Cell is supported in both regular and compact width. An optional description is available to be displayed in regular width. The width of the name and title container and description container is flexible and can be set by the app developer.
Up to four action icons can be used, however, if four actions are used then a profile image cannot be used.