将标签和UITextField放在TableView中

Question

xcode / swift的新手，现在花了几天的时间试图解决这个问题。 创建通用应用程序，并且在使约束以编程方式工作时遇到问题。 我想以编程方式在TableView中添加标签和UITextField。 标签应始终具有固定的宽度。 文本字段的宽度应取决于设备。

这是现在的样子：

这是一个外观的想法：

标签应为设定的宽度。 但文本字段应使用可用的屏幕。

这是到目前为止的代码：

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {


        // Setup Cell
        let cell = UITableViewCell(style: .default, reuseIdentifier: nil)

        // Make cell unselectable
        cell.selectionStyle = .none

        // Process Each Row
        let row = indexPath.row
        switch row
        {
        case 0:
            let label = UILabel()
            label.text = "First Name:"
            label.frame = CGRect(x: CGFloat(0), y: CGFloat(0), width: CGFloat(40), height: CGFloat(30))
            cell.contentView.addSubview(label)

            var textField: UITextField = UITextField()

            textField.frame = CGRect(x: CGFloat(0), y: CGFloat(0), width: CGFloat(170), height: CGFloat(30))

            textField.borderStyle = .roundedRect
            textField.backgroundColor = UIColor.magenta
            textField.text = "TEST"

            textField.textColor = UIColor.black
            textField.translatesAutoresizingMaskIntoConstraints = false

            cell.contentView.addSubview(textField)

            let leadingConstraint = NSLayoutConstraint(item: cell.contentView, attribute: .leftMargin, relatedBy: .equal, toItem: label, attribute: .leftMargin, multiplier: 1.0, constant: 0)
            let trailingConstraint = NSLayoutConstraint(item: cell.contentView, attribute: .rightMargin, relatedBy: .equal, toItem: textField, attribute: .rightMargin, multiplier: 1.0, constant: 0)

            cell.contentView.addConstraint(leadingConstraint)
            cell.contentView.addConstraint(trailingConstraint)

....

如果您需要其他信息，请在降票之前告诉我。 任何帮助，将不胜感激。 谢谢。

UpholderOfTruth的回答：

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {


        // Setup Cell
        let cell = UITableViewCell(style: .default, reuseIdentifier: nil)

        // Make cell unselectable
        cell.selectionStyle = .none

        // Process Each Row
        let row = indexPath.row
        switch row
        {
        case 0:
            let label = UILabel()
            label.text = "First Name:"
            label.frame = CGRect(x: CGFloat(0), y: CGFloat(0), width: CGFloat(40), height: CGFloat(30))
            label.translatesAutoresizingMaskIntoConstraints = false
            cell.contentView.addSubview(label)

            var textField: UITextField = UITextField()

            textField.frame = CGRect(x: CGFloat(0), y: CGFloat(0), width: CGFloat(170), height: CGFloat(30))

            textField.borderStyle = .roundedRect
            textField.backgroundColor = UIColor.magenta
            textField.text = "TEST"

            textField.textColor = UIColor.black
            textField.translatesAutoresizingMaskIntoConstraints = false

            cell.contentView.addSubview(textField)

// Horizontal Constraints  
cell.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|[label(==100)][textField]|", options: .init(rawValue: 0), metrics: nil, views: ["label": label, "textField": textField]))

// Vertical Constraints
cell.contentView.addConstraint(NSLayoutConstraint(item: label, attribute: .centerY, relatedBy: .equal, toItem: cell.contentView, attribute: .centerY, multiplier: 1, constant: 0))
cell.contentView.addConstraint(NSLayoutConstraint(item: textField, attribute: .centerY, relatedBy: .equal, toItem: cell.contentView, attribute: .centerY, multiplier: 1, constant: 0))
....

Answer 1

我建议使用全自动布局，不要混合使用方法。 因此，首先通过将translatesAutoresizingMaskIntoConstraints设置为false，将两个视图都设置为使用自动布局。

然后要么像这样在视觉上设置约束：

cell.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|[label(==100)][textField]|", options: .init(rawValue: 0), metrics: nil, views: ["label": label, "textField": textField]))

或像这样的个人约束：

cell.contentView.addConstraint(NSLayoutConstraint(item: label, attribute: .left, relatedBy: .equal, toItem: cell, attribute: .left, multiplier: 1, constant: 0))
cell.contentView.addConstraint(NSLayoutConstraint(item: label, attribute: .width, relatedBy: .equal, toItem: nil, attribute: .width, multiplier: 1, constant: 100))
cell.contentView.addConstraint(NSLayoutConstraint(item: label, attribute: .right, relatedBy: .equal, toItem: textField, attribute: .left, multiplier: 1, constant: 0))
cell.contentView.addConstraint(NSLayoutConstraint(item: textField, attribute: .right, relatedBy: .equal, toItem: cell, attribute: .right, multiplier: 1, constant: 0))

当然，这只是处理水平定位和尺寸调整，您还需要对垂直定位和尺寸调整做一些事情，但是您可能会在代码中进一步进行设置。

编辑 ：

要垂直居中，您可以执行以下操作：

cell.contentView.addConstraint(NSLayoutConstraint(item: label, attribute: .centerY, relatedBy: .equal, toItem: cell.contentView, attribute: .centerY, multiplier: 1, constant: 0))
cell.contentView.addConstraint(NSLayoutConstraint(item: textField, attribute: .centerY, relatedBy: .equal, toItem: cell.contentView, attribute: .centerY, multiplier: 1, constant: 0))

编辑2 ：

合并成一行：

cell.contentView.addConstraints([NSLayoutConstraint(item: label, attribute: .centerY, relatedBy: .equal, toItem: cell.contentView, attribute: .centerY, multiplier: 1, constant: 0), NSLayoutConstraint(item: textField, attribute: .centerY, relatedBy: .equal, toItem: cell.contentView, attribute: .centerY, multiplier: 1, constant: 0)])

编辑3 ：

cell.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|-8-[label(==100)][textField]-8-|", options: .init(rawValue: 0), metrics: nil, views: ["label": label, "textField": textField]))

Answer 2

更改以下属性：

    switch row
            {
            case 0:
            let leadingConstraint = NSLayoutConstraint(item: cell.contentView, attribute: .leftMargin, relatedBy: .equal, toItem: label, attribute: .leftMargin, multiplier: 1.0, constant: 0)
                let trailingConstraint = NSLayoutConstraint(item: cell.contentView, attribute: .rightMargin, relatedBy: .equal, toItem: textField, attribute: .rightMargin, multiplier: 1.0, constant: 0)

                cell.contentView.addConstraint(leadingConstraint)
                cell.contentView.addConstraint(trailingConstraint)

                let label = UILabel()
                label.text = "First Name:"
                //here is the trick: play with x and width. It might also be cell.contentView.size().width
                label.frame = CGRect(x: CGFloat(35), y: CGFloat(0), width: CGFloat(cell.frame.width * 1/3), height: CGFloat(30))
                cell.contentView.addSubview(label)

                var textField = UITextField()

                textField.frame = CGRect(x: CGFloat(0), y: CGFloat(0), width: CGFloat(cell.frame.width * 2/3), height: CGFloat(30))

                textField.borderStyle = .roundedRect
                textField.backgroundColor = UIColor.magenta
                textField.text = "TEST TEST TEST"

                textField.textColor = UIColor.black
                textField.translatesAutoresizingMaskIntoConstraints = false

                cell.contentView.addSubview(textField)

让我知道这个是否奏效。