Center Logo on Launch Screen Storyboard

TarekTarek USMember

Hi Guys,

Is it possible to automatically center a logo on a LaunchScreen using the Storyboard designer.

I have enabled size classes, my app is universal and i have tried adding constraints ... Read the documentation several times.

Just cant get it to center. The constraint values seem to be fixed and not ratios.

Are constraints automatically calculated at runtime?

There was another post about this issue but the answer didnt make sense to me.

Any help would be great.

Regards,
Tarek

Posts

  • darrell.tunnelldarrell.tunnell USMember ✭✭

    Snap - I'm attempting to do the same thing as you! New to iOS, so I am sure I am missing something.

  • KMullinsKMullins USMember, Xamarin Team Xamurai

    All,

    Ensure that you have locked the height and width of the image you are trying to center to the desired size using constraints. Next, center the image in the view and lock it horizontal and vertical constraints to the center of the screen.

    Please see the Dynamic Launch Screens section of our Introduction to Unified Storyboards documentation for more information.

    Thanks,

    Kevin

  • darrell.tunnelldarrell.tunnell USMember ✭✭
    edited November 2015

    I am trying my best, but it obviously it isn't good enough as I am still unable to get this working!

    Here are the details of what I have done.

    My image 160*80 and I am using Visual Studio.
    I have "Generic" selected for "View As" in the designer - which is 600 * 600
    My image view has:

    • Height and Width constraints (160 * 80)
    • It's position is X=220, Y=260 (It's in the center of the view)
    • It's constraint from center Y to top is 260
    • It's constraint from center X to trailing space is 220

    It looks central.

    Now - if i change the "View As" drop down from Generic, to "IPhone 4s" - the image is pushed off the left hand edge of the screen.

    I want to keep the image central regardless of screen size.

    Can this be done without code?

  • TarekTarek USMember

    Hi Guys,

    I have also been trying this for several days.

    I am having the same experience as the post above even when following Kevin's instructions and following the documentation.

    I even clutched at straws by trying out the 5.10 RC1 and RC2 versions :smile:

    Regards,
    Tarek

  • darrell.tunnelldarrell.tunnell USMember ✭✭

    @Tarek - ahhh finally - this works!
    I was dragging from the edges rather than the middle of the image to create spacing constraints!

    Doing this in Visual Studio results in some peculiar looking vertical and horizontal constraint lines - looks like a glitch with the designer to me (have attached screenshots) - but atleast it works!

  • MathiesMathies USMember
    edited July 2016

    @JVFLA said:
    Why must you set a fixed height/width constraint when there are different sizes of the image depending on the device? Makes no sense to me...?

    Exaclty WTF i dont get it. It wont work.

    Edit:
    Fixed by adding all constraints to everywhere (top left bottom right) Cant be right or?

  • DaveSmashDaveSmash USMember ✭✭

    This may be a little late to help the OP, but for anyone finding this now, you can leave a little margin in your image file and then set the Content Mode property of your ImageView to Aspect Fit or Aspect View to avoid using a fixed size across all devices. When you dig into the constraints, it will still show that you have a fixed width and height, but the image will scale itself to the screen size at runtime. Our logo is wide, so I use Aspect Fit and then add constraints to center the image to make it match the width of the screen without overflowing.

  • TaqwaDwaib.1339TaqwaDwaib.1339 USMember ✭✭

    @DaveSmash said:
    This may be a little late to help the OP, but for anyone finding this now, you can leave a little margin in your image file and then set the Content Mode property of your ImageView to Aspect Fit or Aspect View to avoid using a fixed size across all devices. When you dig into the constraints, it will still show that you have a fixed width and height, but the image will scale itself to the screen size at runtime. Our logo is wide, so I use Aspect Fit and then add constraints to center the image to make it match the width of the screen without overflowing.

    thanks alot

Sign In or Register to comment.