CODEWITHSUNDEEP
swiftxcodeswift3xcode8launch-screen
Matt
Matt

Reputation: 365

Image View - Aligning image in centre on all devices on launchscreen

I'm new to iOS development. I'm trying to add logo on launchscreen in centre. I've a background with gradient colour so I've used a png file and stuck it in the background. Next is logo which I want to centre for all devices.

I've two part questions 1) Is there anyway I can specify the constraints so that it is applicable to all devices? Example specifying top and bottom constraints in % ? 2) If above is not possible then how do I align logo in centre so that it works on all devices? Do I need to apply constraints separately on all devices?

I tried to set the width and height separately for all devices but it modifies dimensions on other devices. Not sure if this approach will work or I'm doping something wrong?

I'm aware that in worst case that I can just create launchscreens with logo in it as png and stick them for each devices separately which will work. I just wanted to know if it can be done with constraints.

Tx

As you suggested I added constraints to align it in centre horizontally and vertically. It seems to be good on one device but on other it's not. Please see images below.

And then how do I change image size?

One device 2nd device

Upvotes: 5

Views: 11250

Answers (2)

Matt
Matt

Reputation: 365

Finally I manage to solve what I Was looking for thanks to all those who helped. It was good learning period, 2 days in total ;)

Step 1: Align image to centre vertically and horizontally. Step 2: Scale logo to fill the space. Please follow this video which is bang on point what I was looking for. http://roadfiresoftware.com/2015/04/how-to-scale-an-image-view-based-on-device-size-with-auto-layout-in-interface-builder/

Upvotes: 4

Ocunidee
Ocunidee

Reputation: 1809

You do have centerY and centerX constraints.

In storyboard, select the imageView that you have already added to your view. Right-clic drag to the main view (full screen view) in the left panel and choose center horizontally, repeat with center vertically.

You will need to also set the width and height constraints of your logo.

ALTERNATIVELY: You don't need to clic drag, you can add the center constraints in the "add new alignment constraints" tab.

storyboard tab

Upvotes: 8

Related Questions