Table View Cells
CoreA family of UITableViewCell subclasses. TTBaseUITableViewCell is the base β provides a padded panel sub-view, selection highlight, skeleton animation, and bottom border support. Specialized subclasses provide ready-made content layouts.
| Class | Layout |
|---|---|
TTBaseUITableViewCell | Base cell β empty panel, subclass and fill |
BaseShadowTableViewCell | Cell with shadow card effect on panel |
BaseTextSubtextHorTableViewCell | Horizontal: left label + right label (key-value) |
IconTextSubtextTableViewCell | Icon (left) + title + subtitle (right) |
IconTextSubtextTextSubTextRightTableViewCell | Icon + texts left + texts right |
TextIconTableViewCell | Text (left) + icon (right) |
TextSubtextIconTableViewCell | Title + subtitle + icon (right) |
π Usage
// Register and dequeue
tableView.register(TTBaseUITableViewCell.self,
forCellReuseIdentifier: TTBaseUITableViewCell.reuseIdentifier)
let cell = tableView.dequeueReusableCell(
withIdentifier: TTBaseUITableViewCell.reuseIdentifier,
for: indexPath
) as! TTBaseUITableViewCell
// Subclass and add your content
class ProductCell: TTBaseUITableViewCell {
let nameLabel = TTBaseUILabel(withType: .TITLE, text: "", align: .left)
let priceLabel = TTBaseUILabel(withType: .SUB_TITLE, text: "", align: .right)
override func updateUI() {
panel.addSubview(nameLabel)
panel.addSubview(priceLabel)
// ... constraints
}
func configure(product: Product) {
nameLabel.setText(text: product.name)
priceLabel.setText(text: "$\(product.price)")
}
}
// Override padding
override var padding: (CGFloat, CGFloat, CGFloat, CGFloat) {
return (16, 8, 16, 8)
}
// Bottom border separator
override var isSetBoderBottom: Bool { return true }
// Skeleton loading
cell.setSkeletonAnimation().done()
cell.onStartSkeletonAnimation()
// ... later:
cell.onStopSkeletonAnimation()
π Base API Reference
| Member | Type | Description |
|---|---|---|
panel | TTBaseUIView | Content container with bg and corner radius |
bgColor | UIColor | Override: normal cell bg |
bgSelectColor | UIColor | Override: selected state bg |
padding | (CGFloatΓ4) | Override: panel insets from cell edges |
cornerRadius | CGFloat | Override: panel corner radius |
isSetBoderBottom | Bool | Override: add 1pt bottom border to panel |
onStartSkeletonAnimation() | Method | Show shimmer on all labels/images/buttons |
onStopSkeletonAnimation() | Method | Remove shimmer and restore content |
setBgPanelView(color:) | Method | Change panel background at runtime |
getTableView() | Method | Get parent UITableView reference |
Pro Tip: Use
setSkeletonAnimation() + onStartSkeletonAnimation() while waiting for network data, then call onStopSkeletonAnimation() in your data refresh block. The skeleton layer covers the entire panel automatically.