How do I add a UIImage to a TableView header defined in a StoryBoard?

Question

I have a storyboard TableView with a Custom storyboard TableViewContoller class. I'd like to add an icon to the header of the TableView, but am having a hard time trying to figure out how to do it. I don't see the header in my TableViewController in the storyboard, and ran across a Stack post which said to just drag the UIImageView to the top of the prototype cells but this doesn't seem to work quite right.

result of code

I then got an IBOutlet hooked up to the storyboard UIImageView and populate that property from viewDidLoad in my TableViewController custom class:

@property (weak, nonatomic) IBOutlet UIImageView *mImagePic;
...
- (void)viewDidLoad
{
    UIImage *pic = _mPersonPhoto;
    [_mImagePic setImage:pic];
...
}

This sort of works, but the image ends up in the first tableview row and I want it in the Header so it doesn't disappear under the header when scrolling the list. So, then I tried this:

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
   UIImage *pic = _personPhoto;
   [_mImagePic setImage:pic];
   return (_mImagePic);
}

The second code snip does about the same thing as the first, but the pic is still not in the header (screenshot above). It's made the first row higher, but that's about it. I guess the next try is to create the entire header from code in viewForHeaderInSection but that seems to make storyboarding pointless. How can I get the picture in the Header without having to rebuild the whole Header (adding back button, title, etc)?

score 0 · Answer 1 · answered Oct 02 '13 at 21:30

0

set the tableHeaderView

tableHeaderView Returns an accessory view that is displayed above the table.

@property(nonatomic, retain) UIView *tableHeaderView Discussion The default value is nil. The table header view is different from a section header.

Availability Available in iOS 2.0 and later. See Also @property sectionHeaderHeight Declared In UITableView.h

answered Oct 02 '13 at 21:30

darren102

2,830
1
22
24

Found that here http://stackoverflow.com/questions/5441938/adding-ios-uitableview-headerview-not-section-header -- This means building the entire header view in code doesn't it? There's no way to build a view in the GUI and then access it in the tableview controller class? I really didn't want to have to goof around with screen heights and widths, worry about rotation, (initWithFrame...) and adding buttons by hand, etc, etc. – wufoo Oct 03 '13 at 13:46

wufoo · Accepted Answer · 2013-10-03T17:28:56.627

Ended up adding a UIView and a UIImage to the very top bar of the Storyboard. You can't just add an image there without placing it in a view first which was what I was trying to do.

treeview storyboard

Then I wired up the view and pic to properties in my .m file:

@interface ...
@property (weak, nonatomic) IBOutlet UIImageView *mImagePic;
@property (weak, nonatomic) IBOutlet UIView *mPicView;
@end

Finally, in viewDidLoad I loaded the mImagePic with the picture I wanted.

- (void)viewDidLoad
   {

       UIImage *pic = [picArray objectAtIndex:2];
       [_mImagePic setImage:pic];

       // make transparent View background
       // ! requires unchecking Opaque property in storyboard
       [_mPicView setBackgroundColor:[UIColor clearColor]];
       ...
    }

How do I add a UIImage to a TableView header defined in a StoryBoard?

2 Answers2