How do I put an image in the centre of the screen with an auto resize?

StephenMappouridisStephenMappouridis USMember
edited September 18 in Xamarin.iOS

We want an image in the center of the sreen, that auto sizes depending on the size of the screen
Heres what we have so far:

                   nfloat labelHeight = 22;
        nfloat labelWidth = Frame.Width - 20;

        // derive the center x and y
        nfloat centerX = Frame.Width / 2;
        nfloat centerY = Frame.Height / 2;
        //UIimageView = new UIImageView(new CGRect(centerX / 2, centerY + 30, 200, 100));
        var MPWidth = Application.Current.MainPage.Width;
        var MPHeight = Application.Current.MainPage.Height;

        UIimageIcon = new UIImage("logo_overlay.png");

        var maxWidth = (float)Frame.Width / 2;
        var maxHeight = (float)Frame.Height / 2;

        var sourceSize = UIimageIcon.Size;
        //var maxResizeFactor = Math.Max(maxWidth / (float)sourceSize.Width, maxHeight / (float)sourceSize.Height);
        //if (maxResizeFactor > 1) return sourceImage;
        //var width = maxResizeFactor * sourceSize.Width;
        //var height = maxResizeFactor * sourceSize.Height;
        UIGraphics.BeginImageContext(new SizeF((float)maxWidth / 2, (float)maxHeight / 2));
        UIimageIcon.Draw(new RectangleF(0, 0, (float)maxWidth / 2, (float)maxHeight / 2));
        var resultImage = UIGraphics.GetImageFromCurrentImageContext();
        UIGraphics.EndImageContext();

        UIimageView = new UIImageView(new CGRect(centerX / 2, centerY + 30, resultImage.Size.Width, resultImage.Size.Width));

        UIimageView.AutoresizingMask = UIViewAutoresizing.All;
        UIimageView.Image = resultImage;
        AddSubview(UIimageView);

Answers

  • NashZhouNashZhou USMember ✭✭✭
    edited September 18

    @StephenMappouridis I haven't looked at all your code, but it looks like you're playing with the location of the frames to get your desired outcome.

    I suggest looking at the NSLayoutConstraint to try to center your image

    For example

    // Your image size
    var imageSize = 50;
    
    var imageView = new UIImageView()
    {
        TranslatesAutoresizingMaskIntoConstraints = false // Set TranslatesAutoresizingMaskIntoConstraints to false
    };
    
    // Add your subview
    View.AddSubview(imageView);
    
    // Set up the dictionary
    var dictionary = new NSMutableDictionary();
    dictionary.Add((NSString)"v0", imageView);
    
    // Add your constraints
    this.View.AddConstraints(NSLayoutConstraint.FromVisualFormat("H:|-(>=0)-[v0(" + imageSize + ")]-(>=0)-|", new NSLayoutFormatOptions(), null, dictionary));
    
    this.View.AddConstraints(NSLayoutConstraint.FromVisualFormat("V:|-(>=0)-[v0(" + imageSize + ")]-(>=0)-|", new NSLayoutFormatOptions(), null, dictionary));
    
    // Constraint CenterX
    this.View.AddConstraint(NSLayoutConstraint.Create(this.View, NSLayoutAttribute.CenterX, NSLayoutRelation.Equal, imageView, NSLayoutAttribute.CenterX, 1.0f, 0));
    
    // Constraint CenterY
    this.View.AddConstraint(NSLayoutConstraint.Create(this.View, NSLayoutAttribute.CenterY, NSLayoutRelation.Equal, imageView, NSLayoutAttribute.CenterY, 1.0f, 0));
    
  • @NashZhou The image size works great but when it comes to centring I get this message on the constraint : Objective-C exception thrown. Name: NSInternalInconsistencyException Reason: Impossible to set up layout with view hierarchy unprepared for constraint.

    Thank you for your help

Sign In or Register to comment.