Updated: January 26, 2022

Collection View Cell

FUIObjectCollectionViewCell

Intro

The collection view cell is an object within the collection view. It displays content with images to provide a more visual viewing experience.

For guidance on how a collection view cell can be used within the collection view, see Collection View.

Different collection view cell examples
Different collection view cell examples

Anatomy

A collection view cell consists of a mix of image views (A.) and text labels and is used to preview information about an object.

Because collection view cells are meant to be highly visual, you must include an image view.

Title (B.), Subtitle (C.), and Attribute (D.) labels are optional and may be used to display additional information.

Anatomy of a collection view cell
Anatomy of a collection view cell

Behavior and Interaction

A single tap on a collection view cell will navigate to a detailed view of the object. For some cells, such as attachment, the navigation drills down to a preview of the attachment where it can be viewed larger and some quick actions like share or delete can be performed.

Interaction with a collection view cell
Interaction with a collection view cell


Variations

Standard Image

The collection view cell has two fixed sizes when displaying the labels – 110px and 120px.

Collection view cells with titles and attributes
Collection view cells with titles and attributes

Standard Image Without Labels

When no labels are displayed, the size of the collection cell depends on the image view’s size, which must be between 60px x 60px and 110px x 110px. The image view can be circular or rectangular, but when using the rectangular version, keep in mind that its width cannot be smaller than its height.

Collection view cells without labels
Collection view cells without labels

Profile Image

When showing a collection of people, use the circular profile image. If no profile image is available, initials can be displayed by default.

Collection view cells with profile images
Collection view cells with profile images

Doctype Icons

Different types of documents can be displayed in the collection view. These doctype icons live within a rectangular image.

Collection view cells with doctype icons
Collection view cells with doctype icons

Icon Actions

For actions that can be easily represented in an icon form, the collection view cell allows for one or two actions. The number of actions used must be consistent across all collection view items.

Collection view cells with icon actions
Collection view cells with icon actions

Button Actions

For more complex actions, use a button action. When using a button action, only one action is allowed.

Collection view cells with action buttons
Collection view cells with action buttons

Specifications

A. Collection view in 110px

Image size is flexible. Width of image must be larger than height.

Width of labels and button is 110px

B. Collection view in 120px

Image size is flexible. Width of image must be larger than height.

Width of labels and buttons is 120px.

Specification for collection view cells in 110pt (left) and 120pt (right)
Specification for collection view cells in 110pt (left) and 120pt (right)

Resources

Related Component: Collection View

Development: UICollectionView, FUIObjectCollectionViewCell

SAP Fiori for Android: Collection View