ios – 使用Autolayout编程的UIScrollview

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

基本上我想要的是一个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,以及我希望它在键盘变为FirstFirstResponder时垂直向上滚动的事实.我想到这个尝试工作的另一种方法是创建一个比Scrollview更大的UIView,以允许子视图成为这个以滚动视图为父视图的大视图的子视图.

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

解决方法

我仔细阅读了关于UIScrollView的Apple文档,特别是它如何与自动布局一起使用,我也更喜欢程序化路径.首先,您不需要创建一个虚假的内容视图,您可以直接将子视图添加到滚动视图(我更喜欢这个,因为我认为一个虚假的视图是一个无关的对象). 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)并且您有自定义单元格.

ios – 使用Autolayout编程的UIScrollview

解决方法

相关文章