Designing adaptive layout is not workable due to weird proportion in the storyboard

46 Views Asked by At

I am trying to program with the adaptive layout of the XCode 7, and now am facing a major problem with designing the user interface. My problem is that the designing of the storyboard is not reflecting what is happening on the actual app on both device and simulator.

Below is how I set up the interface:

[

In fact, the left view collapse so much that I cannot design any subview inside that area. Here I specify the width of the MapView to 700 points, which should be much lesser than the actual width of the iPadPro. I have no idea why the mapview takes so much space of the interface like that.

enter image description here

This the the constraints of the UIView that is on the left of the MapView.

enter image description here

I didn't specify the width of the left UIView, since I guess that the will eventually take up the whatever left besides the MapView. And it is actually acting according to my assumption in the simulator and the device.

enter image description here

Another weird thing is that the XCode always complaints about the width conflict if I change the width of the MapView over 700 points. I always thought that the width of the iPad should be way more than 700 points. Here I have no idea why the interface builder is complaining. The size class of the storyboard is both wRegular and hRegular.

Is there a way to make the design more manageable? There are more subviews inside the left UIView, but at this point I cannot add any subviews to the UIView on the left at all.

1

There are 1 best solutions below

4
On

Regular iPads in portrait are also regular width. That's 768 points. You probably shouldn't have your map 700 points. You may want to have your views on the left to have the same width as the map. You can do that by selecting multiple views and adding "Equal Widths" constraint.

You can also change the size of the scene in the interface builder by selecting a view controller and then there is an option to view it in a different size:

selecting simulated metrics

It will give you options for sizes for different devices and orientations.