SlidingDrawer hides content out of the screen and allows the user to drag a handle to bring the content on screen. SlidingDrawer can be used vertically or horizontally. A special widget composed of two children views: the handle, that the users drags, and the content, attached to the handle and dragged with it. SlidingDrawer should be used as an overlay inside layouts. This means SlidingDrawer should only be used inside of a FrameLayout or a RelativeLayout for instance. The size of the SlidingDrawer defines how much space the content will occupy once slid out so SlidingDrawer should usually use match_parent for both its dimensions
This library - hollowsoft.demo.slidingdrawer, is very useful in the development of applications which are in our daily use. Some of such examples mentioned below:
|
|
|
|
In this section, we can see the list of features which the library provides which makes the use of this library very easy and friendly. Primarily, this library supports customization of component attributes using the below mechanism.
- Java APIs
SlidingDrawer uses a simple fluent java API's that allows users to make most requests in a single line:
Features supported by this component includes the below:
-
Sliding Drawer Via Java & XML:
Sliding Drawer Should be created with the handle and content Components along with given Height/Width and background inputs -
Customizing the Handle:
Sliding Drawer should be created and the Handle should be customized with text view and Background color on it. -
Customizing the Content:
Sliding Drawer should be created and the Content should be customized with you can add multiple views on it. -
Supports Animate open & Animate Close:
Sliding Drawer should be created and can be able to open and close the drawer by clicking on the handle -
Supports Call back functions:
Sliding Drawer should be created and should be able to open and close the drawer with Listeners -
Sliding Horizontal and Vertical:
Sliding Drawer should be created and should be able to slide the drawer Vertically and Horizontally.
For using the library in your HarmonyOS mobile app, you need to first install it by following below methods.
- Method 1:
Generate the .har package through the library and add the .har package to the libs folder.Add the following code to the entry level build.gradle:implementation fileTree (dir: 'libs', include: ['* .jar', '* .har'])
- Method 2 :
Copy the dependency from the gitee and add it to the entry level build.gradle:
dependencies {
implementation fileTree(dir: 'libs', include: ['*.har'])
implementation 'io.openharmony.tpc.thirdlib:SlidingDrawer:1.0.2'
}
This section will help us to understand the usage of the library as you use it in your Harmony-application developemnt project.
We are going to load list into SlidingDrawer component using This Library. So, add SlidingDrawer component into resource_file.xml file.
<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
xmlns:app="http://schemas.huawei.com/hap/res-auto"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:orientation="vertical"
ohos:background_element="#000000">
<hollowsoft.slidingdrawer.SlidingDrawer
ohos:id="$+id:slide" xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:height="match_parent"
ohos:width="match_content"
ohos:orientation="horizontal">
<Component ohos:width="100vp"
ohos:height="100vp"
ohos:text="Click"
ohos:id="$+id:handle"
ohos:background_element="#EB00FF"/>
</hollowsoft.slidingdrawer.SlidingDrawer>
</DirectionalLayout> @Override
public void onStart(Intent intent) {
super.onStart(intent);
SlidingDrawer drawer1 = (SlidingDrawer) findComponentById(ResourceTable.Id_slide);
drawer1.setClickedListener(new Component.ClickedListener() {
@Override
public void onClick(Component component) {
drawer1.animateOpen();
}
});
PositionLayout drawerMain = (PositionLayout) findComponentById(ResourceTable.Id_main);
SlidingDrawer drawer = new SlidingDrawer(this);
drawer.setOrientation(Component.VERTICAL);
Component viewHandle = new Component(this);
PositionLayout.LayoutConfig drawerConfig = new DirectionalLayout.LayoutConfig(100, 200);
viewHandle.setLayoutConfig(drawerConfig);
drawer.setHandle(viewHandle);
}The public methods below will help us to operate on the component at runtime.
SlidingDrawer Methods
|
|
In this section, we can have a look at some the examples where the APIs of this library is put to use and the results which we can acheive.
Example1: Sliding with Customizing the Content
Layout.xml:
<hollowsoft.slidingdrawer.SlidingDrawer
ohos:id="$+id:slide"
ohos:height="match_parent"
ohos:width="match_content"
ohos:orientation="horizontal"
Java Slice:
SlidingDrawer drawer = new SlidingDrawer(this);
DirectionalLayout viewHandle = new DirectionalLayout(this);
PositionLayout.LayoutConfig l =
new DirectionalLayout.LayoutConfig(200, 200);
viewHandle.setLayoutConfig(l);
drawer.setHandle(viewHandle);
ShapeElement dynamic = new ShapeElement();
dynamic.setRgbColor(RgbColor.fromArgbInt(0xFFD52828));
viewHandle.setBackground(dynamic);
|
|
Example2: SlidingDrawer With Support Callback
Layout.xml:
<hollowsoft.slidingdrawer.SlidingDrawer
ohos:id="$+id:slide"
ohos:height="match_parent"
ohos:width="match_content"
ohos:orientation="horizontal">
Java Slice:
SlidingDrawer drawer = new SlidingDrawer(this);
DirectionalLayout viewHandle =
new DirectionalLayout(this);
PositionLayout.LayoutConfig l =
new DirectionalLayout.LayoutConfig(200, 200);
viewHandle.setLayoutConfig(l);
drawer.setHandle(viewHandle);
ShapeElement dynamic = new ShapeElement();
dynamic.setRgbColor(RgbColor.fromArgbInt(0xff00ff5e));
viewHandle.setBackground(dynamic);;
drawer.setOnDrawerOpenListener(this);
drawer.setOnDrawerCloseListener(this);
drawer.setOnDrawerScrollListener(this);
|
|
Example3: SlidingDrawer with Customizing the Handle**
Layout.xml:
<hollowsoft.slidingdrawer.SlidingDrawer
ohos:id="$+id:slide"
ohos:height="match_parent"
ohos:width="match_content"
ohos:orientation="horizontal"
Java Slice:
SlidingDrawer drawer = new SlidingDrawer(this);
DirectionalLayout viewHandle =
new DirectionalLayout(this);
PositionLayout.LayoutConfig l
= new DirectionalLayout.LayoutConfig(200, 200);
viewHandle.setLayoutConfig(l);
drawer.setHandle(viewHandle);
ShapeElement dynamic = new ShapeElement();
dynamic.setRgbColor(RgbColor.fromArgbInt(0xFFD52828));
viewHandle.setBackground(dynamic);
////Customizing handle with image
Image image = new Image(this);
image.setPixelMap(ResourceTable.Media_arrow_icon);
viewHandle.setOrientation(Component.VERTICAL);
viewHandle.addComponent(image);
|
|
SlidingDrawer is a very easy to use and very powerful library.The performance of the library is very good even when it works on one of the latest operating systems in the world, which is HarmonyOS!
-
For more exciting libraries to develop your app, peep into third-party-components at
OpenHarmony-TPC -
To know more about the developement work happening on harmony aaplication layer, and even be part of the exciting stuff, watch this space of Application Library Engineering Group