- iOS 13.0+
- Xcode 11.0+
This sample app shows how to change the appearance of collection view cells as they transition between unselected, highlighted, and selected states. As a user taps a cell, the app determines the state of the cell and changes the cell’s appearance to indicate the transition between states.
The collection view in this sample supports single-item selection, which is the default for collection views. You can also configure collection views to support multiple-item selection, or disable selection altogether.
Determine the State of a Cell
The collection view in this sample determines the state of a cell by detecting the taps inside its bounds. It then sets the
is properties of the corresponding cell to indicate the current state. The collection view provides this behavior because its
allows property is set to
When touching an unselected cell, the initial touch-down event causes the collection view to change the
is property of the cell to
true. The final touch-up event causes the highlighted state to return to
false. If the touch-up event occurs inside the cell, the collection view sets the cell’s
is property to
true; otherwise, the property value remains unchanged.
Change the Cell’s Visual Appearance
background property references the view to display as the background of the cell when it loads for the first time and when it isn’t highlighted or selected. When the cell’s state changes to highlighted or selected, the collection view modifies the properties of a cell to indicate the new state. It doesn’t, however, automatically change the visual appearance of the cell. That is, unless you set the cell’s
selected property to a view.
selected to a view causes the collection view to replace the default background with the selected background when highlighting or selecting a cell. Your app doesn’t need to do anything else. The collection view changes the cell’s visual appearance automatically as the cell’s state changes. For example, the sample app uses the
selected property to change the cell’s background color from red to blue when selecting the cell.
Provide Additional Visual Indication of State Changes
Providing a selected background view in a cell is an easy way to have the collection view change the cell’s appearance based on its state, but you can do more than just changing the background. You can, for example, display a checkmark icon in selected cells or distinguish between highlighted and selected states visually.
The collection view’s
delegate has methods that provide you many opportunities to tweak the selection and highlighting appearance of your collection view. For example, if you prefer to draw the selection state of the cell yourself, you can leave the
selected property set to
nil. Then apply any visual changes to the cell in the
collection delegate method. The sample app uses this method, along with the selected background, to show a star in the selected cell. The app removes the star in the
collection delegate method.
If you prefer to draw the highlight state, use the
collection delegate methods. The sample app uses these two methods to display a different shade of red as the highlighted background color. Because cells in this app use the blue view for their
selected, the delegate must apply its changes to the content view of the cells to ensure the changes are visible.