iphone: put uiimage in tableview section header, stretch problem

Question

hey people, I put an UIImage into the section header of my UITableVIew. Therefor I used some code I found on the internet:

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section{

self.imageViewForImage.image = [helperClass resizeImage:[self.offerItem objectForKey: @"picture"] forSize:CGSizeMake(280.0, 280.0) ];

[self.imageViewForImage.layer setBorderColor: [[UIColor blackColor] CGColor]];
[self.imageViewForImage.layer setBorderWidth: 1.2];

self.imageViewForImage.contentMode = UIViewContentModeBottom;
return self.imageViewForImage;}


-(CGFloat)tableView:(UITableView*)tableView heightForHeaderInSection:(NSInteger)section
{
    if(section == 0)
        return 320;
    return 1.0;
}

At first the image was totally scaled over the complete 320px width of the iphone. But then I found out, that my whole UITableView's contentMode-property was set to "UIViewContentModeScaleToFill". So I added a line of code, which tells my UIImageView not to do the scaling. In my case I set it to "UIViewContentModeBottom".

Problem: This whole thing works, the image is finally shown in the aspected size of 280x280, BUT the border I did around the picture is still stretched / resized to the complete width of the iphone...?!

I can't figure out how to resolve this issue, because I want the border around the UIImage..

Thanks for any help on this..

edit: does anyone has some idea, what is going wrong here?

Answer 1

Your UIImageView has a layer the contents of which you set to your image. The size of layer equals to the size of imageView, but size of image is less then it. So when you set contentMode to your view it says to it's layer to draw layers contents at bottom if contents size is less than layers size. So size of layer (and as consequence size of its frame) are still the same even though you have resized its contents image.

The problem is that you are trying to resize image, when you should resize UIImageView. This part of code should look something like this:

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
    UIView *headerView = [[UIView alloc] init];

    self.imageViewForImage.frame = CGRectMake(20, 20, 280, 280);
    self.imageViewForImage.image = [self.offerItem objectForKey:@"picture"];
    self.imageViewForImage.autoresizingMask = UIViewAutoresizingFlexibleRightMargin | UIViewAutoresizingFlexibleTopMargin | UIViewAutoresizingFlexibleBottomMargin;

    [self.imageViewForImage.layer setBorderColor: [[UIColor blackColor] CGColor]];
    [self.imageViewForImage.layer setBorderWidth: 1.2];

    [headerView addSubview:self.imageViewForImage];
    return [headerView autorelease];
}

Hope this'll help!

UPDATED: The issue was that view that this method returns is reframed by tableView to fill all the header. So we must make a view that will actually be a header view and place an imageView on it.