3

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

Matt
  • 315
  • 2
  • 6
  • 20
  • it's really simple: **Step 1:** Center the image vertically and horizontally inside the view. **Step 2:** After you've set the desired width and height, add width and and height constraints to the imageView **Step 3:** Set the image's content mode to **Aspect Fill** and make sure to check **Clips To Bounds** in the image view's attributes inspector – Mr. Xcoder Feb 06 '17 at 16:14

2 Answers2

7

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

Ocunidee
  • 1,769
  • 18
  • 20
  • Tx. I'm aligning centrally vertical and horizontal in Size Inspector -> Arrange -> Position View. Is this not the same? – Matt Feb 06 '17 at 15:39
  • @Matt I'm not certain it does add the constraints, it may just position it without putting constraints. – Ocunidee Feb 06 '17 at 15:41
  • Please see the attached images. It works in one device but not on other. Also how do I change the image size to keep it square? – Matt Feb 06 '17 at 15:56
  • Try doing it programmatically, set the view margins, then set the centerX and Y anchors on the logo to match the margins. – MacStation Feb 06 '17 at 15:59
  • Sorry @MacStation it's launchscreen and AFAIK we can't program it in the code. – Matt Feb 06 '17 at 16:00
  • @Matt, both devices are the same, the orange lines means that you are not seeing the image where it will be at runtime, you can see how it will be by clicking on the small round arrow (like reload) that you can see in the image on my post (first icon of the line) (it's greyed out for me). Like I said above, you need to set the height and width of the image view (in the next icon that the one displayed in my screenshot) – Ocunidee Feb 06 '17 at 16:11
  • To keep it a square you give it the same width and height, or you set the height and an aspect ratio of 1:1 (still same icon to set this) – Ocunidee Feb 06 '17 at 16:11
  • Tx @Ocunidee for reload/refresh stuff. This storyboard reload stuff is sorted out now. I didn't have that icon, updating to latest xCode solve this icon issue after 2-3 hours of time waste. At last some progress in 2 days ;) Still trying to centre the image and figure out how to keep the aspect ratio.... – Matt Feb 06 '17 at 17:32
  • Tx all for help I've finally managed to centre the image and it works on all devices. – Matt Feb 06 '17 at 17:49
  • The last problem is how to scale the logo so that it fits nicely on all devices. I want to keep, let's say, 20pts left and right space from the edge and let logo scale automatically on all devices. – Matt Feb 06 '17 at 17:51
  • ok, to do that, you need to delete the height constraint, to define the aspect ratio constraint (1:1) if you have not set it yet. Then you need to set constraints for the left and right of your logo (they need to be equal if you want it to be centered). You can set those constraints in the add new constraints panel – Ocunidee Feb 06 '17 at 18:14
  • @Ocunidee yes it worked however the video helped me what I was looking for. Tx – Matt Feb 07 '17 at 16:33
  • Those center options are grayed out even in the screenshot – pete Aug 06 '20 at 03:48
1

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/

Matt
  • 315
  • 2
  • 6
  • 20