Autolayout的程序化UIScrollview

Question

在阅读了苹果网站上的技术说明并阅读了有关使用Autolayout的UIScrollview的iOS 11编程的亚特布尔诺布书后,我无法完全理解这一切的概念.

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

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

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

码

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.我想出来的另一种方法是创建一个UIView比Scrollview更大的跨度,以允许子视图成为这个以滚动视图为父视图的大视图的子视图.

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

Answer 1

我仔细阅读了Apple的文档UIScrollView,特别是它的工作原理,topMostView我也更喜欢程序化的路径.首先,您不需要创建一个虚假的内容视图,您可以直接将子视图添加到滚动视图(我更喜欢这个,因为我认为一个虚假的视图是一个无关的对象).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

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

滚动视图中的内容现在具有高度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高点的视图锚定到一个锚点,你只是锚定到视图的底部,这肯定小于高UITableViewCell点.但这就是Apple希望你这样做的方式.使用这种方法,您不仅不需要创建内容视图,实际上您可以假装它不存在 - 当然,除非您需要它仍然可以从滚动视图的属性中读取的边界.

实际上,这个原则超越了滚动视图.topMostView.topAnchor.constraint(equalTo: self.topAnchor).isActive = true使用自动布局创建自定义时,从左到右和从上到下链接约束,其中最顶部的子视图锚定到单元格的顶部(bottomMostView.topAnchor.constraint(equalTo: self.bottomAnchor).isActive = true),最底部的子视图锚定到底部的cell(UIScrollView),你有自我大小的细胞.

Answer 2

当您创建一个scrollView时，苹果建议您在其中放置一个contentView，并给该contentView设置viewController视图的宽度，并将其top，bottom，lead，trailing约束固定在scrollview上，然后从上至下依次放置项想要将最底部的项目固定到scollview的contentView的底部，以便scrollview可以呈现其高度，此底部约束可以随您的喜好，根据它，scrollview将继续滚动直到完成