如何将 UIScrollView 的“主要”内容设置为屏幕高度-“次要”内容“首屏”

Posted

技术标签:

【中文标题】如何将 UIScrollView 的“主要”内容设置为屏幕高度-“次要”内容“首屏”【英文标题】:How to Set UIScrollView 'main' content to be height of screen - with 'secondary' content 'below the fold' 【发布时间】:2018-01-05 00:43:54 【问题描述】:

我已经用这个把头撞到墙上有一段时间了。

我有一个单视图应用程序,它的主要内容显示在滚动视图中 - 最初是为了轻松实现拉动刷新。这是使用故事板和自动布局约束工作和实现的。

我有一个想要实现的新功能,但我不希望它始终可见,我希望它显示在滚动视图的“主要”内容下方。这样,用户必须滚动主视图才能看到额外的内容。我制作了一个小图表,希望能比文字更好地传达这一点:

我尝试简单地将次要内容放置在具有垂直约束的最后一个主要内容块的下方 - 这可以让您滚动到它,但是一旦您松开,滚动视图就会恢复到原来的位置。

非常欢迎任何有关如何解决此问题的提示,谢谢!

编辑:

这是我尝试过的简化层次结构:

UIScrollView 滚动内容 主要内容视图 内容... 辅助内容视图 内容...

我认为出现困难是因为我希望主内容视图成为屏幕的全高。

【问题讨论】:

当你将红色视图向上拖动时,它会显示绿色视图,但绿色视图是否也向上移动,或者当红色视图向上移动时它只是显示?当您说回弹时,红色视图是否会再次在整个屏幕上定位自己? 为什么不把次要内容放在滚动视图中 我应该确认:次要内容在滚动视图中。我已经用我正在做的简化层次结构更新了这个问题。 @TreeTrum 请在下面查看我的回答,如果它解决了您的问题,请告诉我。 【参考方案1】:

您可能需要将视图放置在滚动视图中,并设置滚动视图的contentSize

视图控制器

@IBOutlet weak var scrollView: UIScrollView!

let height = UIScreen.main.bounds.height
let width = UIScreen.main.bounds.width

override func viewDidLoad() 
    super.viewDidLoad()
    /* Set the contentSize of the scrollview */
    self.scrollView.contentSize = CGSize(width: width, height: height*2)

    /* Adding two views, red, green at different locations inside the scrollview */
    let red = UIView(frame: CGRect(x: 0, y: 0, width: width, height: height))
    red.backgroundColor = UIColor.red

    let green = UIView(frame: CGRect(x: 0, y: height, width: width, height: height))
    green.backgroundColor = UIColor.green

    /* Adding the views in the scrollview */
    self.scrollView.addSubview(red)
    self.scrollView.addSubview(green)


演示

【讨论】:

有没有办法使用故事板和约束来做到这一点?我的应用程序已经使用故事板完全实现 - 目前没有以编程方式完成布局。 @TreeTrum 您可以从情节提要添加视图,而不是以编程方式制作它们。但是为了更好地控制和放置,将这些视图从故事板链接到视图控制器并以编程方式设置它们的框架将是可行的方法。 好的,我想我终于找到工作了。我使用了您的建议并将我的“主要内容”和“次要内容”添加到我的 ViewController 作为 IBOutlets,然后我能够将滚动视图内容高度设置为主要和次要内容的总和。谢谢!【参考方案2】:

将主视图的内容分为两部分

ScrollView
      contentView -> equal width of screen
          topView -> equal height of screen
          secondaryView -> equal height of it's subview 

【讨论】:

以上是关于如何将 UIScrollView 的“主要”内容设置为屏幕高度-“次要”内容“首屏”的主要内容,如果未能解决你的问题,请参考以下文章

UIScrollView 在内容小于视图大小时反弹

在将约束应用于 UIScrollView 时需要帮助

使用 UIScrollView,在缩小时,如何将内容视图保持在中心?

从另一个视图将滚动手势传递给 UIScrollView

调整 UIView 的大小以便 UIScrollView 工作

如何在 UiScrollview 中获取子视图的内容