简体   繁体   English

UIStackView内的UITextField间距关于宽度约束的问题

[英]UITextField inside UIStackView Spacing Issue on width constraint

I have a vertical UIStackView which has various of UITextFields (Now It is only 4) inside it. 我有一个垂直的UIStackView ,里面有各种UITextFields (现在只有4个)。 When I give spacing to UIStackView, I gave below error; 当我给UIStackView间隔时,我给出了以下错误;

 "<NSLayoutConstraint:0x1c4286720 H:|-(0)-[UIStackView:0x104d3e6f0](LTR) (active, names: '|':Hello.OtpInputView:0x104d3c5b0 )>", "<NSLayoutConstraint:0x1c4286770 UIStackView:0x104d3e6f0.right == Hello.OtpInputView:0x104d3c5b0.right (active)>", "<NSLayoutConstraint:0x1c4286860 '_UITemporaryLayoutWidth' Hello.OtpInputView:0x104d3c5b0.width == 0 (active)>", "<NSLayoutConstraint:0x1c4286e50 'UISV-canvas-connection' UIStackView:0x104d3e6f0.leading == Hello.CustomOtpTextField:0x10588d600.leading (active)>", "<NSLayoutConstraint:0x1c4286ea0 'UISV-canvas-connection' H:[Hello.CustomOtpTextField:0x105082600]-(0)-| (active, names: '|':UIStackView:0x104d3e6f0 )>", "<NSLayoutConstraint:0x1c4286f40 'UISV-fill-equally' Hello.CustomOtpTextField:0x105024600.width == Hello.CustomOtpTextField:0x10588d600.width (active)>", "<NSLayoutConstraint:0x1c4287030 'UISV-fill-equally' Hello.CustomOtpTextField:0x105077a00.width == Hello.CustomOtpTextField:0x10588d600.width (active)>", "<NSLayoutConstraint:0x1c42871c0 'UISV-fill-equally' Hello.CustomOtpTextField:0x105082600.width == Hello.CustomOtpTextField:0x10588d600.width (active)>", "<NSLayoutConstraint:0x1c4286ef0 'UISV-spacing' H:[Hello.CustomOtpTextField:0x10588d600]-(10)-[Hello.CustomOtpTextField:0x105024600] (active)>", "<NSLayoutConstraint:0x1c4286fe0 'UISV-spacing' H:[Hello.CustomOtpTextField:0x105024600]-(10)-[Hello.CustomOtpTextField:0x105077a00] (active)>", "<NSLayoutConstraint:0x1c42870d0 'UISV-spacing' H:[Hello.CustomOtpTextField:0x105077a00]-(10)-[Hello.CustomOtpTextField:0x105082600] (active)>" 

)

Will attempt to recover by breaking constraint 将尝试通过打破约束来恢复

How I declare StackView: 我如何声明StackView:

stackView.translatesAutoresizingMaskIntoConstraints = false
stackView.axis = .horizontal
stackView.distribution = .fillEqually
stackView.spacing = 10

//textFields is just an array of UITextFields
textFields.enumerated().forEach { (index,field) in
    field.textColor = UIColor.darkGray
    field.font = Font.sourceSansRegular?.withSize(46)
    field.keyboardType = .numberPad
    field.delegate = self
    field.translatesAutoresizingMaskIntoConstraints = false
    field.tag = index
    field.textAlignment = .center
    field.myDelegate = self
    field.sizeToFit()
    stackView.addArrangedSubview(field)
    field.widthAnchor.constraint(equalTo: stackView.widthAnchor, multiplier: (CGFloat(0 / textFields.count)),constant: CGFloat(10 * (textFields.count - 1))).isActive = true
}

self.addSubview(stackView)
stackView.anchor(self.topAnchor, left: self.leftAnchor, bottom: self.bottomAnchor, right: self.rightAnchor, topConstant: 0, leftConstant: 0, bottomConstant: 0, rightConstant: 0, widthConstant: 0, heightConstant: 0)

What I want Is that for example UIStackView has 110pt width and 10 space then UITextFields should has 20pt ((20 * 4) + (3 * 10) which is 110). 我想要的是例如UIStackView具有110pt的宽度和10个空间,然后UITextFields应该具有20pt((20 * 4)+(3 * 10),即110)。 Therefore, all UITextFields should has same width (Fill Equally) 因此,所有UITextFields应该具有相同的宽度(均等填充)

How can I achieve this? 我该如何实现?

EDIT: I think I need to specify at least one width for one TextField so I added 编辑:我想我需要为一个TextField指定至少一种宽度,所以我添加了

 field.widthAnchor.constraint(equalTo: stackView.widthAnchor, multiplier: (CGFloat(0 / textFields.count)),constant: CGFloat(10 * (textFields.count - 1))).isActive = true

However this also give break error. 但是,这也会产生中断错误。

EDIT2: This stack view is in a custom UIView and I'm giving anchors inside EDIT2:此堆栈视图位于自定义UIView中,我在其中提供锚点

 override init(frame: CGRect) {
    super.init(frame: frame)
    //Where I gave all anchors
    setupUI()
}

Also How I initialize this custom UIView 还有我如何初始化此自定义UIView

    override func viewDidLoad() {
    super.viewDidLoad()

    // Do any additional setup after loading the view.
    self.view.backgroundColor = UIColor.white
    self.view.addSubview(otpField)
    otpField.anchor(self.view.topAnchor, left: self.view.leftAnchor, bottom: nil, right: self.view.rightAnchor, topConstant: 40, leftConstant: 40, bottomConstant: 0, rightConstant: 40, widthConstant: 0, heightConstant: 60)
}

What I want to achieve in a picture: 我要在图片中实现的目标:

图片

You just need to add a single constraint for height if you already set the stackView.distribution = .fillEqually add a constraint to any of your textFiled like this 如果已经设置了stackView.distribution = .fillEquallystackView.distribution = .fillEqually需要添加一个高度限制,就可以像这样向所有stackView.distribution = .fillEqually添加限制

let height = NSLayoutConstraint(item: textField1, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .height, multiplier: 1.0, constant: 40.0)
textField1.addConstraint = height

By doing this way All of your textfield will be of height 40 and the total size will depend on the number of item and spacing given for ie Height = 40 , Space = 10 Then Total height will be (Height * Number of textfields) + (Space * (number of textfield - 1)) 通过这种方式,您所有的文本字段的高度将为40,总大小将取决于项的数量和间距,即Height = 40Space = 10则总高度将为(Height * Number of textfields) + (Space * (number of textfield - 1))

NOTE : Concept is same for vertical and horizontal stackview you need to play with height and width. 注意:垂直和水平堆栈视图的概念相同,您需要使用高度和宽度来播放。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM