[英]how to set autolayout for different devices by using storyboard
I have an Iceland map which contains 9 different area buttons. 我有一张包含9个不同区域按钮的冰岛地图。 Every button has a different size. 每个按钮都有不同的大小。 I want the map can show the same on different devices. 我希望地图可以在不同的设备上显示相同的内容。 I only know to set the central button with horizontally in container and vertically in container. 我只知道将中央按钮设置为水平放置在容器中,垂直放置在容器中。 However, other buttons, no matter how I set the constraints, they will be a mess on iphone SE or iPhone Plus. 但是,其他按钮,无论我如何设置约束,在iphone SE或iPhone Plus上都会一团糟。 (I use iphone 8 as normal) (我正常使用iphone 8)
Can anyone teach me how to set the constraints for the 8 left buttons? 谁能教我如何设置8个左键的约束? thank you! 谢谢!
The best thing for this is a vertical UIStackView
nested with 3 horizontal stacks 最好的事情是垂直的UIStackView
嵌套了3个水平的堆栈
MainStackView constraints MainStackView约束
centered vertically & horizentally , width & height propotional to screen 垂直和水平居中,宽度和高度与屏幕成比例
then drop 3 stackViews inside it set axis = horizontal and drop 3 Buttons for every inner stack 然后在其内部放置3个stackViews设置axis = horizontal并为每个内部堆栈放置3个按钮
Note: distribution is fillEqually for all the stacks , spacing = 10 注意:所有堆栈的分布均为fillEqually,间距= 10
Something I've done in the past is used a single control as the anchor for all the others. 我过去所做的事情都使用单个控件作为所有其他控件的锚点。
Basically this means taking the centre button and anchoring it to the middle of the container view (centre horizontally and vertically) 基本上,这意味着将中心按钮固定在容器视图的中间(水平和垂直中心)
I then constrain the middle/top and bottom controls to it (vertical space and horizontally centred) 然后,将中间/顶部和底部控件限制在其上(垂直空间和水平居中位置)
From there each control in the row is then constrained against these elements (horizontal spacing and vertically centred) 从那里开始,将行中的每个控件限制在这些元素上(水平间距和垂直居中)
You might also consider constraining the sizes to the centre control as well, so all the controls share the same size. 您可能还考虑将大小限制为中心控件,因此所有控件共享相同的大小。 For me, this means constraining the width of the control to a set value and then applying an aspect ratio to the height. 对我来说,这意味着将控件的宽度限制为一个设置值,然后对高度应用宽高比。 I do this because then I can change the value of the width constraint and ALL the control will change size 我这样做是因为然后我可以更改宽度约束的值,并且所有控件都会更改大小
Because iPhone 5s, iPhone, iPhone+, iPhone X all share the same "sizing classes", it makes it some what more difficult (as you can't apply traits - but you can do it for iPad and iPhone ;)). 因为iPhone 5s,iPhone,iPhone +,iPhone X都共享相同的“大小设置类”,所以这使其变得更加困难(因为您无法应用特征-但您可以在iPad和iPhone上使用;)。
At this point, I would bind the centre controls width constraint (and the height if you need it) to the source code and when the view is loaded, determine the device screen size and make minor adjustments to the constraints values. 此时,我将中央控件的宽度约束(如果需要,还可以绑定高度)绑定到源代码,并且在加载视图时,确定设备的屏幕尺寸并对约束值进行较小的调整。
If you would prefer a complete "storyboard" solution, you could constraint the width of the centre control to the super view and apply a modifier 如果您希望使用完整的“故事板”解决方案,则可以将中央控件的宽度限制在超级视图上,并应用修饰符
Using the "device" templates from the storyboard, layout one a iPhone 5s and iPad Pro 使用情节提要中的“设备”模板,布置一台iPhone 5s和iPad Pro
The long and short of it is, you have "options". 总而言之,您拥有“选项”。 You might even consider using UIStackView
to define the rows, personally I find it easier to constraint the controls to a central anchor point - but that's my experience and your needs might differ 您甚至可以考虑使用UIStackView
定义行,就我个人而言,我发现将控件约束到中央锚点更容易-但这是我的经验,您的需求可能有所不同
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.