How can I create exactly the same logo size with UIImageView and LaunchScreen.storyboard on iOS?

Question

I want to display a white background and a logo in the center of the device screen(iPhone, iPad). The logo should always stay in the center of the device screen and the logo should not be scaled because I don't want that it gets distorted. I use the Universal image from Assets.xcassets(400x400px, 800x800px, 1200x1200px) for the logo.
I use this code to create the UIImageView:

View.BackgroundColor = UIColor.White;  
LogoImage = new UIImageView(UIImage.FromBundle("Image"));  
LogoImage.ContentMode = UIViewContentMode.Center;  
LogoImage.Tag = 1234;  
LogoImage.Frame = new CoreGraphics.CGRect(0, 0, UIScreen.MainScreen.Bounds.Size.Width, UIScreen.MainScreen.Bounds.Size.Height);  
View.AddSubview(LogoImage);  

Full code: how-can-i-display-an-image-on-the-entire-device-sc.html

And I use the following settings in LaunchScreen.storyboard:
I have dragged the Image View to the center of the device screen and I changed the Image View rectangle sizes to Width: 400 and Height: 400. And then I added the new alignment constraints Horizontally in Container and Vertically in Container. I use Content Mode: Center and Universal image from Assets.xcassets.

I have tested it on an iPad Air device and my logo has exactly the same size(width and height) on the device screen when I use UIImageView and LaunchScreen.storyboard. But I'm not sure if this will work on other iPhones and iPads.
Can I use these settings if I want to draw my logo with LaunchScreen.storyboard with exactly the same width and height on the device screen than with UIImageView? Will this work on different iPhone/iPad devices?

Answer 1

Hello,

Welcome to our Microsoft Q&A platform!

You could refer to the following code to display the logo which will always stay in the center of the device screen and will not be scaled.

 public override void ViewDidLoad()  
        {  
            View = new UIView();  
            View.BackgroundColor = UIColor.White;  
            base.ViewDidLoad();  
             
            UIView viewbg = new UIView(new CoreGraphics.CGRect(0, 0, UIScreen.MainScreen.Bounds.Width, UIScreen.MainScreen.Bounds.Height));  
            View.AddSubview(viewbg);// add the background supper view  
              
            LogoImage = new UIImageView(UIImage.FromBundle("Launchscreenlogo"));  
            LogoImage.ContentMode = UIViewContentMode.ScaleAspectFit;  
            LogoImage.Tag = 1234;  
            LogoImage.BackgroundColor = UIColor.Blue;  
            LogoImage.Frame = new CoreGraphics.CGRect(0,0,375, 375);// 400 is a little big in some device   
  
            viewbg.AddSubview(LogoImage);  
            LogoImage.Center = viewbg.Center; //the key point  
             
        }  

I check your settings in LaunchScreen.storyboard, you can use these settings if you want to draw the logo with LaunchScreen.storyboard with exactly the same width and height on the device screen than with UIImageView. But the 400* 400 size is a little big, the width of iPhone6/iphone7/8/X is only 375. You could add the width and height constrain in UIImageView of LaunchScreen.storyboard: Select the Imageview, set width and height to 375 ,then click "Add 2 constraints" button.

It is same as the settings below, the display effect is equivalent to LogoImage.Center = viewbg.Center;

public override void ViewDidLoad()  
    {  
        View = new UIView();  
        View.BackgroundColor = UIColor.White;  
        base.ViewDidLoad();  
          
        LogoImage = new UIImageView(UIImage.FromBundle("Launchscreenlogo"));  
        LogoImage.ContentMode = UIViewContentMode.ScaleAspectFit;  
        LogoImage.Tag = 1234;  

        //not necessary  

       // LogoImage.BackgroundColor = UIColor.Blue;  
       // LogoImage.Frame = new CoreGraphics.CGRect(0,0,375, 375);  

       //key point  
        LogoImage.TranslatesAutoresizingMaskIntoConstraints = false;  
        View.AddSubview(LogoImage);  
          
        LogoImage.AddConstraint(NSLayoutConstraint.Create(LogoImage, NSLayoutAttribute.Width, NSLayoutRelation.GreaterThanOrEqual,  
                   1.0f, 375.0f));  
        LogoImage.AddConstraint(NSLayoutConstraint.Create(LogoImage, NSLayoutAttribute.Height, NSLayoutRelation.GreaterThanOrEqual,  
                   1.0f, 375.0f));  
        View.AddConstraint(NSLayoutConstraint.Create(LogoImage, NSLayoutAttribute.CenterX, NSLayoutRelation.Equal,  
                 View, NSLayoutAttribute.CenterX, 1.0f, 0.0f));  
        View.AddConstraint(NSLayoutConstraint.Create(LogoImage, NSLayoutAttribute.CenterY, NSLayoutRelation.Equal,  
                View, NSLayoutAttribute.CenterY, 1.0f, 0.0f));  
    }  

About the deferent device screen sizes you could refer to https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/#device-screen-sizes-and-orientations

Best Regards,
Wenyan Zhang

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.