UIScrollViews和锚点swift

时间:2016-09-11 23:25:31

标签: ios uiscrollview swift2 autolayout nslayoutconstraint

我无法设置滚动视图并实际向下滚动。我用一些文本字段填充了滚动视图,并使用了锚点(topanchor,leftanchor ......)将它们放置在滚动视图中。即使我将滚动视图高度设置为1000,它实际上不会移动,它继续显示相同的项目,滚动指示器确实下降但内容本身没有,我已经将滚动视图设置为scrollenabled,并委托给自己。

我认为这个问题可能与锚点有关,但是我如何在滚动视图中安排我的项目,任何消化都将被大大调整。

编辑:下面的代码表示应用于滚动视图的锚点(inputContainer),img对应于UIImageView,以及包含img和inputContainer的UIView的mainContainer。

inputContainer.topAnchor.constraintEqualToAnchor( img.bottomAnchor ).active = true
inputContainer.leftAnchor.constraintEqualToAnchor( mainContainer.leftAnchor ).active = true

inputContainer.widthAnchor.constraintEqualToAnchor( mainContainer.widthAnchor ).active = true

inputContainerBottomConstraint = inputContainer.bottomAnchor.constraintEqualToAnchor( cancelButton.topAnchor )
inputContainerBottomConstraint?.active = true

编辑:这就是代码的样子:

class SView : UIView, UITextFieldDelegate, UIScrollViewDelegate {

let mainContainer : UIView = {
    let v = UIView()
    v.backgroundColor = .whiteColor()
    v.layer.cornerRadius = 8
    v.layer.masksToBounds = true
    v.translatesAutoresizingMaskIntoConstraints = false
    return v
}()

let Img : UIImageView = {
    let img = UIImageView()
    img.image = UIImage(named: "noImage")
    img.backgroundColor = .blueColor()
    img.translatesAutoresizingMaskIntoConstraints = false
    img.contentMode = .ScaleAspectFill
    img.clipsToBounds = true
    return img
}()

let inputContainer : UIScrollView = {
    let ic = UIScrollView()
    ic.backgroundColor = .whiteColor()
    ic.translatesAutoresizingMaskIntoConstraints = false
    return ic
}()

let datePickerTextField : UITextField = {
    let tf = UITextField()
    tf.placeholder = "Fecha"
    tf.textAlignment = .Center
    tf.translatesAutoresizingMaskIntoConstraints = false
    return tf
}()

let tagsTextField : UITextField = {
    let tf = UITextField()
    tf.placeholder = "Tags"
    tf.textAlignment = .Center
    tf.clearButtonMode = .Always
    tf.translatesAutoresizingMaskIntoConstraints = false
    return tf
}()

lazy var cancelButton : UIButton = {
    let button = UIButton()
    button.backgroundColor = UIColor.rgb(255, green: 65, blue: 65, alpha: 1)
    button.setTitle("Cancelar", forState: .Normal)
    button.tintColor = .whiteColor()
    button.translatesAutoresizingMaskIntoConstraints = false

    button.addTarget( self , action: #selector(handleCancelButtonPressed), forControlEvents: .TouchUpInside)

    return button
}()

lazy var publicarButton : UIButton = {
    let button = UIButton()
    button.backgroundColor = UIColor.rgb(0 , green: 204, blue: 102, alpha: 1)
    button.setTitle("Publicar", forState: .Normal)
    button.tintColor = .whiteColor()
    button.translatesAutoresizingMaskIntoConstraints = false

    button.addTarget( self , action: #selector(handlePublicarButtonPressed), forControlEvents: .TouchUpInside)

    return button
}()


override init(frame: CGRect)
{
    super.init(frame: frame)

    inputContainer.delegate = self


    datePickerTextField.delegate = self

    tagsTextField.delegate = self

    setupMainContainer()
    setupImg()
    setupButtons()
    setupInputContainer()

}

required init?(coder aDecoder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
}

func setupMainContainer ()
{
    addSubview(mainContainer)

    mainContainer.centerXAnchor.constraintEqualToAnchor( centerXAnchor ).active = true
    mainContainer.centerYAnchor.constraintEqualToAnchor( centerYAnchor ).active = true

    mainContainer.widthAnchor.constraintEqualToAnchor( widthAnchor ).active = true
    mainContainer.heightAnchor.constraintEqualToAnchor( heightAnchor )
}

func setupImg ()
{
    mainContainer.addSubview(Img)

    Img.topAnchor.constraintEqualToAnchor( mainContainer.topAnchor ).active = true
    Img.leftAnchor.constraintEqualToAnchor( mainContainer.leftAnchor ).active = true

    Img.widthAnchor.constraintEqualToAnchor( mainContainer.widthAnchor ).active = true
    Img.heightAnchor.constraintEqualToAnchor( mainContainer.heightAnchor , multiplier: 0.3).active = true
}

var inputContainerBottomConstraint : NSLayoutConstraint?

func setupInputContainer ()
{
    mainContainer.addSubview(inputContainer)

    inputContainer.topAnchor.constraintEqualToAnchor( Img.bottomAnchor ).active = true
    inputContainer.leftAnchor.constraintEqualToAnchor( mainContainer.leftAnchor ).active = true
    inputContainer.rightAnchor.constraintEqualToAnchor( mainContainer.rightAnchor ).active = true
    inputContainerBottomConstraint = inputContainer.bottomAnchor.constraintEqualToAnchor( cancelButton.topAnchor )
    inputContainerBottomConstraint?.active = true



    inputContainer.addSubview( datePickerTextField )
    inputContainer.addSubview( tagsTextField )




    datePickerTextField.topAnchor.constraintEqualToAnchor( inputContainer.topAnchor ).active = true
    datePickerTextField.centerXAnchor.constraintEqualToAnchor( inputContainer.centerXAnchor ).active = true

    datePickerTextField.widthAnchor.constraintEqualToAnchor( inputContainer.widthAnchor ).active = true
    datePickerTextField.heightAnchor.constraintEqualToAnchor( inputContainer.heightAnchor, multiplier: 0.2 ).active = true


    tagsTextField.bottomAnchor.constraintEqualToAnchor( inputContainer.bottomAnchor ).active = true
    tagsTextField.centerXAnchor.constraintEqualToAnchor( inputContainer.centerXAnchor ).active = true

    tagsTextField.widthAnchor.constraintEqualToAnchor( inputContainer.widthAnchor ).active = true
    tagsTextField.heightAnchor.constraintEqualToAnchor( inputContainer.heightAnchor, multiplier: 0.2 ).active = true

}

func setupButtons()
{
    mainContainer.addSubview( cancelButton )
    mainContainer.addSubview( publicarButton )


    cancelButton.bottomAnchor.constraintEqualToAnchor( mainContainer.bottomAnchor).active = true
    cancelButton.leftAnchor.constraintEqualToAnchor( mainContainer.leftAnchor ).active = true

    cancelButton.widthAnchor.constraintEqualToAnchor( mainContainer.widthAnchor, multiplier:  0.5 ).active = true
    cancelButton.heightAnchor.constraintEqualToAnchor( mainContainer.heightAnchor, multiplier:  0.1).active = true



    publicarButton.bottomAnchor.constraintEqualToAnchor( mainContainer.bottomAnchor).active = true
    publicarButton.leftAnchor.constraintEqualToAnchor( cancelButton.rightAnchor ).active = true

    publicarButton.widthAnchor.constraintEqualToAnchor( mainContainer.widthAnchor, multiplier:  0.5 ).active = true
    publicarButton.heightAnchor.constraintEqualToAnchor( mainContainer.heightAnchor, multiplier:  0.1).active = true
} }

因此,当键盘出现时,滚动视图的底部锚定常量会发生变化,因此键盘“top anchor”是新的底部锚点。

1 个答案:

答案 0 :(得分:0)

根据您描述的约束,布局引擎无法确定滚动视图的内容高度。您应该将底部文本字段固定在滚动视图的底部。这样,滚动视图的内容大小将调整为所有文本字段的最大值。以下是您可以在操场上看到的一些代码:

import UIKit
import XCPlayground

let scrollView = UIScrollView(frame: CGRect(x: 0, y: 0, width: 200, height: 150))
scrollView.backgroundColor = UIColor.whiteColor()

let textField = UITextField()
textField.translatesAutoresizingMaskIntoConstraints = false
textField.backgroundColor = UIColor.purpleColor()

let otherTextField = UITextField()
otherTextField.translatesAutoresizingMaskIntoConstraints = false
otherTextField.backgroundColor = UIColor.purpleColor()

let otherOtherTextField = UITextField()
otherOtherTextField.translatesAutoresizingMaskIntoConstraints = false
otherOtherTextField.backgroundColor = UIColor.purpleColor()

scrollView.addSubview(textField)

textField.topAnchor.constraintEqualToAnchor(scrollView.topAnchor).active = true
textField.leadingAnchor.constraintEqualToAnchor(scrollView.leadingAnchor).active = true
textField.widthAnchor.constraintEqualToAnchor(scrollView.widthAnchor).active = true

scrollView.addSubview(otherTextField)

otherTextField.topAnchor.constraintEqualToAnchor(textField.bottomAnchor, constant: 60).active = true
otherTextField.leadingAnchor.constraintEqualToAnchor(scrollView.leadingAnchor).active = true
otherTextField.widthAnchor.constraintEqualToAnchor(scrollView.widthAnchor).active = true

scrollView.addSubview(otherOtherTextField)
otherOtherTextField.topAnchor.constraintEqualToAnchor(otherTextField.bottomAnchor, constant: 60).active = true
otherOtherTextField.leadingAnchor.constraintEqualToAnchor(scrollView.leadingAnchor).active = true
otherOtherTextField.widthAnchor.constraintEqualToAnchor(scrollView.widthAnchor).active = true
otherOtherTextField.bottomAnchor.constraintEqualToAnchor(scrollView.bottomAnchor).active = true

scrollView.setNeedsLayout()

XCPlaygroundPage.currentPage.liveView = scrollView

这会在滚动视图中放置三个文本字段,中心与顶部和底部之间有60个点。如果你发表评论:

otherOtherTextField.bottomAnchor.constraintEqualToAnchor(scrollView.bottomAnchor).active = true

助理编辑器中的滚动视图不会滚动,但可以滚动它。