键盘和放大器的自动布局问题UI元素的高度 [英] Autolayout issue with keyboard & UI element heights

问题描述

Swift 5，Xcode 10

Swift 5, Xcode 10

我的UIViewController的布局:

我使用此代码来推送键盘打开时向上.

I use this code to push the Server Text Field up when the keyboard is opened.

首先，它将底部的UIStackView推入顶部，因此我添加了Server Stack View.top >= Username Stack View.bottom + 20约束，现在它保持了适当的距离.

At first it pushed the bottom UIStackView into the top one, so I added the Server Stack View.top >= Username Stack View.bottom + 20 constraint and now it's keeping a proper distance.

但是，当它向上推时，它也会自动减小Server Text Field的高度.将Server Stack View的固定高度设置为60.5会使登录"按钮变模糊，因此我将Username Stack View的高度设置为固定的110.5，这没有任何改变.

BUT now it also automatically decreases the height of the Server Text Field when it's pushed up. Giving the Server Stack View a fixed height of 60.5 smushes the "Login" button, so I set the height of the Username Stack View to a fixed 110.5, which didn't change anything.

我尝试将多个UI元素的Vertical Content Compression Resistance Priority更改为999，但是总有一个UI元素的高度减小了.

I tried changing the Vertical Content Compression Resistance Priority of multiple UI elements to 999 but there's always one UI element whose height is decreased.

如您在此屏幕截图中所见，键盘上方有足够的空间:

As you can see in this screenshot, there's enough space above the keyboard:

如何使自动布局使用此空间而不是挤压" UI元素?

How can I make auto layout use this space instead of "smushing" UI elements?

我发现了这个额外的空间是什么:它是版本"标签的高度及其约束(在我的情况下，它是屏幕底部的30pts).不幸的是，我还不能摆脱这一点-除了删除标签，这仍然不能阻止冒出".

I found out what this additional space is: It's the height of the "version" label and its constraint (30pts to the bottom of the screen in my case). Unfortunately I haven't been able to get rid of this yet - apart from removing the label, which still doesn't stop the "smushing".

推荐答案

键盘上方的额外空白空间等于版本"标签的高度及其约束(在我的情况下为屏幕底部30pts).

The additional empty space above the keyboard equals to the height of the "version" label and its constraint (30pts to the bottom of the screen in my case).

挤压"是由UIStackView的centerY - 120约束引起的，甚至无法更改内容压缩抵抗优先级".另外，如果周围有UIScrollView，它会抱怨缺少"y位置"约束(即使其他约束设置正确).

The "squishing" is somehow caused by the centerY - 120 constraint of the UIStackView and even changing the "Content Compression Resistance Priority" didn't work. Plus, if there's a surrounding UIScrollView, it complains about a missing constraint for the "y position" (even if the other constraints are set properly).

不幸的是，到目前为止，我发现对两个问题都有效的唯一解决方法是消除原因并更改布局. :/

Unfortunately the only fix I've found so far that works for both problems is to remove the cause and change the layout. :/

我最终得到的结果:

一些值得注意的事情:

• 添加了Child View以便始终将版本"标签保留在屏幕底部-即使在键盘处于活动状态时也是如此.
• Login View将KeyboardLayoutConstraint类用于其底部"约束.没有它，滚动将被完全禁用.
• Stack View的大小是通过内部的标签和文本字段设置的.
• 必须添加两个额外的UIStackView和UIView(1x用户名，1x服务器)，以保持UITextFields的宽度为200，但仍然需要周围的UIStackView和UIScrollView使用前导/追踪约束为0分.没有，没有将所有东西水平放置，Xcode抱怨说，UIScrollView非常狭窄，这也意味着不可能在侧面滚动.
• 即使键盘向上并且UIScrollView是可滚动的，"top + 100"约束(Stack View)也可见.我知道它不是很漂亮，但这是我发现的唯一不会将文本字段粘贴到视图顶部的解决方案，因为"middle-100"不起作用.可以通过更改KeyboardLayoutConstraint类来摆脱它.

• The Child View was added to always keep the "version" label at the bottom of the screen - even when the keyboard is active.
• The Login View uses the KeyboardLayoutConstraint class for its "bottom" constraint. Without it the scrolling would be completely disabled.
• The size of the Stack View is set through the labels and text fields inside.
• The two extra UIStackView and UIViews (1x username, 1x server) had to be added to maintain a width of 200 for the UITextFields but still have the surrounding UIStackView and UIScrollView use leading/trailing constraints of 0pts. Without, positioning everything horizontally didn't stick, Xcode complained and the UIScrollView was pretty narrow, which also meant that it wasn't possible to scroll on the sides.
• The "top + 100" constraint (Stack View) is visible even when the keyboard is up and the UIScrollView is scrollable. I'm aware it's not pretty but it's the only solution I've found that doesn't stick the text fields to the top of the view, since "middle - 100" doesn't work. It's probably possible to get rid of it by changing the KeyboardLayoutConstraint class.

这篇关于键盘和放大器的自动布局问题UI元素的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！