Why are the button background images strecthing?

Question

I have an app in which I have a side menu. In the side menu, the rest of the buttons appear fine but two buttons are stretching weirdly. screenshot attached.

This is how I am setting button images.

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{

    static NSString *simpleTableIdentifier = @"SimpleTableItem";

    RearViewTableViewCell *cell = [self.tableViewSideMenu dequeueReusableCellWithIdentifier:simpleTableIdentifier];
    if(cell == nil)
    {

        NSArray *cellView = [[NSBundle mainBundle] loadNibNamed:@"RearViewTableViewCell" owner:nil options:nil];
        cell = (RearViewTableViewCell *)[cellView objectAtIndex:0];
        cell.btnItemSelector.tag = indexPath.row;
        [cell.btnItemSelector setBackgroundImage:[UIImage imageNamed:[buttonUnselect objectAtIndex:indexPath.row]] forState:UIControlStateNormal];
        [cell.btnItemSelector setBackgroundImage:[UIImage imageNamed:[buttonSelect objectAtIndex:indexPath.row]] forState:UIControlStateHighlighted];
        [cell.btnItemSelector addTarget:self action:@selector(btnMenuItemTapped:) forControlEvents:UIControlEventTouchUpInside];
        cell.selectionStyle =UITableViewCellSelectionStyleNone;

    }
    return cell;

}

I am new to adaptive layout. Is it causing issues? On iphone 5s it runs fine but on iphone 6 it is depicting this behaviour. I have added only one constraint (width) to the tableview. The uitableviewcell (custom) i am using here has all the regular constraints of leading space, vertical space, center alignment etc. Any thoughts?

Update: i set the bg color to red and it turns out the two buttons in questions are being resized to much smaller & probably wider view. Why would that happen?

Answer 1

I would recommend you, to use button.image instead of button.backgroundImage. It looks like setting a backgroundImage to a UIButton can't handle the contentMode of your image because it always stretches the UIImage to the same size as the UIButton.

If you add the UIImage just on the property image you can change position of the image inside the UIButton by changing the contentEdgeInsets manually or inside the Interface Builder.

Just in case you want to set an UIImage as well as a NSString for your UIButton, I would create an own class of type UIButton with an UILabel and UIImage and layout them inside the Interface Builder.

Answer 2

Alright guys I don't quite why this solved the problem but it did and here goes.

1) I used setImage rather than setBackgroundImage.

2) I removed the suffix .png from the images name.

3) I cleaned the project and reset the simulator.

4) It worked.

It was probably the cache still had previous images containing just ? and i symbol which made the button resize as per size of the image but I can't be sure. If anyone else can post a better explanation of this I'd mark it as Answer

Answer 3

According to the "UIKit User Interface Catalog", "Buttons" chapter, "Images" section:

The Background (currentBackgroundImage) field allows you to specify an image to appear behind button content and fill the entire frame of the button. The image you specify will stretch to fill the button if it is too small. It will be cropped if it is too large.

Thus, you need to set size of all background images to be equal to button's size.

Update Or make sure that your constraints are configured so that button size is correct.