How to create a various type of cells in a single tableView?

Question

I'm currently developing an app which has features like half Uber, half Tinder.

I would like to create a TableView for editing profile to make it look like a view of Tinder's profile editing view.

I successfully made a first cell for picking up profile image and second cell for textLabel.

I want to make a third cell which has an editable TextView(not textField so users can enter several lines of words) But the codes aren't working as I intended.

It seems like although I made a textView in my Custom Cell Class and set it to my third tableView cell in my tableViewController class, it doesn't appear on my simulator.

I'm still not quite sure what's the good way to make several types of cell for a single tableView so if there's other better way to do it, I would love to know.

My codes related to this issue is below.

ViewController

//EditProfileViewController For The Profile Edit view
class EditProfileViewController: UINavigationController {

override func viewDidLoad() {
    super.viewDidLoad()

    // Do any additional setup after loading the view.
}

override func didReceiveMemoryWarning() {
    super.didReceiveMemoryWarning()
    // Dispose of any resources that can be recreated.
}

}

TableViewController

//MyTableViewController for the EditProfileViewController
class EditProfileTableViewController: UITableViewController, UINavigationControllerDelegate, UIImagePickerControllerDelegate, UITextViewDelegate {
override func viewDidLoad() {
    super.viewDidLoad()

}

    override func numberOfSections(in tableView: UITableView) -> Int {

    return 3
}

override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    if section == 0 {
        return 5
    } else if section == 1 {
        return 2
    } else {
        return 4
    }
}


override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    //link my custom Cell here
    if let cell = tableView.dequeueReusableCell(withIdentifier: "MyCustomCell", for: indexPath) as?  MyCellTableViewCell {

        if indexPath.section == 0 {

            if indexPath.row  == 0 {
                //this row is for an Image Picker
                cell.textLabel?.text = "edit profile image"
            } else if indexPath.row == 1 {
                //this row is just like a title of third cell which is editable self description
                cell.textLabel?.text = "Describe yourself"
                cell.isUserInteractionEnabled = false
            } else if indexPath.row == 2 {
                //this row is an editable self description
                cell.addSubview(cell.selfDescritionTextView)
                cell.selfDescritionTextView.delegate = self
                cell.selfDescritionTextView.isEditable = true
                cell.selfDescritionTextView.text = "Enter some descriptions here"


            }

        }

        else if indexPath.section == 1 {
            cell.textLabel?.text = "section 1"


        }

        else if indexPath.section == 2 {
            cell.textLabel?.text = "section 2"

        }


        return cell
    } else {
        //Just in case
        return UITableViewCell()
    }
}

}

TableViewCell

//MyCellTableViewCell
class MyCellTableViewCell: UITableViewCell {

//create a textView for self description
var selfDescritionTextView = UITextView()

//init
override init(style: UITableViewCellStyle, reuseIdentifier: String?) {
    super.init(style: .default, reuseIdentifier: "MyCustomCell")
    selfDescritionTextView = UITextView(frame: self.frame)
    self.addSubview(selfDescritionTextView)
}

required init?(coder aDecoder: NSCoder) {
    super.init(coder: aDecoder)
}


override func awakeFromNib() {
    super.awakeFromNib()
    // Initialization code
}

override func setSelected(_ selected: Bool, animated: Bool) {
    super.setSelected(selected, animated: animated)

    // Configure the view for the selected state
}

}

If you need to know more codes than what I showed here, Please let me know.

I'm not obsessed with this method to create my edit profile View so if anyone knows other ways better than this, I would LOVE to know as well.

Thanks

Abel C · Accepted Answer

override func viewDidLoad() {
   super.viewDidLoad()

   // Do any additional setup after loading the view.
   tableView.register(UINib(nibName: TableViewCell1.NibName, bundle: nil), forCellReuseIdentifier: TableViewCell1.Identifier)
   tableView.register(UINib(nibName: TableViewCell2.NibName, bundle: nil), forCellReuseIdentifier: TableViewCell2.Identifier)
   tableView.register(UINib(nibName: TableViewCell3.NibName, bundle: nil), forCellReuseIdentifier: TableViewCell3.Identifier)
}

You'll have 3 Custom Table View Cells, with its subviews, respectively:

class MyCellTableViewCell1: UITableViewCell {
   static var NibName: String = String(describing: TableViewCell1.self)
   static var Identifier: String = "TableViewCell1"

   func configure() { ... }
}

Then:

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
   let cell: UITableViewCell
   // link my custom Cell here. 

   if indexPath.row  == 0, let dequeuedCell = tableView.dequeueReusableCell(withIdentifier: TableViewCell1.Identifier, for: indexPath) as? TableViewCell1 {
      dequeuedCell.configure()
      cell = dequeuedCell
   }
   else if indexPath.row  == 1, let dequeuedCell = tableView.dequeueReusableCell(withIdentifier: TableViewCell2.Identifier, for: indexPath) as? TableViewCell2 {
      dequeuedCell.configure()
      cell = dequeuedCell
   }
   else if indexPath.row  == 2, let dequeuedCell = tableView.dequeueReusableCell(withIdentifier: TableViewCell3.Identifier, for: indexPath) as? TableViewCell3 {
      dequeuedCell.configure()
      cell = dequeuedCell
   }
   else {
      cell = UITableViewCell()
   }


   return cell

}

How to create a various type of cells in a single tableView?

Answers (2)

Related Questions