Forum Xamarin.iOS

Announcement:

The Xamarin Forums have officially moved to the new Microsoft Q&A experience. Microsoft Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

To create new threads and ask questions head over to Microsoft Q&A for .NET and get involved today.

how to place an image to the far end of a button in xamarin.ios?

I have an image that I want to place at the far right end of my button to make it look like a dropdown menu. But I have a problem with different screen sizes because my button resizes if there is empty space around it.

I have tried

s1.ImageEdgeInsets = new UIEdgeInsets(0, -10, 0, 10); s1.ContentEdgeInsets = new UIEdgeInsets(0, 0, 0, 10);

s1 is my button name.

Please help :disappointed:

Answers

  • jezhjezh Member, Xamarin Team Xamurai

    But I have a problem with different screen sizes because my button resizes if there is empty space around it.

    What exactly are you trying to achieve? And what is the specific issue with different screen sizes?

    Can you elaborate on that?

  • taherelharestaherelhares Member ✭✭

    @jezh said:

    But I have a problem with different screen sizes because my button resizes if there is empty space around it.

    What exactly are you trying to achieve? And what is the specific issue with different screen sizes?

    Can you elaborate on that?

    I have this button that I made it function like a dropdown list . My main problem is with this arrow image , I want to place it like 2 pixels away from the right side of this button. The specific issue is that once I make the arrow image perfect on one screen size , it does not align well for bigger screens and the arrow would have much white space on its right side which I don't want.

    I hope I am clear this time :(

  • jezhjezh Member, Xamarin Team Xamurai

    You can define a custom control to adjust the padding.

    You can refer to the following code:

      public class CustomButton:UIButton
        {​​​​​​​
            private int space;
            private string title;
            private string image;
    
    
            public CustomButton(int mSpace, string mTitle, string mImage)
            {​​​​​​​
                this.space = mSpace;
                this.title = mTitle;
                this.image = mImage;
            }​​​​​​​
    
    
            public override void LayoutSubviews()
            {​​​​​​​
                base.LayoutSubviews();
    
    
                this.SetTitle(this.title, UIControlState.Normal);
                this.SetImage(UIImage.FromBundle(this.image), UIControlState.Normal);
    
    
                nfloat imageWidth = this.ImageView.Image.Size.Width;
                nfloat imageHeight = this.ImageView.Image.Size.Height;
    
    
                nfloat labelWidth = 0;
                nfloat labelHeight = 0;
    
    
                if (UIDevice.CurrentDevice.CheckSystemVersion(8, 0))
                {​​​​​​​
                    labelWidth = TitleLabel.IntrinsicContentSize.Width;
                    labelHeight = TitleLabel.IntrinsicContentSize.Height;
                }​​​​​​​
                else
                {​​​​​​​
                    labelWidth = TitleLabel.Frame.Size.Width;
                    labelHeight = TitleLabel.Frame.Size.Height;
                }​​​​​​​
    
    
                ImageEdgeInsets = new UIEdgeInsets(0, (nfloat)(labelWidth + this.space / 2.0), 0, (nfloat)(-labelWidth - space / 2.0));
                TitleEdgeInsets = new UIEdgeInsets(0, (nfloat)(-imageWidth - this.space / 2.0), 0, (nfloat)(imageWidth + space / 2.0));
            }​​​​​​​
    
    

    Usage:

     int imagetitlespace = (int)(80 *896/UIScreen.MainScreen.Bounds.Size.Width);
    CustomButton customButton = new CustomButton(imagetitlespace, "Hello","arrowdown");
    customButton.Frame = new CoreGraphics.CGRect(20, 100, 300, 50);
    customButton.BackgroundColor = UIColor.Red;
    this.View.AddSubview(customButton);
    
  • taherelharestaherelhares Member ✭✭
    edited November 2020

    @jezh said:
    You can define a custom control to adjust the padding.

    You can refer to the following code:

    
    
      public class CustomButton:UIButton
        {​​​​​​​
            private int space;
            private string title;
            private string image;
    
    
            public CustomButton(int mSpace, string mTitle, string mImage)
            {​​​​​​​
                this.space = mSpace;
                this.title = mTitle;
                this.image = mImage;
            }​​​​​​​
    
    
            public override void LayoutSubviews()
            {​​​​​​​
                base.LayoutSubviews();
    
    
                this.SetTitle(this.title, UIControlState.Normal);
                this.SetImage(UIImage.FromBundle(this.image), UIControlState.Normal);
    
    
                nfloat imageWidth = this.ImageView.Image.Size.Width;
                nfloat imageHeight = this.ImageView.Image.Size.Height;
    
    
                nfloat labelWidth = 0;
                nfloat labelHeight = 0;
    
    
                if (UIDevice.CurrentDevice.CheckSystemVersion(8, 0))
                {​​​​​​​
                    labelWidth = TitleLabel.IntrinsicContentSize.Width;
                    labelHeight = TitleLabel.IntrinsicContentSize.Height;
                }​​​​​​​
                else
                {​​​​​​​
                    labelWidth = TitleLabel.Frame.Size.Width;
                    labelHeight = TitleLabel.Frame.Size.Height;
                }​​​​​​​
    
    
                ImageEdgeInsets = new UIEdgeInsets(0, (nfloat)(labelWidth + this.space / 2.0), 0, (nfloat)(-labelWidth - space / 2.0));
                TitleEdgeInsets = new UIEdgeInsets(0, (nfloat)(-imageWidth - this.space / 2.0), 0, (nfloat)(imageWidth + space / 2.0));
            }​​​​​​​
    
    

    Usage:

     int imagetitlespace = (int)(80 *896/UIScreen.MainScreen.Bounds.Size.Width);
    CustomButton customButton = new CustomButton(imagetitlespace, "Hello","arrowdown");
    customButton.Frame = new CoreGraphics.CGRect(20, 100, 300, 50);
    customButton.BackgroundColor = UIColor.Red;
    this.View.AddSubview(customButton);
    

    Alright I made the custom class and applied it .This is an image of it on the iPhone SE(2nd gen)

    but still facing the same problem . there is a big space between the down arrow image and the far right end of the button on the i pad pro 12.9inch (4th gen) .

    PS : is there a way to override the button design from the storyboard without defining a new one from code? I tried using
    using the same button name but it would just create one on top of the already made button from the storyboard.

  • jezhjezh Member, Xamarin Team Xamurai

    For this, you can adjust the value of the following imagetitlespace according to your actual data needs.

       int imagetitlespace = (int)(80 *896/UIScreen.MainScreen.Bounds.Size.Width);
    
Sign In or Register to comment.