UIScroll with Navbar and Tabbar and container view with dynamic height
UIScroll with Navbar and Tabbar and container view with dynamic height
我正在尝试使用选项卡栏和导航栏在 IB 中布置我的详细信息屏幕。但是模拟器运行时显示出现三个问题:
- 屏幕上方有空隙,
- 动态标签内容超出了底部的容器视图
- 滚动条没有到达内容的底部。
Screenshot of simulator displaying the issues described
我的问题是我应该如何设置约束才能解决上述问题?
我有很多限制,我不确定我哪里出错了,或者什么是展示我到目前为止所采取的步骤的最佳方式。但是 here is a screenshot of my constraints 并且这里是 constraints/steps 我到目前为止所做的总结:
主视图仅包含一个 child:滚动视图。滚动视图固定在主视图的顶部、前导和尾部,底部固定在底部布局 Guide.top、
滚动视图只有 1 个 child 子视图 ("Content View")。内容视图固定到顶部 + 64,前导、尾随、底部固定到超级视图,并且它与主视图具有相同的高度和宽度。
内容视图有图像、食谱标题子视图和阴影背景子视图。 Shadow Background 子视图包含另一个带有一些动态高度标签的子视图。我有限制将这些容器的前导边和尾随边固定到超级视图。我有顶部、底部、前导、尾随约束将这些子视图固定到父视图 and/or 彼此,以便从上到下形成一条链。
阴影背景视图包含动态高度标签。除了没有底部约束的最后一个标签外,标签还具有顶部、前导、尾部和底部的引脚约束。
我没有任何更新布局的代码——目前所有内容都在 IB 中。
非常感谢任何帮助!
使内容视图的顶部约束具有常量 0,而不是 64。对于超出容器视图底部的标签,您必须 post 有关布局的更多信息,以便我们帮助。
哈利路亚!在度过了整整一个令人沮丧的一周之后,我终于在 IB 中找到了用于布局滚动视图 + 导航栏 + 标签栏 + 动态标签高度的神奇公式。
我原来的问题是以下错误造成的:
- Adjust Scroll View Insets 应该设置为 false
- 内容视图顶部和底部图钉不正确
- 某些子视图缺少一些高度
- 上一个子视图未正确固定在底部
也许并非所有这些步骤都是必需的,也许这不是最完美的解决方案,但这对我有用。 Here is a diagram of the solution for those that prefer pictures.
- 主视图 -> 属性检查器 -> 取消选中 Adjust Scroll View Insets 复选框。
- 添加滚动视图。这是主视图的唯一子视图。将顶部、前导、尾随 Space 固定到主视图。将底部固定到底部布局指南。
- 添加一个子视图(将其命名为 "Content View")。这是滚动视图的唯一子项。将顶部、前导、尾随 Space 固定到滚动视图。使用常量 -49 将底部固定到滚动视图以说明选项卡栏。同时将其高度和宽度设置为等于主视图。
- 向内容视图添加子视图。 Top 固定到 Superview,常量为 62 以说明 Nav Bar。前导和尾随被固定到 Superview。视图还需要一个高度——给它一个固定值或一个最小值,如果它是动态内容(例如:高度 >- 20)。您可能还需要为高度约束赋予较低的优先级,例如 250。
- 根据需要继续添加同级子视图。将顶部固定到上一个同级子视图。将 Leading 和 Trailing 固定到 Superview。最后一个兄弟子视图应该固定到超级视图。每个子视图都需要一个高度。从顶部子视图到底部需要有一个连续的约束链(顶部和底部引脚,高度)以避免 "Scroll View has ambiguous scrollable content height" 警告并使滚动正常工作。
- 跳个快乐的舞。
希望这对其他人有帮助。
我正在尝试使用选项卡栏和导航栏在 IB 中布置我的详细信息屏幕。但是模拟器运行时显示出现三个问题:
- 屏幕上方有空隙,
- 动态标签内容超出了底部的容器视图
- 滚动条没有到达内容的底部。
Screenshot of simulator displaying the issues described
我的问题是我应该如何设置约束才能解决上述问题?
我有很多限制,我不确定我哪里出错了,或者什么是展示我到目前为止所采取的步骤的最佳方式。但是 here is a screenshot of my constraints 并且这里是 constraints/steps 我到目前为止所做的总结:
主视图仅包含一个 child:滚动视图。滚动视图固定在主视图的顶部、前导和尾部,底部固定在底部布局 Guide.top、
滚动视图只有 1 个 child 子视图 ("Content View")。内容视图固定到顶部 + 64,前导、尾随、底部固定到超级视图,并且它与主视图具有相同的高度和宽度。
内容视图有图像、食谱标题子视图和阴影背景子视图。 Shadow Background 子视图包含另一个带有一些动态高度标签的子视图。我有限制将这些容器的前导边和尾随边固定到超级视图。我有顶部、底部、前导、尾随约束将这些子视图固定到父视图 and/or 彼此,以便从上到下形成一条链。
阴影背景视图包含动态高度标签。除了没有底部约束的最后一个标签外,标签还具有顶部、前导、尾部和底部的引脚约束。
我没有任何更新布局的代码——目前所有内容都在 IB 中。
非常感谢任何帮助!
使内容视图的顶部约束具有常量 0,而不是 64。对于超出容器视图底部的标签,您必须 post 有关布局的更多信息,以便我们帮助。
哈利路亚!在度过了整整一个令人沮丧的一周之后,我终于在 IB 中找到了用于布局滚动视图 + 导航栏 + 标签栏 + 动态标签高度的神奇公式。
我原来的问题是以下错误造成的:
- Adjust Scroll View Insets 应该设置为 false
- 内容视图顶部和底部图钉不正确
- 某些子视图缺少一些高度
- 上一个子视图未正确固定在底部
也许并非所有这些步骤都是必需的,也许这不是最完美的解决方案,但这对我有用。 Here is a diagram of the solution for those that prefer pictures.
- 主视图 -> 属性检查器 -> 取消选中 Adjust Scroll View Insets 复选框。
- 添加滚动视图。这是主视图的唯一子视图。将顶部、前导、尾随 Space 固定到主视图。将底部固定到底部布局指南。
- 添加一个子视图(将其命名为 "Content View")。这是滚动视图的唯一子项。将顶部、前导、尾随 Space 固定到滚动视图。使用常量 -49 将底部固定到滚动视图以说明选项卡栏。同时将其高度和宽度设置为等于主视图。
- 向内容视图添加子视图。 Top 固定到 Superview,常量为 62 以说明 Nav Bar。前导和尾随被固定到 Superview。视图还需要一个高度——给它一个固定值或一个最小值,如果它是动态内容(例如:高度 >- 20)。您可能还需要为高度约束赋予较低的优先级,例如 250。
- 根据需要继续添加同级子视图。将顶部固定到上一个同级子视图。将 Leading 和 Trailing 固定到 Superview。最后一个兄弟子视图应该固定到超级视图。每个子视图都需要一个高度。从顶部子视图到底部需要有一个连续的约束链(顶部和底部引脚,高度)以避免 "Scroll View has ambiguous scrollable content height" 警告并使滚动正常工作。
- 跳个快乐的舞。
希望这对其他人有帮助。