Swift Custom Cell creating your own Cell with labels

Sascha picture Sascha · Oct 8, 2015 · Viewed 15.3k times · Source

I've just started to use Swift as a prorgamming language and i've run into a problem with Custom cells.

When i try to create custom cells, and then go forward and try to design them the way i need them ( with Style set to Custom ) everything looks good. Now i don't know how to put specific data into them, since all tutorials i found used the style option "basic" where they only have a text label to which they assign their data.

Now for me, when i "control drag" my labels into my code, i give them specific names such as "dateLabel" or "sourceLabel" in order to insert the data correctly.

now i'm not sure, and couldn't find any answers that worked, on how to recall my custom made labels so that i can assign my data to them...

Maybe someone of you could help me with this, since i'm pretty sure it's a simple problem but i coudln't find any resources to this ^^

enter image description here

hopefully the font isn't to small, i just wanted you guys to see the erros i get.

I used the following tutorial as a guide line, since it was the only one that worked just the way this guy did it: https://www.youtube.com/watch?v=0qE8olxB3Kk

I checked the identifier and he is set correctly and i can't find anything online on how i have to properly refer to my own labels with their correct names.

any help would be appreciated :)

Answer

whyceewhite picture whyceewhite · Oct 8, 2015

Try the following steps:

  1. Create a custom table view cell class that extends UITableViewCell. In my example, the custom table view cell class is called MyCustomTableViewCell.

  2. Update your storyboard's cell so that it uses your custom table view cell class. Go to the Identity Inspector and set the Class value to the name of your custom table view cell class. Set Custom Cell Class in Identity Inspector

  3. Update your storyboard's cell and give it a reuse identity value. Go to the Attributes Inspector and set the Identifier value. For example, I gave my cell an Identifier value of MyCustomCell. Set the Reuse Identity of your Cell

  4. Control drag the cell's labels into your new custom table view cell class (i.e., the MyCustomTableViewCell class).


Once you have done the above steps, you will be able to access the labels when you dequeue your cell in the tableView:cellForRowAtIndexPath: method. As the code snippet below shows, you will need to: 1) get the cell using the reuse identifier you established in the steps above and 2) cast to your custom table view cell class.

For example, here's what your custom table view cell would look like if you named it MyCustomTableViewCell. This is after you created the class and control dragged your labels into this class.

class MyCustomTableViewCell: UITableViewCell {    
    @IBOutlet weak var categoryLabel: UILabel!
    @IBOutlet weak var dateLabel: UILabel!
    @IBOutlet weak var sourceLabel: UILabel!
    @IBOutlet weak var titleLabel: UILabel!
} 

Your ViewController could look like this:

// NOTE: I subclassed UITableViewController since it provides the
// delegate and data source protocols. Consider doing this.
class ViewController: UITableViewController {

    // You do NOT need your UILabels since they moved to your
    // custom cell class.

    // ...
    // Omitting your other methods in this code snippet for brevity.
    // ... 

    override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {

        // Use your cell's reuse identifier and cast the result
        // to your custom table cell class. 
        let article = tableView.dequeueReusableCellWithIdentifier("MyCustomCell", forIndexPath: indexPath) as! MyCustomTableViewCell

        // You should have access to your labels; assign the values.
        article.categoryLabel?.text = "something"            
        article.dateLabel?.text = "something"            
        article.sourceLabel?.text = "something"            
        article.titleLabel?.text = "something"            

        return article
    }
}