Scale up View for iPads

Hello, I had troubles getting my constrains right for an actually very easy task. I searched in YouTube and Google without any success, it caused headaches.

What I want to achieve is simple, I have a "poker table" background, and it's constraint is set to the distance of 0 to all sides. Now I want my buttons to scale up and position right like on the background. It's difficult to explain so look at the picture. The result should look like on the right side on the 10.5 inch iPad.

The distance from every object to the margins should be proportional to the increase of the size between the different iPads.


Does anyone have a clue how to achieve that?


Picture: https://www.dropbox.com/s/u61yz8ege54cvpx/Bildschirmfoto%202018-04-30%20um%2000.39.13.png?dl=0

Accepted Reply

Well, it could certainly be done using auxiliary views to position things. Personally I would probably ditch the static image background and make all those white circles UIViews positioned the same way, which would guarantee they line up. I would make one rectangle centered on the superview with its width and height a proportion of the superview (0.8? or whatever fraction you need). Let’s call that one auxA. I would then constrain all the buttons to line up with that view’s edges. Bottom row would have center Y = auxA bottom. Left row would have center X = auxA left. etc. For the other axis, again I’d define a rectangle view for alignment, but one for each side. For example, for the bottom row, center X = auxA center X, center Y = auxA bottom. Height some fixed value, doesn’t matter. Width some proportion of main superview, or auxA, or multple of button size or whatever. The main thing is it would be sized to contain the single row of buttons. Then within that alignment view, you would add your buttons and use the spacer view technique. So button-spacer-button-spacer.....button. All spacer views would have height fixed doesn’t matter, equal widths to each other.


All this would be a lot simpler to illustrate if we could post images in the forum.


The other option would be to punt on auto layout and just position all your views in code. As much as I like auto layout, for something like this (particularly with rotation transforms involved) it might end up easier. Auto layout doesn’t play all that well with transforms, at least not last time I tried. But in your case with simple symmetrical views just rotating around their center it might be OK.

Replies

The “standard” way to do that is to use spacer views. Instead of having a constraint directly from your button to the superview or margin, add an empty UIView in between and constrain to that. Then you can make that spacer view a multiple of some other view’s width or height.

Hello, thank you for your reply junkpile. This "spacer view" technology seems to be pretty difficult if you have multiple objects. As you might have seen my Storyboard is pretty complex (40 different locations which have to match the background). The problem is, that every button and every Image has to be exactly at the same place and the same size as on the background image. It's just like if you'd zoom into a picture, if there is one part of the picture which doesn't scale up proportional to everything else, it looks bad.

Same here.


What I understand so far from this "spacer view" is described in this article:

https://www.journaldev.com/10828/ios-autolayout-even-spacing-spacer-views


What I tried so far is to use constrains (which fails):

https://www.dropbox.com/s/2pue3tl5w8cylmy/Constraint%20Fail.png?dl=0


It should be like this:

https://www.dropbox.com/s/616za7h3xqa5dn1/How%20it%20should%20be.png?dl=0


To understand my problem (and the complexity of my project) heres another picture:

https://www.dropbox.com/s/kvmrg1y9fmz0wln/Bildschirmfoto%202018-04-30%20um%2000.39.13.png?dl=0

Complexity of amounts of buttons which have to cover the gray background buttons:

https://www.dropbox.com/s/suecvwd340trwx6/complexity.png?dl=0


Thank you for any help. I hope there is an easyer more efficient way...

Well, it could certainly be done using auxiliary views to position things. Personally I would probably ditch the static image background and make all those white circles UIViews positioned the same way, which would guarantee they line up. I would make one rectangle centered on the superview with its width and height a proportion of the superview (0.8? or whatever fraction you need). Let’s call that one auxA. I would then constrain all the buttons to line up with that view’s edges. Bottom row would have center Y = auxA bottom. Left row would have center X = auxA left. etc. For the other axis, again I’d define a rectangle view for alignment, but one for each side. For example, for the bottom row, center X = auxA center X, center Y = auxA bottom. Height some fixed value, doesn’t matter. Width some proportion of main superview, or auxA, or multple of button size or whatever. The main thing is it would be sized to contain the single row of buttons. Then within that alignment view, you would add your buttons and use the spacer view technique. So button-spacer-button-spacer.....button. All spacer views would have height fixed doesn’t matter, equal widths to each other.


All this would be a lot simpler to illustrate if we could post images in the forum.


The other option would be to punt on auto layout and just position all your views in code. As much as I like auto layout, for something like this (particularly with rotation transforms involved) it might end up easier. Auto layout doesn’t play all that well with transforms, at least not last time I tried. But in your case with simple symmetrical views just rotating around their center it might be OK.