-
Notifications
You must be signed in to change notification settings - Fork 55
RC Stick Mode List Item Widget
RC Stick Mode List Item Widget is a RADIO_BUTTON type of widget which displays the RC Stick Modes also known as Aircraft Mapping Styles. The currently enabled mode will be highlighted. The widget provides functionality to change the mode by tapping on any option.
Following are examples of the widget states:
Disconnected
Mode 1
Mode 3
<dji.ux.beta.core.panel.listitem.rcstickmode.RCStickModeListItemWidget
android:id="@+id/rc_stick_mode_list_item"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
The UI elements can be customized to match the style of the user's application. The customizations can be done using attributes in XML or programmatically using the APIs. The widget supports all the customizations that its parent RADIO_BUTTON widget supports.
<dji.ux.beta.core.panel.listitem.rcstickmode.RCStickModeListItemWidget
android:id="@+id/rc_stick_mode_list_item"
app:uxsdk_center_option_background_selector="@drawable/uxsdk_selector_radio_button_middle_custom"
app:uxsdk_first_option_background_selector="@drawable/uxsdk_selector_radio_button_first_custom"
app:uxsdk_last_option_background_selector="@drawable/uxsdk_selector_radio_button_last_custom"
app:uxsdk_option_color_state_list="@color/text_color_list"
app:uxsdk_list_item_title_text_color="@color/black"
android:background="@color/uxsdk_gray_58"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
Single Background Selector
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="false">
<shape android:shape="rectangle">
<stroke android:width="0.5dp" android:color="@color/uxsdk_white_60_percent" />
</shape>
</item>
<item android:state_checked="true">
<shape android:shape="rectangle">
<solid android:color="@color/uxsdk_red" />
<stroke android:width="1dp" android:color="@color/uxsdk_red" />
</shape>
</item>
<item android:state_checked="false">
<shape android:shape="rectangle">
<solid android:color="@color/white" />
<stroke android:width="1dp" android:color="@color/black" />
</shape>
</item>
</selector>
Multiple Background Selector
First
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="false">
<shape android:shape="rectangle">
<corners android:bottomLeftRadius="5dp" android:topLeftRadius="5dp" />
<stroke android:width="0.5dp" android:color="@color/uxsdk_white_60_percent" />
</shape>
</item>
<item android:color="@color/uxsdk_white" android:state_checked="true">
<shape android:shape="rectangle">
<solid android:color="@color/blue" />
<corners android:topLeftRadius="5dp" android:bottomLeftRadius="5dp"/>
<stroke android:width="1dp" android:color="@color/blue" />
</shape>
</item>
<item android:color="@color/uxsdk_white" android:state_checked="false">
<shape android:shape="rectangle">
<solid android:color="@color/white" />
<corners android:topLeftRadius="5dp" android:bottomLeftRadius="5dp"/>
<stroke android:width="1dp" android:color="@color/black" />
</shape>
</item>
</selector>
Middle
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="false" >
<shape android:shape="rectangle">
<stroke android:width="0.5dp" android:color="@color/uxsdk_white_60_percent" />
</shape>
</item>
<item android:color="@color/uxsdk_white" android:state_checked="true">
<shape android:shape="rectangle">
<solid android:color="@color/blue" />
<stroke android:width="1dp" android:color="@color/blue" />
</shape>
</item>
<item android:color="@color/uxsdk_white" android:state_checked="false">
<shape android:shape="rectangle">
<solid android:color="@color/white" />
<stroke android:width="1dp" android:color="@color/black" />
</shape>
</item>
</selector>
Last
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="false">
<shape android:shape="rectangle">
<corners android:bottomRightRadius="5dp" android:topRightRadius="5dp" />
<stroke android:width="0.5dp" android:color="@color/uxsdk_white_60_percent" />
</shape>
</item>
<item android:color="@color/uxsdk_white" android:state_checked="true">
<shape android:shape="rectangle">
<solid android:color="@color/blue" />
<corners android:bottomRightRadius="5dp" android:topRightRadius="5dp" />
<stroke android:width="1dp" android:color="@color/blue" />
</shape>
</item>
<item android:color="@color/uxsdk_white" android:state_checked="false">
<shape android:shape="rectangle">
<solid android:color="@color/white" />
<corners android:bottomRightRadius="5dp" android:topRightRadius="5dp" />
<stroke android:width="1dp" android:color="@color/black" />
</shape>
</item>
</selector>
Text color selectors
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="@color/uxsdk_white_60_percent" android:state_enabled="false" />
<item android:color="@color/uxsdk_white" android:state_checked="true" />
<item android:color="@color/uxsdk_black" android:state_checked="false" />
</selector>
RCStickModeListItemWidget rcStickModeListItemWidget = findViewById(R.id.rc_stick_mode_list_item)
rcStickModeListItemWidget.setBackgroundColor(getResources().getColor(R.color.uxsdk_gray_58));
rcStickModeListItemWidget.setCenterOptionBackgroundSelector(getResources().getDrawable(R.drawable.uxsdk_selector_radio_button_middle));
rcStickModeListItemWidget.setFirstOptionBackgroundSelector(getResources().getDrawable(R.drawable.uxsdk_selector_radio_button_first));
rcStickModeListItemWidget.setLastOptionBackgroundSelector(getResources().getDrawable(R.drawable.uxsdk_selector_radio_button_last));
rcStickModeListItemWidget.setOptionColorStateList(getResources().getColorStateList(R.color.text_color_list));
rcStickModeListItemWidget.setListItemTitleTextColor(getResources().getColor(R.color.black));
val rcStickModeListItemWidget = RCStickModeListItemWidget(context)
rcStickModeListItemWidget.setBackgroundColor(resources.getColor(R.color.uxsdk_gray_58))
rcStickModeListItemWidget.centerOptionBackgroundSelector = resources.getDrawable(R.drawable.uxsdk_selector_radio_button_middle)
rcStickModeListItemWidget.firstOptionBackgroundSelector = resources.getDrawable(R.drawable.uxsdk_selector_radio_button_first)
rcStickModeListItemWidget.lastOptionBackgroundSelector = resources.getDrawable(R.drawable.uxsdk_selector_radio_button_last)
rcStickModeListItemWidget.optionColorStateList = resources.getColorStateList(R.color.text_color_list)
rcStickModeListItemWidget.listItemTitleTextColor = resources.getColor(R.color.black)
The widget provides hooks for the users to add functionality based on the state changes in the widget. The RCStickModeListItemStateWidget provides the following hooks:
-
ModelState
- Provides hooks in events received by the widget from the widget model.-
data class ProductConnected(val isConnected: Boolean) : ModelState()
- Event when the product is connected or disconnected. -
object SetRCStickModeSucceeded : RCStickModeListItemState() : ModelState()
- Event when the RC stick mode is set successfully. -
data class SetRCStickModeFailed(val error: UXSDKError) : ModelState()
- Event when setting the RC stick mode fails. -
data class RCStickModeUpdated(val rcStickModeState: RCStickModeState) : ModelState()
- Event when the RC stick mode is updated.
-
The user can subscribe to this using public override fun getWidgetStateUpdate(): Flowable<ModelState>
.
-
UIState
- Provides hooks in events related to user interaction with the widget.-
data class OptionSelected(val optionIndex: Int, val optionLabel: String) : UIState()
- Event when an option is clicked.
-
The user can subscribe to this using fun getUIStateUpdates(): Flowable<UIState>
.
DJI UX SDK Version 5 Beta 5
UX SDK 5.0 Overview
Core Module
Camera Core Module
Visual Cameras Module
- Camera Config