Bar Panel Widget

Table of Contents

• Bar Panel Widgets
• Configuration Options and Instantiation
  • Bar Panel Widget Creation
• Manipulating List Items
  • Bar Panel Widget APIs
  • PanelItem
• Customizations

Bar Panel Widgets

The BarPanelWidget is one of the panel cluster widgets. A Bar Panel Widget is a collection of simple widgets that can be grouped together in two orientations:

• BarPanelWidgetOrientation.VERTICAL
• BarPanelWidgetOrientation.HORIZONTAL

This type of PanelWidget is primarily used for the application's top bar or other similarly sized widgets. The Bar Panel Widget is split into two lists: left and right (in vertical orientation left is equivalent to top and right to bottom.) Bar Panel Widgets don't have a titlebar.

An example of a Bar Panel Widget is the TopBarPanelWidget

Configuration Options and Instantiation

When creating a BarPanelWidget, the configuration object specifies the widget type (PanelWidgetType). Note, a Bar Panel Widget should not have a titlebar.

Bar Panel Widget Creation

Widgets can be created in two ways.

XML

    <dji.ux.beta.core.panelwidget.topbar.TopBarPanelWidget
        android:id="@+id/panel_top_bar"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@color/black"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHeight_percent="0.08"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:uxsdk_itemsMarginRight="@dimen/uxsdk_spacing_normal"
        app:uxsdk_itemsSpacing="@dimen/uxsdk_spacing_normal" />

Programatically

val systemStatusList = TopBarPanelWidget(context)

Manipulating List Items

Bar Panel Widgets are manipulated by adding and removing widgets. You can retrieve the widget count, append widgets, insert widgets at a specific index, or remove widgets dynamically. To initialize the BarPanelWidget, pass a list of PanelItem by calling BarPanelWidget.addLeftWidgets and/or BarPanelWidget.addRightWidgets.

Bar Panel Widget APIs

The Bar Panel Widget supports APIs from its parent PanelWidget. The following APIs are unique to the Bar Panel Widget:

Counting Widgets

List of APIs

• fun size(): Int - Total number of PanelItem inside this BarPanelWidget. Includes left and right lists.
• fun leftWidgetsSize(): Int - Total number of PanelItem inside the left list of this BarPanelWidget.
• fun rightWidgetsSize(): Int - Total number of PanelItem inside the right list of this BarPanelWidget.

Adding Widgets

List of APIs

• fun addLeftWidgets(panelItems: Array<PanelItem>) - Append an array of PanelItem to the left list of this BarPanelWidget. The items should be unique and not be present in this BarPanelWidget already.
• fun addLeftWidget(@IntRange(from = 0) index: Int, panelItem: PanelItem) - Insert a PanelItem at the given index to the left list of this BarPanelWidget. index 0, is the first position of the left list.
• fun addRightWidgets(panelItems: Array<PanelItem>) - Appends an array of PanelItem to the right list of this BarPanelWidget. The items should be unique and not be present in this BarPanelWidget already.
• fun addRightWidget(@IntRange(from = 0) index: Int, panelItem: PanelItem) - Insert a PanelItem at the given index to the right list of this BarPanelWidget. index 0, is the first position of the right list.

Removing Widgets

List of APIs

• fun removeLeftWidget(@IntRange(from = 0) index: Int): PanelItem? - Remove a PanelItem at the given index from the left list of this BarPanelWidget. Index 0, is the first position of the left list.
• fun removeAllLeftWidgets() - Remove all PanelItem from the left list of this BarPanelWidget.
• fun removeRightWidget(@IntRange(from = 0) index: Int): PanelItem? - Remove a PanelItem at the given index from the right list of this BarPanelWidget. Index 0, is the first position of the right list.
• fun removeAllRightWidgets() - Remove all PanelItem from the right list of this BarPanelWidget.

Fetch Widgets

List of APIs

• fun getLeftWidget(@IntRange(from = 0) index: Int): PanelItem? - Get PanelItem from the left list of this BarPanelWidget. Index 0, is the first position of the left list.
• fun getRightWidget(@IntRange(from = 0) index: Int): PanelItem? - Get PanelItem from the right list of this BarPanelWidget. Index 0, is the first position of the right list.

PanelItem

Encapsulates a View with properties used to define how it is laid out. A BarPanelWidget is populated with this type of object.

Property	Description
var view: View	The child view to add into a panel.
val itemMarginLeft: Int?	Left margin pixel size, null by default.
val itemMarginTop: Int?	Top margin pixel size, null by default.
val itemMarginRight: Int?	Right margin pixel size, null by default.
val itemMarginBottom: Int?	Bottom margin pixel size, null by default.
desiredWidgetSizeDescription: WidgetSizeDescription?	Widget size description, null by default.
desiredRatioString: String?	Desired ratio for the view of the width to height, null by default.

Customizations

The UI elements can be customized to match the style of the user's application. The customization can be done using attributes in XML or programmatically using the APIs.

Attributes

List of the customizable XML attributes

• uxsdk_itemsMarginLeft - Margin for the left side of the BarPanelWidget.
• uxsdk_itemsMarginTop - Margin for the top side of the BarPanelWidget.
• uxsdk_itemsMarginRight - Margin for the right side of the BarPanelWidget.
• uxsdk_itemsMarginBottom - Margin for the bottom side of the BarPanelWidget.
• uxsdk_itemsSpacing - The spacing between the PanelItem inserted.
• uxsdk_guidelinePercent - The percentage between the left and the right. 0.5 distributes both sides equally.
• uxsdk_leftBias - The bias for the left section of the BarPanelWidget. 0 aligns items to the left/top. Left items are aligned to the left (0) by default.
• uxsdk_rightBias - The bias for the right section of the BarPanelWidget. 0 aligns items to the left/top. Right items are aligned to the right (1) by default.
• uxsdk_leftChainStyle - The chain style for the left section of the BarPanelWidget. Choose from: spread, spread_inside, or packed. packed is used by default.
• uxsdk_rightChainStyle - The chain style for the right section of the BarPanelWidget. Choose from: spread, spread_inside, or packed. packed is used by default.

APIs

List of the customization APIs

• var itemsMarginLeft: Int - Margin for the left side of the BarPanelWidget.
• var itemsMarginTop: Int - Margin for the top side of the BarPanelWidget.
• var itemsMarginRight: Int - Margin for the right side of the BarPanelWidget.
• var itemsMarginBottom: Int - Margin for the bottom side of the BarPanelWidget.
• var itemSpacing: Int - The spacing between the PanelItem inserted.
• var leftBias: Float - The bias for the left section of the BarPanelWidget. 0 aligns items to the left/top. Left items are aligned to the left (0) by default.
• var rightBias: Float - The bias for the right section of the BarPanelWidget. 0 aligns items to the left/top. Right items are aligned to the right (1) by default.
• var leftChainStyle: Int - The chain style for the left section of the BarPanelWidget. ConstraintSet.CHAIN_PACKED is used by default.
• var rightChainStyle: Int - The chain style for the right section of the BarPanelWidget. ConstraintSet.CHAIN_PACKED is used by default.
• var guidelinePercent: Float - The percentage between the left and the right. 0.5 distributes both sides equally.