CODEWITHSUNDEEP
iosobjective-cuibutton
iosdude
iosdude

Reputation: 1139

UIButton contentVerticalAlignment doesn't center button image

I created a UIButton programmatically and set its image, but the image just won't center vertically, it's always rendered at the bottom of the button.

Here is my code:

CGFloat logoutButtonSize = self.profileItem.detailView.frame.size.height;
CGFloat logoutButtonX = self.profileItem.detailView.frame.size.width - logoutButtonSize - 8;
CGRect logoutButtonFrame = CGRectMake(logoutButtonX, 0, logoutButtonSize, logoutButtonSize);
UIButton *logoutButton = [[UIButton alloc] initWithFrame:logoutButtonFrame];
[logoutButton setImage:[UIImage imageNamed:@"logout.png"] forState:UIControlStateNormal];
logoutButton.imageView.contentMode = UIViewContentModeCenter;
logoutButton.contentMode = UIViewContentModeCenter;
[logoutButton addTarget:self
                 action:@selector(confirmLogout)
       forControlEvents:UIControlEventTouchUpInside];
logoutButton.autoresizingMask = UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleHeight;
logoutButton.contentVerticalAlignment = UIControlContentVerticalAlignmentCenter;
logoutButton.contentHorizontalAlignment = UIControlContentHorizontalAlignmentCenter;

After setting a distinct background color for the imageView of the button I can see that it's still aligned to the bottom:

(blue = button, red = image view)

enter image description here

Why is it not working?

Upvotes: 1

Views: 1023

Answers (2)

Fahim Parkar
Fahim Parkar

Reputation: 31637

Point 1

AFAIK, UIControlContentVerticalAlignmentCenter & contentHorizontalAlignment is for text alignment and not for image....

Point 2

UIButton *logoutButton = [[UIButton alloc] initWithFrame:logoutButtonFrame]; will create basic button (like < iOS 6) opposed to Custom button. Below is how you should have button programmatically.

UIButton * logoutButton = [UIButton buttonWithType:UIButtonTypeCustom];
[logoutButton setBackgroundImage:[UIImage imageNamed:@"logout.png"] forControlEvents:UIControlEventTouchUpInside];
[logoutButton addTarget:self action:@selector(confirmLogout) forControlEvents:UIControlEventTouchUpInside];
[logoutButton setTitle:@"" forState:UIControlStateNormal];
logoutButton.frame = CGRectMake(logoutButtonX, 0, logoutButtonSize, logoutButtonSize);
[self.view addSubview: logoutButton];

Now for image to adjust, 

continueButton.imageView.contentMode = UIViewContentModeScaleAspectFit;

You are done...

And last

Your code is not working because your UIButton is not Custom button.

Upvotes: 1

DonMag
DonMag

Reputation: 77462

Based on your posted image, it looks like the Button itself is being clipped at the bottom, as opposed to the image not being centered vertically.

Your code:

CGRect logoutButtonFrame = CGRectMake(logoutButtonX, 0, logoutButtonSize, logoutButtonSize);

says the Button (blue rectangle) should be square. Yet in the image you posted, the blue rectangle is 120 x 88.

The bottom portion of your button is not being displayed, so it looks like your image is not centered.

By the way, you shouldn't need much of the code you are using:

    // define the frame size
    CGFloat logoutButtonSize = self.profileItem.detailView.frame.size.height;
    CGFloat logoutButtonX = self.profileItem.detailView.frame.size.width - logoutButtonSize - 8;
    CGRect logoutButtonFrame = CGRectMake(logoutButtonX, 0, logoutButtonSize, logoutButtonSize);

    // instantiate the UIButton
    UIButton *logoutButton = [[UIButton alloc] initWithFrame:logoutButtonFrame];

    // set the image
    [logoutButton setImage:[UIImage imageNamed:@"logout.png"] forState:UIControlStateNormal];

    // add the button action target
    [logoutButton addTarget:self
                     action:@selector(confirmLogout)
           forControlEvents:UIControlEventTouchUpInside];

    // set the resizing mask properties
    logoutButton.autoresizingMask = UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleHeight;

    // shouldn't need any of the following
    //logoutButton.imageView.contentMode = UIViewContentModeCenter;
    //logoutButton.contentMode = UIViewContentModeCenter;
    //logoutButton.contentVerticalAlignment = UIControlContentVerticalAlignmentCenter;
    //logoutButton.contentHorizontalAlignment = UIControlContentHorizontalAlignmentCenter;

Upvotes: 2

Related Questions