Changing the appearance of selected and highlighted cells

At a glance

Project structure

CollectionViewManagingVisualStates/
├── AppDelegate.swift
├── SceneDelegate.swift
├── ViewController.swift
├── CustomCollectionViewCell.swift
└── Base.lproj/
    ├── Main.storyboard
    └── LaunchScreen.storyboard

Structure observations

• ViewController contains collection callbacks but no stored feature state.
• CustomCollectionViewCell contains the visual implementation reused by all 25 cells.
• The storyboard supplies collection layout, reuse registration, outlets, and delegate/data-source connections.

Overall architecture

flowchart LR
    Storyboard["Main.storyboard"] --> Controller["ViewController"]
    Controller -->|"data source: dequeue"| Collection["UICollectionView"]
    Collection --> Cell["CustomCollectionViewCell"]
    Touch["Touch input"] --> Collection
    Collection -->|"highlight callbacks"| Controller
    Controller -->|"content background"| Cell
    Collection -->|"selection callbacks"| Controller
    Controller -->|"show / hide icon"| Cell
    Collection -->|"isSelected"| SelectedBG["selectedBackgroundView"]

Reference code

CollectionViewManagingVisualStates/ViewController.swift:34 — the collection delegate treats highlight and selection as different event streams and applies a different visual response to each.

func collectionView(
    _ collectionView: UICollectionView,
    didHighlightItemAt indexPath: IndexPath
) {
    if let cell = collectionView.cellForItem(at: indexPath) {
        cell.contentView.backgroundColor =
            #colorLiteral(red: 1, green: 0.4932718873,
                          blue: 0.4739984274, alpha: 1)
    }
}

func collectionView(
    _ collectionView: UICollectionView,
    didSelectItemAt indexPath: IndexPath
) {
    if let cell = collectionView.cellForItem(at: indexPath)
            as? CustomCollectionViewCell {
        cell.showIcon()
    }
}

Interpretation

UIKit owns the state machine and sends callbacks. The controller reacts to touch phases, while the cell owns how the persistent selected state looks. There is no app-level selection model because the sample’s subject is cell presentation.

Ownership and state

classDiagram
    SceneDelegate o-- UIWindow : storyboard-provided
    ViewController ..|> UICollectionViewDataSource
    ViewController ..|> UICollectionViewDelegate
    UICollectionView *-- CustomCollectionViewCell : reuse lifecycle
    CustomCollectionViewCell o-- UIImageView : IBOutlet
    CustomCollectionViewCell *-- UIView : backgroundView
    CustomCollectionViewCell *-- UIView : selectedBackgroundView
    UICollectionView --> CustomCollectionViewCell : selected/highlighted state

Ownership evidence

CollectionViewManagingVisualStates/CustomCollectionViewCell.swift:13 — each cell configures its two framework-defined background slots and retains the icon outlet used for selected-state detail.

static public let reuseID = "CustomCollectionViewCell"
@IBOutlet var iconView: UIImageView!

override func awakeFromNib() {
    super.awakeFromNib()

    let redView = UIView(frame: bounds)
    redView.backgroundColor =
        #colorLiteral(red: 1, green: 0, blue: 0, alpha: 1)
    backgroundView = redView

    let blueView = UIView(frame: bounds)
    blueView.backgroundColor =
        #colorLiteral(red: 0, green: 0, blue: 1, alpha: 1)
    selectedBackgroundView = blueView
}

Class and protocol design

There is no app-defined protocol or protocol-oriented domain layer. The only protocols are UIKit callback contracts, which is appropriate for this focused visual-state sample.

Access control

Reference code

CollectionViewManagingVisualStates/CustomCollectionViewCell.swift:28 — controller-facing methods express the visual intent while the cell performs the outlet mutation.

func showIcon() {
    iconView.alpha = 1.0
}

func hideIcon() {
    iconView.alpha = 0.0
}

Logic ownership and placement

Design patterns

Naming conventions

• CustomCollectionViewCell names the customized UIKit role; the generic ViewController reflects the sample’s intentionally tiny scope.
• reuseID names framework identity, while iconView names the outlet by visual role.
• showIcon and hideIcon use direct command verbs.
• UIKit callback names distinguish didHighlight/didUnhighlight from didSelect/didDeselect.

Architecture takeaways

• Let UICollectionView own selection and highlight state when no domain-level selection model is required.
• Put reusable appearance in the cell and event interpretation in the collection delegate.
• Treat highlight and selection as distinct lifetimes with distinct visuals.
• Expose semantic cell commands rather than mutating its outlet from the controller.
• This sample’s broad module-local visibility is concise, but production cells can narrow implementation properties.

Source map

• Official Apple documentation