iOS Cellules personnalisées


Exemple

Personnaliser un UITableViewCell peut permettre des interfaces très puissantes, dynamiques et réactives. Grâce à une personnalisation étendue et à d'autres techniques, vous pouvez: mettre à jour des propriétés spécifiques ou des éléments d'interface pour modifier, animer ou dessiner des éléments, charger des vidéos de manière efficace ou même télécharger des images depuis un ordinateur. réseau. Les possibilités ici sont presque infinies. Vous trouverez ci-dessous un exemple simple de ce à quoi une cellule personnalisée peut ressembler.

Exemple d'un UITableViewCell personnalisé

Cette section couvre les bases, et nous espérons qu'elle sera élargie pour détailler des processus plus complexes tels que ceux décrits ci-dessus.

Créer votre cellule personnalisée

Tout d'abord, créez une nouvelle sous-classe de UITableViewCell (créez une nouvelle classe Cocoa Touch dans Xcode et définissez UITableViewCell comme super-classe). Voici ce que votre code peut ressembler après le sous-classement.

Rapide

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)
    }
}

Si vous le souhaitez, cochez la case "Créer également un fichier XIB" lors de la création de votre nouveau fichier à personnaliser à l'aide d'Interface Builder. Si vous le faites, connectez customLabel tant que @IBOutlet

Créez également un fichier XIB

Dans un UIViewController contenant la tableView , enregistrez la classe de la nouvelle cellule personnalisée (voir ci-dessous). Notez que cela n'est nécessaire que si vous ne concevez pas la cellule avec un Storyboard dans l'interface de votre vue de table.

Rapide

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

Si vous avez choisi d'utiliser un fichier XIB, registerNib plutôt:

Rapide

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

Maintenant que votre tableView connaît votre cellule personnalisée, vous pouvez la cellForRowAtIndexPath dans cellForRowAtIndexPath :

Rapide

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
}