具有 4 个文本字段的自定义单元格

Question

我正在处理我当前项目中的一个相当大的问题。 我有一个页面需要填写信息并将其发送给我的 Firebase 数据库中的用户。 我不是在询问如何向这些用户发送信息。 我有一个视图 controller 有一个表格视图插入并正确约束。 这是一张图片：

我最初想在其中一个单元格中设置一个按钮。 我现在已经从那个开始，并将它放在 tableview 上方的视图中。 当我单击该按钮时，它会附加一个数组以增加表格视图单元格的数量。

我要在表格视图中填充的单元格需要 4 个文本字段。 我有一个自定义单元格 swift 文件，其中包含以下代码。

import UIKit

进口 Firebase

class 注意事项Cell：UITableViewCell {

let NameTextField: UITextField = {
       let tv = UITextField()
       tv.placeholder = "Name"
       tv.font = UIFont.systemFont(ofSize: 16)
       tv.translatesAutoresizingMaskIntoConstraints = false
       tv.backgroundColor = UIColor.white
       tv.textColor = .black
       return tv
   }()

let FeedTextField: UITextField = {
    let tv = UITextField()
    tv.placeholder = "#"
    tv.font = UIFont.systemFont(ofSize: 16)
    tv.translatesAutoresizingMaskIntoConstraints = false
    tv.backgroundColor = UIColor.clear
    tv.textColor = .white
    return tv
}()

let StoryTextField: UITextField = {
    let tv = UITextField()
    tv.placeholder = "#"
    tv.font = UIFont.systemFont(ofSize: 16)
    tv.translatesAutoresizingMaskIntoConstraints = false
    tv.backgroundColor = UIColor.clear
    tv.textColor = .white
    return tv
}()

let CompensationTextField: UITextField = {
    let tv = UITextField()
    tv.placeholder = "$"
    tv.font = UIFont.systemFont(ofSize: 16)
    tv.translatesAutoresizingMaskIntoConstraints = false
    tv.backgroundColor = UIColor.clear
    tv.textColor = .white
    return tv
}()

override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
    super.init(style: style, reuseIdentifier: reuseIdentifier)
    
    
    addSubview(NameTextField)
    addSubview(FeedTextField)
    addSubview(StoryTextField)
    addSubview(CompensationTextField)
    
    
    NameTextField.leftAnchor.constraint(equalTo: self.leftAnchor, constant: 20).isActive = true
           NameTextField.centerYAnchor.constraint(equalTo: self.centerYAnchor).isActive = true
           NameTextField.widthAnchor.constraint(equalToConstant: 100).isActive = true
           NameTextField.heightAnchor.constraint(equalToConstant: 50).isActive = true
    
}

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

以下是单元格应出现在的 controller 的代码：

 import UIKit
 import Firebase

 class ConsiderationsViewController: UIViewController {

var numberOfPeople: [String] = ["1","2"]

var AddPersonCell = "AddPersonCell"

@IBOutlet weak var CompanyImage: UIImageView!

 var database: Database!
    var storage: Storage!
    var selectedImage: UIImage?
    
    var ref:DatabaseReference?
    var databaseHandle:DatabaseHandle = 0
    
    let dbref = Database.database().reference()
    let uid = Auth.auth().currentUser?.uid
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // Set the Firebase reference
        ref = Database.database().reference()
        
        let tapGesture = UITapGestureRecognizer(target: self, action: #selector(ConsiderationsViewController.handleSelectCompanyImageView))
         CompanyImage.addGestureRecognizer(tapGesture)
         CompanyImage.isUserInteractionEnabled = true

        self.navigationController!.navigationBar.isTranslucent = false
        
        navigationItem.backBarButtonItem = UIBarButtonItem(
        title: "", style: .plain, target: nil, action: nil)
        
    }

    @objc func handleSelectCompanyImageView() {

        let pickerController = UIImagePickerController()
        pickerController.delegate = self
        pickerController.allowsEditing = true
        present(pickerController, animated: true, completion: nil)
                    }
    
@IBAction func AddPersonTapped(_ sender: Any) {
     insertNewPersonCell()
}

func insertNewPersonCell() {

  }



 }
    
     extension ConsiderationsViewController: UIImagePickerControllerDelegate, UINavigationControllerDelegate {
               func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]) {
                   //print("did Finish Picking Media")
                   if let image = info[UIImagePickerController.InfoKey(rawValue: "UIImagePickerControllerOriginalImage")] as? UIImage{
                       selectedImage = image
                       CompanyImage.image = image
                   }
                   dismiss(animated: true, completion: nil)
               }
    }

  extension ConsiderationsViewController: UITableViewDelegate, UITableViewDataSource {
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return 2
}

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

    let cell = tableView.dequeueReusableCell(withIdentifier: AddPersonCell, for: indexPath) as! ConsiderationsCell

    return cell
  }
 }

我应该如何约束这些文本字段？ 我希望它与上图中的大小大致相同。 我希望我做对了。 我知道 StackOverFlow 不适用于教程，但我很难找到有关如何创建自定义单元格的内容，现在我有代码和更好的方法，我认为发布一个问题是合适的。

任何帮助将不胜感激。

Answer 1

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
    
    @IBOutlet weak var simpleTableView: UITableView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }
    
    
    func numberOfSections(in tableView: UITableView) -> Int {
        return 1
    }
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 5
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "SimpleCell", for: indexPath) as! SimpleCell
        
        if(indexPath.row % 2 == 0 ) {
            
            cell.vi1.backgroundColor = .red
            
        } else {
            
            cell.vi1.backgroundColor = .black
            
        }
        
        return cell
    }
    
    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return 100
    }
    
}


class SimpleCell: UITableViewCell {
    @IBOutlet weak var vi1: UIView!
    @IBOutlet weak var vi2: UIView!
    override func awakeFromNib() {
        super.awakeFromNib()
        // things done 
    }
}

使用 storyboard 连接作为@IBOutlets

拖放UITableView到UIViewController作为设置delegate和dataSource源

Select 您在 storyboard 中的自定义 UITableViewCell 并在Identity Inspector中将其单元格 class 设置为您的UITableViewCell ZA2F22ED4F8EBC2ACBB1