Hierarchy View¶
HierarchyView
is designed to present a hierarchy of parent and child relationships. It allows users to track an object and its relationship within the hierarchy,
which may range in depth from 1 level to several levels.
Anatomy¶
HierarchyView
has a different anatomy for tablet and phone versions.
Tablet Version Anatomy¶
Following is an example of HierarchyView
on a tablet:
A. Object Cell: Follows the Same Design as the Standard Object Cell Except that We Recommend Using Only¶
- Title Area
- Description (Optional)
- Attribute (Optional)
B. HierarchyView
Accessory¶
The whole HierarchyView
Accessory is tappable to expand to another level of the hierarchy to show the children of that Object Cell.
C. HierarchyView
Icon¶
This is a new icon to indicate whether this object has any parent/child relationships. When it’s inactive, it is an outlined icon, but when it’s selected, it turns into a filled icon to show the different states.
D. HierarchyView
Accessory - Children Count (Optional)¶
This count shows how many direct children are under that particular object. It does not count grandchildren, great grandchildren, etc. If the object has no direct children, this count can be shown as 0 or blank. We recommend that any number greater than 100 be represented as 99+
in order to avoid taking up too much space..
E. Divider¶
Use the full-width divider to separate the cells.
F. Parent Overflow¶
Shows a preview of the next parent level up the hierarchy. Only visible if there are more than three columns expanded.
G. Children Overflow¶
Shows a preview of the children level down the hierarchy. Only visible if there are more than three columns expanded.
Phone Version Anatomy¶
Following is an example of HierarchyView
on a phone:
A. Navigation Bar¶
Due to the limitations of a small device, it can only show one level at a time. This Navigation Bar allows the user to navigate to a parent or child level if available. If there is no parent or child level to navigate to, the arrow that corresponds with the direction of the navigation is disabled.
B. Object Cell¶
Follows the same design as the standard Object Cell except that we recommend using only the following content types:
- Title Area
- Description (optional)
- Attribute (optional)
C. HierarchyView
Accessory¶
The whole HierarchyView
Accessory is tappable to expand to another level of the hierarchy to show the children of that Object Cell.
D. HierarchyView
Icon¶
This is a new icon to indicate whether this object has any parent/child relationships. When it’s inactive, it is an outlined icon, but when it’s selected, it turns into a filled icon to show the different states.
E. HierarchyView
Accessory - Children Count (Optional)¶
This count shows how many direct children are under that particular object. It does not count grandchildren, great grandchildren, etc. If the object has no direct children, this count can be shown as 0 or blank. We recommend that any number greater than 100 be represented as 99+
in order to avoid taking up too much space.
F. Divider¶
Use the divider to separate the cells.
Construction¶
HierarchyView
can be created either by the constructor in code or by declaring a HierarchyView
element in XML like this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white"
android:orientation="vertical">
<com.sap.cloud.mobile.fiori.hierarchy.HierarchyView
android:id="@+id/hierarchyView"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:autoLoadSiblings="false"
app:layoutType="unspecified" />
</LinearLayout>
The above XML declaration creates a HierarchyView
with the following attributes:
app:layoutType="unspecified"
–HierarchyView
supports different layouts for tablet and phone. "unspecified"layoutType
attribute allowsHierarchyView
to adapt to available screen sizes and change the layout from phone to tab or vice versa if available width changes. By defaultlayoutType
is set to be "unspecified";app:autoLoadSiblings="false"
– First column of theHierarchyView
presents the Root object of the hierarchy.autoLoadSiblings
attribute allows user to specify if the siblings of the root object and its ancestors should be loaded or not. By defaultautoLoadSiblings
is set to befalse
;
HierarchyObjectCell
¶
To present a cell, HierarchyView
utilizes HierarchyObjectCell
. HierarchyObjectCell
is a subtype
of ObjectCell
and also supports the SupportsHierarchyAccessory
interface.
ObjectCell
¶
ObjectCell
details are here.
HierarchyAccessoryView
¶
Each HierarchyObjectCell
has an accessory panel, which consists of the following:
Accessory Icon¶
Accessory icon is used to present the state of the HierarchyObjectCell
. An outlined icon presents the deselected/collapsed HierarchyObjectCell
, while a filled icon presents a selected/expanded HierarchyObjectCell
.
Selected/expanded HierarchyObjectCell
is a cell for which the children objects are visible.
HierarchyView
Accessory - Children Count (Optional)¶
An optional TextView
for presenting the number of children objects of a given HierarchyObjectCell
.
...
HierarchyObjectCell objectView = new HierarchyObjectCell(context);
HierarchyAccessoryView hierarchyAccessoryView = objectView.getAccessoryView();
hierarchyAccessoryView.setAccessoryText(text);
Layout Variations¶
HierarchyView
allows users to force a particular layout irrespective of available width. You can force a specific layout by either calling forceLayoutType(LayoutType)
or
by using XML attribute app:layoutType="layout"
.
LayoutType
is an enum
with the following constants:
PHONE¶
Always use the phone layout.
TABLET¶
Always use the tablet layout.
UNSPECIFIED¶
Change the layout as per the available width.
Binding Data to HierarchyView
¶
So far we have seen the construction and anatomy of HierarchyView
. In this section we focus on binding the data into a HierarchyView
. In order to bind data to HierarchyView
,
HierarchyView
requires an object of HierarchyViewItemAdapter
.
HierarchyViewItemAdapter
¶
HierarchyViewItemAdapter
is a data adapter designed along the lines of the RecyclerView
Adapter. It is responsible for binding data into a HierarchyView
. Please note that
HierarchyView
can call some of these methods multiple times in order to lay out the correct hierarchy.
/**
* Get the id of the object which should be the root of the HierarchyView. This does not need to be the root of the HierarchyTree.
*/
protected abstract T getRootId();
/**
* Given the id of the item, provide how many children it has.
*/
protected abstract int getChildCountForParent(@Nullable T id);
/**
* Given the id of child, return the id of the parent.
*/
protected abstract T getParentId(@NonNull T id);
/**
* Given the id of child, return the id of the parent.
*/
protected abstract T getParentId(@NonNull T id);
/**
* Get the id of the child at a given position in the parent/children hierarchy.
*/
protected abstract T getChildId(T parentId, int pos);
/**
* In the phone layout there is a navigation bar. The navigation bar presents the title for the parent of the objects being presented. Get the title for the given parent id.
*/
protected abstract CharSequence getTitle(T id);
/**
* Create the View Holder to hold the HierarchyItemView and caching resources.
*/
protected abstract K onCreateItemViewHolder();
/**
* Bind the item provided in ItemViewHolder w.th the given id
*/
protected abstract void onBindItemViewHolder(@NonNull K holder, T id);