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? update

Does Rows which all are stretching has text with image ? I mean for Settings you have both image and text. If it has only image some constraint issue might be causing the problem. Just random thought :) — Alok Rao, Jan 07 '15 at 12:58
What's the size (width x height) difference between the images? If I had to guess I would say the two stretched images are not as wide as the other ones. backgroundImages are supposed to stretch, they are for the background of the button. — Matthias Bauch, Jan 07 '15 at 13:03
It's only image. No text. The rest of buttons are setting fine with the same constraints — NSNoob, Jan 07 '15 at 13:39
The height for cell is 49 and the button exists in 320x33. it has a vertical spacing with the seperator line imgview of 10px — NSNoob, Jan 07 '15 at 13:42
This isn't an answer to your question, but you need to re-write your `tableView:cellForRowAtIndexPath:` method. Look into `dequeueReusableCellWithIdentifier:forIndexPath:`. You'll need to register your `RearViewTableViewCell` class with your `UITableView` (or us prototype cells), but then you can skip the `if (cell == nil)` check and move all of that implementation code into your `RearViewTableViewCell`'s `initWithCoder:` method. — mbm29414, Jan 07 '15 at 13:46
Thats the funny thing i got all these images name in an array like btnSelected1, btnselected2 etc etc and just these two are acting weird. I have no such image in the bundle like only a question mark or info sign — NSNoob, Jan 07 '15 at 13:46

Nikolay Mamaev · Answer 1 · 2015-01-08T04:54:37.480

1

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.

edited Jan 08 '15 at 04:54

answered Jan 07 '15 at 13:46

Nikolay Mamaev

1,474
1
12
21

Can you add logging for `RearViewTableViewCell`'s frame and image size? – Nikolay Mamaev Jan 07 '15 at 14:02
Could you please provide constraints for cell's button? – Nikolay Mamaev Jan 07 '15 at 14:32
there might be something stupid here. I don't quite understand autolayout and i just made quick moves to make the app run on iphone5s onwards – NSNoob Jan 07 '15 at 14:42
Probably button's frame is calculated incorrectly due to wrong constraints. Please try to set constraints as depicted on [this screenshot](http://i61.tinypic.com/2e2o3lz.png) – Nikolay Mamaev Jan 08 '15 at 04:42

score 1 · Accepted Answer · answered Jan 09 '15 at 09:39

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.

Yeah I figured that out myself. Not sure why Background image didnt work but setImage sure did work. — NSNoob, Jan 09 '15 at 11:10

score 0 · Answer 3 · answered Jan 09 '15 at 09:30

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

Why are the button background images strecthing?

3 Answers3