0

I have a photoshop file with 8 concentric 'rings' (although some aren't rings and are more irregular), with the largest at the 'back' and decreasing in size up to the 8th one being very small in the centre.

The 'rings' are drawn in such a way as that the smaller ones are 'internal' to its 'outer' or next larger ring. Each 'ring' has transparency on its outside, but also on its inside (where the smaller rings would 'sit').

I need to support all iOS devices (Universal App).

The largest image has a default size of 2048x2048 pixels, but every one of the 8 layers has a common 'centre' point around which they need to rotate, and around which they need to be fixed.

So, basically, all 8 have to be layered, one on top of the other, such that their centres are all perfectly aligned.

BUT the size of the artwork is larger than any iOS device, and the auto-layout has to allow for every device size and orientation, with the largest (rear) layer having an 8 point inset from the screen edges.

For those that can't picture this, here is a crude representation, where the dark background is 'transparent' and represents the smaller of the width or height of the iOS device (depending on orientation):

enter image description here

Note: The placement of where each smaller UIImageView is precise. They all share a common centre (the centre of the screen) but each ring sits 'inside' of the larger ring behind it. i.e. the centre of the green, hot pink and baby pink circles are empty / transparent, and no matter what size screen or orientations, they have to nest together perfectly, as they do in the photoshop art assets.

I've spent hours in auto-layout trying to sort this out, and when I've got it working on one device and both orientations, it's not working on any others.

No code to show because I'm trying to do this in IB so I can preview on all devices.

Is this even possible using IB / Auto-Layout or do I have to switch to manually working out the scales by which to resize their UIImageView based on screen width / height at runtime and the relationship between each 'ring'?

Edit:

And unless I'm doing it wrong, embedding each UIImageView into a transparent UIView in order to use the UIView to fake 'insets', this doesn't work because those numbers are hard coded, such that when it's perfect on a 12.9" iPad Pro, on an iPhone SE each 'inset' UIImageView is much more compressed and doesn't sit 'inside' it's next larger ring, but is like a tiny letter O with lots of surrounding blank space, because those 'insets' don't scale. What is 100pts on an iPad is a tiny amount of space, but 100pts on an iPhone SE is a 1/3 of the screen.

SwiftNewbieDoo
  • 85
  • 7
  • Can you show your layout from IB? – Tiran Ut Jul 22 '19 at 05:11
  • It should be easy to do, just create some container, put all images inside and setup widths and heights relations between images – Tiran Ut Jul 22 '19 at 05:13
  • Can you please share designs images and behaviors you want. – Animesh Jul 22 '19 at 05:24
  • Already clearly described it, and I can't share the real assets as they belong to the client, but I have included a crude mock-up, if you really need it. It's more about the relationship between things that all share the same centre but not the same size and shape... that's the problem. – SwiftNewbieDoo Jul 22 '19 at 06:18

1 Answers1

0

You can draw circles using CAShapeLayer and UIBezierPath. Since you are trying to fit this in a square, I'd define container size to be either the width or height of the parent container depending on what's smaller, this will allow for rotation and different screen sizes. As for the center, you can always find it by getting center coordinates of your square container (container.bounds.size.width / 2). To rotate your layers/sublayers you can use this answer: https://stackoverflow.com/a/3929703/4577610

Repose
  • 2,157
  • 1
  • 24
  • 26