UIButton image ignores its bounds

Question

First of all, I am using Xamarin iOS.

Whenever I try to set an image of a UIButton, the image gets as big as the entire screen. I want that image to fit into the bounds/ frame of the UIButton.

I have tried using PDF images and PNG images (image in the screenshot is a png). Both of them ignore the frame and size of the actual UIButton they're embedded in.

Here is what the UIButton looks in the xcode storyboard. It is aligned to the vertical and horizontal middle of the superview, has a width of 0.25x the superview and an aspect ratio of 1:1. I also tried giving it a fixed height and width but that didn't help.

I debugged the frame size but found out that it stays constant and isn't affected by the UIButtons Image.

To summarize everything I've tried so far and doesn't work:

public partial class ViewController : UIViewController
{
    public ViewController(IntPtr handle) : base(handle)
    {
    }

    public override void ViewDidLoad()
    {
        base.ViewDidLoad();
        
        // SetImage -> makes image as big as the screen
        Btn.SetImage(UIImage.FromBundle("skip"), UIControlState.Normal);
        // SetBackgroundImage -> Image doesn't appear at all, maybe I'm forgetting something?
        Btn.SetBackgroundImage(UIImage.FromBundle("skip"), UIControlState.Normal);
        // none of these things do literally anything
        Btn.ContentMode = UIViewContentMode.ScaleAspectFill;
        Btn.ContentMode = UIViewContentMode.ScaleAspectFit;
        Btn.ImageView.ContentMode = UIViewContentMode.ScaleAspectFill;
        Btn.ImageView.ContentMode = UIViewContentMode.ScaleAspectFit;
        // also have no impact on the image at all
        Btn.ImageEdgeInsets = new UIEdgeInsets(100, 100, 100, 100);
        Btn.ContentEdgeInsets = new UIEdgeInsets(100, 100, 100, 100);
        // also does nothing
        UIImage image = UIImage.FromBundle("skip");
        image.CreateResizableImage(new UIEdgeInsets(10, 10, 10, 10));
        Btn.SetImage(image, UIControlState.Normal);
        // no luck again
        image.Scale(new CGSize(Btn.Frame.Width, Btn.Frame.Height), 0.1f);
        Btn.SetImage(image, UIControlState.Normal);
    }
}

This problem exists on all devices I tested on the simulator (IPhone 11, IPhone 12, IPhone 12 mini, IPod touch). I could not test it on a real device yet.

It seems like nobody else on the internet has this problem. What am I missing? It probably is something trivial but I can not figure it out.

Minimal reproducible project

Thanks in advance

2) what is the parent of the button? It always depens how "parent layout class" handles inside elements. If it says to the each element that it should spread across wide, they will do it. Look through it — Tatranskymedved, Nov 26 '21 at 12:44
Hey @Tatranskymedved, alright I updated the question so it provides the code directly. The parent of the UIButton is the automatically generated UIView of the UIViewController -> `ViewController.View` — ben_bekir, Nov 26 '21 at 12:48
Could you provide a basic, reproducible project here for testing ? You can simply upload to github and attach the repo link here . — ColeX, Nov 29 '21 at 03:15

score 9 · Accepted Answer · answered Nov 29 '21 at 21:56

9

I'm assuming you are using Xcode 13 Storyboard designer.

If so, change the Button Style from "Plain":

to "Default":

Now your image will fit to the constrained button size.

answered Nov 29 '21 at 21:56

DonMag

69,424
5
50
86

4

This should be accepted as answer , but there is a small problem : the tint color will affect the image , if you do nothing the image will show blue(default) color , add the following code , `Btn.SetImage(UIImage.FromBundle("skip").ImageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal), UIControlState.Normal);`. – ColeX Nov 30 '21 at 01:45
Yes, I am using XCode 13.1 and this fixed the issue. Thank you and @ColeX-MSFT for your help. Does this "problem" only occur in XCode 13? – ben_bekir Nov 30 '21 at 09:17
2

@ben_bekir - Yes and no. It's **new** in Xcode 13 / iOS 15. See this answer for a little more discussion: https://stackoverflow.com/a/69439302/6257435 – DonMag Nov 30 '21 at 11:53
This solve the resize problem, but it present problems with content – SHAH MD IMRAN HOSSAIN Aug 28 '22 at 11:43

score 0 · Answer 2 · answered Aug 28 '22 at 11:59

0

If you are using XCode

And

If you are using ImageButton, first find the View section in the storyboard

After finding the View section

Find Clips to Bounds checkmark

Then check True like below

Now your image will fit with button size

You can also do this through code

let's say your button name is buttonOne

Then,

buttonOne.clipsToBounds = true

This also make you image fits to your imageButton size.

answered Aug 28 '22 at 11:59

SHAH MD IMRAN HOSSAIN

2,558
2
25
44

This does not constrain the image, just cuts it off. – Michael Plischke Nov 11 '22 at 06:08

UIButton image ignores its bounds

2 Answers2