IOS Swift中AutoLayout中的对齐问题

Question

I have 3 sections, Top Banner with Logo, Mapview in the middle and then a few labels under the MapView.

I have used Constraints for accomplishing this for 6s sizes. But when I try this out for 4s, 5, 5s the below section the Labels is not seen on the screen. In design view they are also only partially shown and seems to be somewhere hidden in 4 and 5 ios versions.

I have set height for the Top banner as 0.2 with the SuperView and MapView with 0.4 and trying to get the remaining labels to fill in the remaining 0.4 height of the total SuperView. I have tried to contain all the labels in a Tableview also this is not even showing anything in Design time or even at runtime. Another Approach is to Add a view in which place all the labels so that can add a contraint of 0.4 height for the view. But all in vain.

Layout Design :

http://imgur.com/aIjBJsq

I am an iOS and auto layout Noob so it maybe something silly that I might have missed. Appreciate any help or advise on the same

Answer 1

Ok, first it seems that you need a break down of the fundamentals of Auto Layout. Below are some resources that can help you with that. Working with Auto Layout can take quite a bit of effort so you really should get a solid understanding, otherwise you will constantly be running into problems.

• Adaptive User Interfaces
• Auto Layout Guide
• View controllers and adaptivity and size changes
• WWDC2012: Auto Layout by Example
• WWDC 2015: Mysteries of Auto Layout, Part 1
• WWDC 2015: Mysteries of Auto Layout, Part 2

Key to understanding your issues is the role layout constraints play in your design. You use them to make small to medium changes, for bigger changes such as different devices you need to use size classes as well as constraints. In Xcode 8's Interface Builder you have the option to set the device for your layout, see the picture below. It's in the bottom left-hand corner. The device's selection relates to size classes.

So how do we go about solving your issues? We would start by laying out the view for a selected device in interface builder, then we would select another device, say iPhone 4s and then make any adjustments to your view there. This is the basic outline and there are many steps in between. The single best step you can take at this point is to get a better understanding of Interface Builder. Learning how to use interface builder will touch on all the areas covered by the resources listed above.

• Interface Builder
• wwdc2015: Implementing UI Designs in Interface Builder

I understand this is a broad answer to your question, but I am trying to help you build an understanding of the concepts, so you can happily build your own layouts from here on out!