Collection View¶
CollectionView
is an alternative view for ObjectCell
and ContactCell
. It emphasizes an image and helps users identify each Object or Contact.
If an image is not a good identifier of the item, or a lot of items do not have an image in the data set, use ObjectCell
/ContactCell
instead.
Anatomy¶
A CollectionView
consists of a header, a list of CollectionViewItem
, and a footer where each CollectionViewItem
consists of an image, a headline, a sub headline and an attribute.
CollectionView
supports horizontal scrolling of the list of CollectionViewItem
if the complete list cannot fit inside the available screen width. To provide a visual hint that there are more elements to be presented, CollectionView
always starts with a partial element at the end of the scrollable list.
For example if your CollectionView
has 500 elements to represent, but the screen size of the device can only accommodate four elements at time, CollectionView
displays 3.5 elements, providing a hint that more elements are available to be presented.
Anatomy of CollectionViewItem
¶
CollectionViewItem
contains:
- Detail Image:
CollectionViewItem
contains a detailed image view, which acts as the major visual item of the cell. It can be an image of theContactCell
orObjectCell
. - Detail Image Character: In case there is no
ContactCell
image available, then theDetailImageCharacter
can be used to show the first character of the Name of the Contact. - Headline: Name of the
ContactCell
orObjectCell
- Sub Headline: Detail about
ContactCell
orObjectCell
- Attribute: Attribute of the
ContactCell
andObjectCell
.
Remember
Detail Image and Detail Image Character cannot be used together. Detail Image has priority over Detail Image Character.
Layouts of CollectionView
¶
CollectionView
supports two different layouts.
Horizontal Linear Layout¶
Horizontal layout presents CollectionViewItem
s horizontally with (n + 0.5) elements. One element is partially visible to indicate that there are more elements. Users can interact with CollectionView
by scrolling horizontally. There is a white gradient applied by default to the partially visible items.
GridLayout
¶
GridLayout
presents CollectionViewItem
s in a row-column format. There are no partial elements in this layout. The number of columns is calculated based on the available width to the CollectionView
. This layout only supports vertical scrolling.
Example¶
Because CollectionView
contains a list of CollectionViewItem
, CollectionView
can be used in different configurations.
When object cells have detailed image | CollectionView with GridLayout |
---|---|
![]() |
![]() |
When object cells have detailed image | When object cells don't have detailed image |
---|---|
![]() |
![]() |
Construction¶
The CollectionView
Cell can be created either by the constructor in code or by declaring a CollectionView
element in XML like this:
<com.sap.cloud.mobile.fiori.object.CollectionView
android:id="@+id/collectionView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:header="Collection View Demo"
app:footer="SEE ALL"
tools:minHeight="200dp">
</com.sap.cloud.mobile.fiori.object.CollectionView>
The above XML declaration creates a CollectionView
with:
app:header="Collection View Demo"
set the header on theCollectionView
.app:footer="SEE ALL"
set the footer on theCollectionView
.
By default, CollectionView
uses LinearLayout
. You can change the layout using collectionView.setCollectionLayoutType(CollectionView.LayoutType)
You can then add CollectionView
Items to a CollectionView
by attaching a CollectionViewAdapter
. CollectionViewAdapter
is a subtype of RecyclerView.Adapter
which provides CollectionViewItems
to CollectionView
.
collectionView.setCollectionViewAdapter(new CollectionView.CollectionViewAdapter() {
@Override
public void onBindViewHolder(@NonNull CollectionViewItemHolder collectionViewItemHolder, int i) {
// Bind the CollectionViewHolder with item.
}
@Override
public int getItemCount() {
return 0; // How many elements?
}
});
Each CollectionViewItemHolder
contains a CollectionViewItem
accessible as collectionViewItemHolder.collectionViewItem
.
Additional Information¶
Gradient On Partial Child¶
To provide an additional visual hint on the partially visible children, CollectionView
allows you to apply gradients on ends of lists of the CollectionViewItems
. CollectionView
applies the gradient on the end that has a partially visible element.
collectionView.setPartialChildGradient(getResources().getColor(R.color.white, getTheme()));
Attach Listener to the Footer of CollectionView
¶
The Footer on the CollectionView
is a Flat FioriButton
. In the following example, you can attach a click listener to open another activity.
collectionView.setFooterClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// your logic
}
});