tomasbasham tomasbasham - 28 days ago 17
iOS Question

Replicating the Apple Contacts edit screen

I want to recreate the Apple Contacts edit screen. Clearly the easiest way is to create a UITableView and fill in the information. However I could do with some pointers with how to implement the top part of the UITableView which contains the contact image. This image appears to the left of a number of TableViewCells and spans over many of them.

Currently I have attempted to implement this by adding a custom header view to a UITableView and simply adding an image to the left side of the view and a UITextField on the right. However I was concerned that there may be a more "iOS way" to go about this.

I don't intend on using this screen for contacts so if there is a particular method or object I can use in the Contacts Framework it likely wont be relevent to my use case.

How could this best be achieved using Apple best practices?

The attached image shows what I am trying to replicate.

enter image description here

Answer

You can programmatically add an image like so.

let image: UIImage = UIImage(named: "YourImageNameInAssets")!
let imgFrame: CGRect = CGRect(x: 0, y: 0, width: self.bounds.width, height: self.bounds.height)
imageView = UIImageView(frame: imgFrame)
view.addSubview(imageView)

Change the x and y places to put it wherever on the screen you like, and make sure the image in assets is already the correct size and dimensions for the screen you are placing it in or else you would have to size it programmatically as well.

Another option would be to make a UIViewController with two UITableViews and a UIImageView inside of it. If you take this method, you can implement both UITableViews in the same functions and just give different implementations based on the table views tag or restorationIdentifier.

Another option if you just wanted a single UITableView or to be inside of a UITableViewController would be to uncheck clipViewToBounds on the tableViewCell, the contentView of the Cell, and the Image itself. After doing this, place the image in the top cell and it will overflow into the other cells seamlessly. Make sure you also correctly indent the separator on the cells that you want to look as if the are moved over to the side.

Comments