更换模拟器后，为什么我的VC移位了?自动版式 [英] Why is my VC displaced after changing the Simulator? AutoLayout

问题描述

嘿，这是我用来为View元素设置自动布局约束的代码:

Hey this is the code I use to set the constraints with auto layout for my View Elements:

TimeLabel.translatesAutoresizingMaskIntoConstraints = false
               
    NSLayoutConstraint.activate([
               TimeLabel.centerXAnchor.constraint(equalTo: view.centerXAnchor),
               TimeLabel.topAnchor.constraint(equalTo: view.topAnchor, constant: -30),
               TimeLabel.widthAnchor.constraint(equalToConstant: 300),
               TimeLabel.heightAnchor.constraint(equalToConstant: 300)
    
    ])

但是它不起作用！当我将模拟器从iPhone 11更改为iPhone 11 Pro时，我看不到我的某些元素，因为整个VC都被置换了！

But it doesn't work! When I change the simulator from iPhone 11 to iPhone 11 Pro, I can't see some of my elements because the whole VC is displaced!

我该怎么办? 预先感谢

What can I do? Thanks in advance

推荐答案

特别是因为您如您所说在这个地区真的很新" -我 建议您花一些时间来学习有关自动版式和适应屏幕尺寸的知识.

Particularly because you are, as you say, "really new at this area" - I strongly suggest that you spend some time learning about Auto-layout and adapting to screen sizes.

从Apple的文档开始，然后搜索教程...您会发现其中有很多.

Start with Apple's docs, and then search for tutorials... you'll find an abundance of them.

但是，为了帮助您开始理解，请看以下两个示例(您将需要在新的浏览器选项卡/窗口中打开它们以获得漂亮的外观):

But, to maybe help you start to understand, look at these two examples (you'll want to open them in new browser tabs/windows to get a good look):

示例1

如您所见，我给每个UI元素一个Height约束，然后从顶部开始，在每个UI元素之间设置40点垂直空间约束.

As you can see, I've given each UI element a Height constraint, and then, starting at the top, 40-pts of vertical space constraints between each.

在iPhone 11上看起来不错，但是由于11 Pro较短，因此第四标签已从屏幕底部移出.

Looks fine on an iPhone 11, but since an 11 Pro is shorter, the Fourth Label has been pushed off the bottom of the screen.

示例2

布局看起来非常相似，希望我将UI元素嵌入到UIStackView中.然后，我限制了堆栈视图的顶部和底部，并将其Distribution属性设置为Equal Spacing.

The layout looks very similar, expect I embedded the UI elements in a UIStackView. I then constrained the stack view Top and Bottom, and set its Distribution property to Equal Spacing.

现在，使用较短的11 Pro，元素之间的间距减小了，我们仍然可以看到第四标签.

Now, with the shorter 11 Pro, the spacing between the elements is decreased, and we can still see the Fourth Label.

除了这件事还有很多.例如，当我们旋转设备时会发生什么?当我们以12.9英寸的高度运行时会发生什么iPad Pro?

There is a whole lot more to it than this. For example, what happens when we rotate the device? What happens when we run on a 12.9" iPad Pro?

但是，也许有希望，这可以为您提供一个起点.

But, maybe, hopefully, this can give you a starting point.

这篇关于更换模拟器后，为什么我的VC移位了?自动版式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！