how to create a sectioned TableView for profile in iPhone

Question

I saw this picture on Internet:

the section with the add Photo Frame and two rows (First, Last)... How do you achieve a design like that!!!

I only know how to make rows (static and dynamic) in xCode using the full width of the screen but not in a single section but not making such a división and adding a frame out of the other two rows

my designs are like this

Any help I'll appreciate

thanks in advance

Answer 1

It's not really clear that the example you've given is actually embedding the first, last part into a table view. It could just as easily be a single cell that has embedded views with borders to look like rows. Here are a few ways I see to accomplish the view you've given.

1. Have them be actual rows - but use a custom cell layout that offsets the 'First' and 'Last' labels to be further to the right. Then create a UIImageView for the profile that sits on top of the UITableView cells, but inside of it. Basically insert it as the first subview of the UITableView. It should cover the top left of those top two cells. You can do this since those cells have a static known hight and you've set the left offset. Another option would be just inserting it into your top cell, but having it overflow the bounds and setting clipsToBounds = NO.

2. Make the entire top view a custom UIView that uses CALayers or CoreGraphics to manually draw the lines and layout such that it looks like part of the table view. Set that as the TableView header, or the first section Header.

There are a lot more things you can do like changing frame layout as well.

Answer 2

you can achieve this with the use of xib read carefully and if you don't understand anything you can ask me again it's bit tricky

in you xib create a UIView and design for your photo and firstname, lastname cells with the use of textfields image views and all and then take a UITableView.

now drag your UIView and drop it on your UITableView so that it will be considered as your table header and your first section now will be as you designed like photo with firstname and lastname fields.

i've done this in manier projects of mine so hope this way you can also do this thing and ask me if you need any help.