NSLayoutConstraint可以将视图固定到superview的下边缘

时间:2015-08-12 14:47:03

标签: ios swift cocoa-touch autolayout

可重复的例子

class ViewController: UIViewController {

   var created = false

   override func viewDidLayoutSubviews() {
      super.viewDidLayoutSubviews()
      if !created {

         let scrollView = UIScrollView()
         scrollView.backgroundColor = UIColor.grayColor()
         view.addSubview(scrollView)

         let kidView = UIView()
         kidView.backgroundColor = UIColor.redColor()
         kidView.translatesAutoresizingMaskIntoConstraints = false

         scrollView.addSubview(kidView)

         scrollView.translatesAutoresizingMaskIntoConstraints = false
         kidView.translatesAutoresizingMaskIntoConstraints = false

         view.addConstraints(
            NSLayoutConstraint.constraintsWithVisualFormat("H:|[scrollView]|", options: .AlignAllLeft, metrics: nil, views: ["scrollView": scrollView])
         )
         view.addConstraints(
            NSLayoutConstraint.constraintsWithVisualFormat("V:|[scrollView]|", options: .AlignAllLeft, metrics: nil, views: ["scrollView": scrollView])
         )

         kidView.addConstraints([
            NSLayoutConstraint(item: kidView, attribute: .Width, relatedBy: .Equal, toItem: nil, attribute: .NotAnAttribute, multiplier: 1, constant: 100),
            NSLayoutConstraint(item: kidView, attribute: .Height, relatedBy: .Equal, toItem: nil, attribute: .NotAnAttribute, multiplier: 1, constant: 100),
         ])

         scrollView.addConstraints([
            NSLayoutConstraint(item: kidView, attribute: .CenterX, relatedBy: .Equal, toItem: scrollView, attribute: .CenterX, multiplier: 1, constant: 0),
            NSLayoutConstraint(item: kidView, attribute: .Bottom, relatedBy: .Equal, toItem: scrollView, attribute: .Bottom, multiplier: 1, constant: 0),
//            NSLayoutConstraint(item: kidView, attribute: .CenterY, relatedBy: .Equal, toItem: scrollView, attribute: .CenterY, multiplier: 1, constant: 0),
         ])

         created = true
      }
   }

}

问题

我想将自定义视图与UIScrollView的底边对齐,但我似乎只能将其与顶部或垂直中心对齐。

scrollView.addConstraints([
    NSLayoutConstraint(
        item: circleContainerView, 
        attribute: .Top, 
        relatedBy: .Equal, 
        toItem: scrollView, 
        attribute: .Top, 
        multiplier: 1, 
        constant: 0),
])

enter image description here

scrollView.addConstraints([
    NSLayoutConstraint(
        item: circleContainerView, 
        attribute: .CenterY, 
        relatedBy: .Equal, 
        toItem: scrollView, 
        attribute: .CenterY, 
        multiplier: 1, 
        constant: 0),
])

enter image description here

但我想要的是拥有这样的照片。我怎么去那里?

enter image description here

1 个答案:

答案 0 :(得分:4)

使用自动布局的ScrollView工作方式不同,您可以通过设置translatesAutoresizingMaskIntoConstraints = true并明确设置contentSize来仅使用一个子视图。 或者你设置translatesAutoresizingMaskIntoConstraints = false并让它自己找出约束。

在您的情况下,您可以在滚动内添加一个不可见的视图并将其固定到顶部并将其高度设置为scrollView.bounds.size.height,然后使用该不可见视图设置创建约束

像这样改变你的约束

scrollView.addConstraints([
    NSLayoutConstraint(
        item: circleContainerView, 
        attribute: .Bottom, 
        relatedBy: .Equal, 
        toItem: invisibleView, 
        attribute: .Bottom, 
        multiplier: 1, 
        constant: 0),
])

访问此link了解更多详情,请阅读纯自动布局方法

更新:修改后的代码

class ViewController: UIViewController {

    var created = false

    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        if !created {

            let scrollView = UIScrollView()
            scrollView.backgroundColor = UIColor.grayColor()
            view.addSubview(scrollView)

            let kidView = UIView()
            kidView.backgroundColor = UIColor.redColor()

            scrollView.addSubview(kidView)

            scrollView.translatesAutoresizingMaskIntoConstraints = false
            kidView.translatesAutoresizingMaskIntoConstraints = false

            scrollView.frame = view.bounds;
            scrollView.contentSize = view.bounds.size

            // Add an invisible view

            let inV = UIView()
            inV.backgroundColor = UIColor.clearColor()
            inV.translatesAutoresizingMaskIntoConstraints = false
            scrollView.addSubview(inV)


            view.addConstraints(
                NSLayoutConstraint.constraintsWithVisualFormat("H:|[scrollView]|", options: .AlignAllLeft, metrics: nil, views: ["scrollView": scrollView])
            )
            view.addConstraints(
                NSLayoutConstraint.constraintsWithVisualFormat("V:|[scrollView]|", options: .AlignAllLeft, metrics: nil, views: ["scrollView": scrollView])
            )

            var constraint = NSLayoutConstraint(item: inV, attribute: .Top, relatedBy: .Equal, toItem: scrollView, attribute: .Top, multiplier: 1, constant: 0)

            view.addConstraint(constraint)

            constraint = NSLayoutConstraint(item: inV, attribute: .Left, relatedBy: .Equal, toItem: scrollView, attribute: .Left, multiplier: 1, constant: 0)
            view.addConstraint(constraint)

            inV.addConstraints([
                NSLayoutConstraint(item: inV, attribute: .Width, relatedBy: .Equal, toItem: nil, attribute: .Width, multiplier: 1, constant: 10),
                NSLayoutConstraint(item: inV, attribute: .Height, relatedBy: .Equal, toItem: nil, attribute: .Height, multiplier: 1, constant: self.view.bounds.size.height),
                ])

            //

            kidView.addConstraints([
                NSLayoutConstraint(item: kidView, attribute: .Width, relatedBy: .Equal, toItem: nil, attribute: .Width, multiplier: 1, constant: 100),
                NSLayoutConstraint(item: kidView, attribute: .Height, relatedBy: .Equal, toItem: nil, attribute: .Height, multiplier: 1, constant: 100),
                ])

            view.addConstraints([
                NSLayoutConstraint(item: kidView, attribute: .CenterX, relatedBy: .Equal, toItem: scrollView, attribute: .CenterX, multiplier: 1, constant: 0),
                NSLayoutConstraint(item: kidView, attribute: .Bottom, relatedBy: .Equal, toItem: inV, attribute: .Bottom, multiplier: 1, constant: 0),
                ])

            created = true
        }
    }

}