Richard Witherspoon
Richard Witherspoon

Reputation: 5039

UICollectionViewListCell Accessory TopTrailing Placement

iOS 14 introduced a bunch of advancements for UICollectionView including the new UICollectionViewListCell. Using the defaultContentConfiguration, you can add accessory views to the cell. I'm looking to recreate an iMessage conversation row (mail is also close) where the date label is in the top trailing corner. Is there anyway to do this using the default configuration? Having to create a custom cell seems like overkill just for this.

Here is what I currently have.

let cellRegistration = UICollectionView.CellRegistration<UICollectionViewListCell, Int> { cell, indexPath, item in
    var content = cell.defaultContentConfiguration()
    content.text = "Title"
    content.secondaryText  = "This is the body of the message and it's really long. I want to see where it finally truncates because thats what it should do eventually you know?"
    content.secondaryTextProperties.numberOfLines = 2
    content.image = UIImage(systemName: "star")
    
    
    let label = UILabel()
    label.text = "4/26/7"
    label.textColor = .secondaryLabel
    label.font = .preferredFont(forTextStyle: .caption1)
    
    let customAccessory = UICellAccessory.CustomViewConfiguration(
        customView: label,
        placement: .trailing(displayed: .always))
    
    cell.accessories = [.customView(configuration: customAccessory)]
    cell.contentConfiguration = content
    cell.tintColor = .tertiaryLabel
}

enter image description here

Here is my desired result

enter image description here

Here is mail for another example

enter image description here

Upvotes: 0

Views: 873

Answers (1)

Teng L
Teng L

Reputation: 307

The default UICollectionViewListCell has limited customization possibilities.

Your best shot is with a custom UICollectionViewCell subclass. You will instead have the cell registration register your custom class, and dequeue cells the same way you would dequeue a built-in UICollectionViewListCell class object.

Upvotes: 1

Related Questions