將標簽和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)

讓我知道這個是否奏效。