【问题标题】:iOS - Using storyboard and autolayout to center the UIScrollViewiOS - 使用故事板和自动布局使 UIScrollView 居中
【发布时间】:2013-07-28 20:28:57
【问题描述】:

我正在使用故事板和自动布局创建 iOS 应用程序,以便它在 iPhone4 和 iPhone5 上都能正常工作。下面是我使用故事板创建的视图的屏幕截图。

在上图中,我想将滚动视图保持在超级视图的前沿和右侧表格视图的中间。我不希望滚动视图在 iPhone5 中增加其宽度。我尝试了不同的约束组合,但我无法实现。

有人可以建议我为滚动视图设置哪些约束,以便它位于中心。

【问题讨论】:

    标签: ios uiscrollview autolayout storyboard


    【解决方案1】:

    如何在情节提要上居中显示视图

    此答案已针对 Xcode 8 更新。

    此答案适用于那些只是在一般情况下搜索如何使用情节提要使事物居中并且不了解约束的人。

    我假设您使用的是故事板(不是 XIB 文件)和自动布局。这是当今的默认设置,因此如果您不知道这意味着什么,请不要担心。但是,如果要检查,可以单击项目导航器中的 Main.storyboard,然后单击文件检查器。您可以确保选中使用自动布局:

    在情节提要上选择您的按钮(或您想要居中的任何视图)。然后点击右下角的对齐按钮。选择“在容器中水平”和“在容器中垂直”。点击“添加 2 个约束”。

    如果它还没有完全居中,您可能需要再做一件事。单击对齐按钮左侧两处的“更新帧”按钮。您的视图现在应该以故事板为中心。

    更重要的是,现在当您运行应用时,无论您使用何种设备尺寸,它都应该居中。

    我最初是从Creating the user interface – Auto layout 学到的。基本思路还是一样,只是现在 Xcode 中的 UI 排列有一点变化。

    另见

    【讨论】:

    • 这对我的问题来说是无关紧要的答案。我提到的滚动视图不能位于水平和垂直中心。它的父级是视图控制器的视图本身。
    • 我知道这并不能回答您的问题。您接受@Fogmeister 的回答是正确的,而不是我的。但是,由于您的标题,许多人来到这里希望学习如何将某些内容放在故事板上。我要帮助的正是这些人。
    【解决方案2】:

    您需要通过在屏幕上添加一个额外的视图来做到这一点。

    目前你有...

    - UIView (main view)
        |
        | - scrollView
        | - tableView
    

    你应该把滚动视图放在另一个像这样的视图中......

    - UIView (main view)
        |
        | - UIView (spacer View)
        |    | - scrollView
        |
        | - tableView
    

    现在你可以做的是有这些限制......

    spacer view leading edge constraint to super view = 0
    spacer view trailing edge to table view leading edge = 0
    table view width = (whatever the width is)
    table view trailing edge to super view = 0
    

    这将布置 spacer view 和 table view 以便 spacer view 增长。

    现在你需要添加...

    scroll view width = x
    scroll view height = y
    scroll view centered vertically in super view
    scroll view centered horizontally in super view.
    

    现在,因为滚动视图的超级视图是间隔视图,所以它将始终居中在表格视图和其余空间之间。

    【讨论】:

      猜你喜欢
      • 2013-11-07
      • 1970-01-01
      • 2018-05-28
      • 2017-07-10
      • 1970-01-01
      • 2014-12-31
      • 1970-01-01
      • 2015-11-30
      • 1970-01-01
      相关资源
      最近更新 更多