Custom Cells

suggest change

Customizing a UITableViewCell can allow for very powerful, dynamic, and responsive interfaces. With extensive customization and in combination with other techniques you can do things like: update specific properties or interface elements as they change, animate or draw things in the cell, efficiently load video as the user scrolls, or even display pictures as they download from a network. The possibilities here are nearly endless. Below is a simple example of what a custom cell may look like.

This section covers the basics, and hopefully will be expanded to detail more complex processes like those described above.

Creating Your Custom Cell

First, create a new subclass of UITableViewCell (create a new Cocoa Touch Class in Xcode and set UITableViewCell as the superclass). Below is what your code may look like after subclassing.

Swift

class CustomTableViewCell: UITableViewCell {
    static var identifier: String {
        return NSStringFromClass(self)
    }

    var customLabel: UILabel!
override func awakeFromNib() {
    super.awakeFromNib()
    // Initialization code
    customLabel = UILabel(frame: CGRect(x: 0, y: 0, width: contentView.frame.width, height: contentView.frame.height))
    customLabel.textAlignment = .center
    contentView.addSubview(customLabel)
}
}

Optionally, check ‘Also create a XIB file’ when creating your new file to customize using Interface Builder. In the case that you do, connect customLabel as an @IBOutlet

In a UIViewController containing the tableView, register the new custom cell’s class (see below). Note, this is only necessary if you do not design the cell with a Storyboard in your table view’s interface.

Swift

override func viewDidLoad() {
    super.viewDidLoad()
    
    // Register Cell Class
    tableView.register(CustomTableViewCell.self, forCellReuseIdentifier: CustomTableViewCell.identifier)
}

If you chose to use a XIB file, registerNib instead:

Swift

// Register Nib
tableView.register(UINib(nibName: CustomTableViewCell.identifier, bundle: nil), forCellReuseIdentifier: CustomTableViewCell.identifier)

Now that your tableView knows about your custom cell, you can dequeue it in cellForRowAtIndexPath:

Swift

func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
    // Load the CustomTableViewCell. Make sure the identifier supplied here matches the one from your cell
    let cell: CustomTableViewCell = tableView.dequeueReusableCellWithIdentifier(CustomTableViewCell.identifier) as! CustomTableViewCell

    // This is where the magic happens - setting a custom property on your very own cell
    cell.customLabel.text = "My Custom Cell"

    return cell
}

Feedback about page:

Feedback:
Optional: your email if you want me to get back to you:


UITableView:
* Custom Cells

Table Of Contents
10 UITableView
12 UIView
15 UIColor
26 UIImage
28 CALayer
30 NSDate
40 iBeacon
49 NSTimer
79 NSURL
87 AWS SDK
96 NSData
101 Segues
104 EventKit
105 NSBundle
106 SiriKit
111 StoreKit
117 3D Touch
119 Keychain
122 Block
141 AirDrop
144 UISlider
145 Carthage
146 HealthKit
151 plist
157 MVVM
164 UIPhoenix
166 Simulator
168 NSArray
169 OpenGL
175 Core Data
179 MyLayout
180 UIFont
189 Security
200 Codable