How can I create an image set in Assets.xcassets so that I can use it in my LaunchScreen?

Kim Strasser 661 Reputation points
2021-12-03T13:33:18.243+00:00

I want to create a LaunchScreen.storyboard for my iPhone/iPad game and I want to use the image from Assets.xcassets-->Image in my LaunchScreen. But I don't know what image sizes that I should add to Assets.xcassets-->Image. I just want to support iPhones and iPads and my game's orientation is only landscape left/right.
Which images sizes or vector files should I add to Assets.xcassets if I want to use the same image in UIImageView in my LaunchScreen.storyboard?
I use Visual Studio for Mac and Xcode 13.1.

My empty Assets.xcassets-->Image:
mZWxlBF

Xamarin
Xamarin
A Microsoft open-source app platform for building Android and iOS apps with .NET and C#.
5,261 questions
0 comments No comments
{count} votes

Accepted answer
  1. Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 24,706 Reputation points Microsoft Vendor
    2021-12-06T07:01:59.517+00:00

    Hello,

    Welcome to our Microsoft Q&A platform!

    Launch Image has been deprecated after iOS 13, setting LaunchScreen.storyboard is necessary. The size of the image depends on how you want to display the launchscreen page, it is about autolayout.

    My image size is 400*400 and it shows in center of the screen, you could refer to the following steps:

    1. Create an image set, select Assets.xcassets, right click New Image Set, give it a name(my image name is launch) , add two image( 800*800 px @2x one, 1200*1200 px @3x one) under Universal section.
    2. Add an ImageView to viewcontroller in LaunchScreen.storyboard
    3. Set the constrains

    Set the Image(my image name is launch) to this ImageView, set the Content Mode of ImageView to AspectFit, then set the AutoResizing to scale to the screen size. When you selsect the ImageView, AutoResizing is under the second-to-last inverted triangle sign on the right toolbar, all outer arrows should be deselected and all inner arrows selected.

    Then set the Center X and Center Y of the ImageView.

    After above steps, you could run to check the effect, the launch page disappears very quickly, it may disappear when you rotate the screen.

    There are also other ways to set the constrains, refer to https://stackoverflow.com/questions/37951817/launch-screen-storyboard-with-centered-image-ios
    About LaunchScreen, you could refer to https://learn.microsoft.com/en-us/xamarin/ios/app-fundamentals/images-icons/launch-screens?tabs=macos
    About Auto Layout, you could refer to https://developer.apple.com/library/archive/documentation/UserExperience/Conceptual/AutolayoutPG/index.html
    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.

    0 comments No comments

0 additional answers

Sort by: Most helpful