Autolayout的程序化UIScrollview

因此,在阅读了Apple网站上的技术说明并阅读了有关使用Autolayout的UIScrollview的iOS 11编程的matt neuburg的书之后,我无法完全理解它如何运作的概念。

基本上我想要的是一个Scrollview ,它有一个子视图ChildView ,其中这个子视图有一个Textview

下面我附上了我试图以编程方式实现no-nibs,没有故事板的模型。

在此处输入图像描述

至于代码,这就是我通常提出的:

let Scroller: UIScrollView = { let scroll = UIScrollView() scroll.translatesAutoresizingMaskIntoConstraints = false scroll.backgroundColor = UIColor.alizarinColor() return scroll }() // Content view let ContentView : UIView = { let content = UIView() content.translatesAutoresizingMaskIntoConstraints = false content.backgroundColor = UIColor.blue return content }() override func viewDidLoad() { super.viewDidLoad() self.view.addSubview(Scroller) // Auto layout Scroller.leftAnchor.constraint(equalTo: view.leftAnchor, constant:0).isActive = true Scroller.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 0).isActive = true Scroller.rightAnchor.constraint(equalTo: view.rightAnchor, constant: 0).isActive = true Scroller.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor, constant: 0).isActive = true Scroller.addSubview(ContentView) // Undefined Content view } 

请注意:对于ContentView ,我通常会定义约束来锚定滚动视图内的边缘,但在这种情况下不支持Autolayout,以及我希望它在键盘becomesFirstResponder时垂直向上滚动的becomesFirstResponder 。 我想出来尝试工作的另一种方法是创建一个跨越大于Scrollview的UIView ,以允许子视图成为这个以滚动视图为父视图的大视图的子视图。

我的问题:我怎样才能从这里开始实现这个目标? 有什么建议么? 我一直在考虑这样的事情:( ContentView将是允许它可滚动的更大视图,并且子视图将是hiarchy中的第3个子视图)

在此处输入图像描述

我仔细阅读了关于UIScrollView Apple文档,特别是它如何与auto layout ,我也喜欢编程路径。 首先,您不需要创建一个虚假的内容视图,您可以直接将子视图添加到滚动视图(我更喜欢这个,因为我认为一个虚假的视图是一个无关的对象)。 Apple,AFAIK,不建议创建一个,但仅建议您可以。 而且,据我记忆,他们已经制作了他们没有的例子。 其次,滚动视图中的子视图不应该(可能不能)依赖滚动视图来确定它们的宽度或高度。 第三,您的约束必须从左到右和从上到下链接到自动布局,以便为您创建内容视图。 第三个“规则”可能有点令人困惑甚至看起来违反直觉,但这正是Apple希望您构建滚动视图的方式。

具体来说,当您创建滚动视图时,您可以为其框架指定控制器视图的边界:

 scrollView.translatesAutoresizingMaskIntoConstraints = false view.addSubview(scrollView) scrollView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true scrollView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true scrollView.widthAnchor.constraint(equalTo: view.widthAnchor).isActive = true scrollView.heightAnchor.constraint(equalTo: view.heightAnchor).isActive = true 

然后,您必须通过将其子视图锚定到滚动视图的边缘来设置内容视图的边界。 因此,您的最顶层视图必须锚定到滚动视图的顶部,其宽度不能超过滚动视图的宽度(这是视图的宽度)(如果您的目标是仅垂直滚动)。

 topMostView.translatesAutoresizingMaskIntoConstraints = false scrollView.addSubview(topMostView) topMostView.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor).isActive = true topMostView.topAnchor.constraint(equalTo: scrollView.topAnchor).isActive = true topMostView.widthAnchor.constraint(equalTo: view.widthAnchor).isActive = true topMostView.heightAnchor.constraint(equalToConstant: 1000).isActive = true 

请注意, topMostView不依赖滚动视图来确定其大小(仅限其位置)。

滚动视图中的内容现在具有1000的高度,但它不会滚动,因为没有任何内容锚定到滚动视图的底部。 因此,请在最底层的视图中执行此操作。

 bottomMostView.translatesAutoresizingMaskIntoConstraints = false scrollView.addSubview(bottomMostView) bottomMostView.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor).isActive = true bottomMostView.topAnchor.constraint(equalTo: topMostView.bottomAnchor).isActive = true bottomMostView.widthAnchor.constraint(equalTo: view.widthAnchor).isActive = true bottomMostView.heightAnchor.constraint(equalToConstant: 1000).isActive = true bottomMostView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor).isActive = true 

最后一个锚似乎违反直觉,因为你将一个1000点高的视图锚定到一个锚点,你只是锚定到视图的底部,它肯定低于1000点高。 但这就是Apple希望你这样做的方式。 使用这种方法,您不仅不需要创建内容视图,实际上您可以假装它不存在 – 当然,除非您需要它仍然可以从滚动视图的属性中读取的边界。

实际上,这个原则超越了滚动视图。 使用自动布局创建自定义UITableViewCell ,将从左到右和从上到下的约束链接到最顶部子视图锚定到单元格顶部的位置( topMostView.topAnchor.constraint(equalTo: self.topAnchor).isActive = true )和单元格底部的最底部子视图( bottomMostView.topAnchor.constraint(equalTo: self.bottomAnchor).isActive = true )并且您有自定义单元格。

当你创建一个scrollView时,apple建议在其中放入一个contentView,并将该contentView赋予viewController视图的宽度,并将它的顶部,底部,前导,尾随约束固定到scrollview,然后从上到下放置项目,就像你一样想要将最底部的项目固定到scollview的contentView的底部,因此scrollview可以渲染它的高度,这个底部约束可以按照你的喜好并根据它滚动视图将继续滚动直到完成它