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)

....

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

通过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))

<强> EDIT2 ：

合并为一行：

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)])

<强> EDIT3 ：

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)

让我知道这是否有效。

在TableView中居中标签和UITextField

2 个答案: