本文介绍HarmonyOS鸿蒙开发中如何集成SlidingDrawer组件的方法，同时附上源码。

简介

SlidingDrawer将内容隐藏在屏幕之外，并允许用户拖动手柄以将内容带到屏幕上，SlidingDrawer可以垂直或水平使用。SlidingDrawer应该用作布局内的叠加层，这意味着SlidingDrawer只能在FrameLayout或RelativeLayout中使用。SlidingDrawer的大小定义了内容滑出后将占用多少空间，因此SlidingDrawer通常应使用match_parent为其两个维度。

特性包括：通过Java和XML实现滑动抽屉、自定义手柄、自定义内容、支持动画打开和动画关闭、支持回调函数、水平和垂直滑动。

参考资料地址：https://gitee.com/HarmonyOS-tpc/SlidingDrawer

一、api讲解

1、如何集成

修改entry的bulid.gradle，代码如下：

implementation 'io.openharmony.tpc.thirdlib:SlidingDrawer:1.0.2'

需要在xml布局添加如下代码片段：

</hollowsoft.slidingdrawer.SlidingDrawer>

java代码需要添加如下代码：

SlidingDrawer drawer = new SlidingDrawer(this);

drawer.setOrientation(Component.VERTICAL);//todo 设置方向

drawer.setHandle(new Component(this));//todo 这个必须设置

2、抽屉布局打开

drawer.animateOpen();

3、抽屉布局关闭

drawer.animateClose();

二、代码运行

1、绘画xml布局

在xml布局中绘画一个导航布局和抽屉列表布局，具体参考xml布局注释，代码如下：

<?xml version="1.0" encoding="utf-8"?>

<DirectionalLayout ohos:id="$+id:main"

                xmlns:ohos="http://schemas.huawei.com/res/ohos"

                ohos:height="match_parent"

                ohos:width="match_parent"

                ohos:orientation="vertical">

<!--头部当行栏-->

    <DirectionalLayout

        ohos:background_element="blue"

        ohos:height="80vp"

        ohos:width="match_parent"

        ohos:orientation="horizontal">

<!--菜单栏-->

        <Text

            ohos:left_margin="10vp"

            ohos:id="$+id:hos"

               ohos:width="80vp"

               ohos:height="match_parent"

            ohos:text_color="#ed6262"

            ohos:text_size="20vp"

               ohos:text="菜单"/>

<!--标题栏-->

        <Text

            ohos:width="0vp"

            ohos:weight="1"

            ohos:height="match_parent"

            ohos:text_alignment="center"

            ohos:text_size="20vp"

            ohos:text_color="#ffffff"

            ohos:text="界面标题"/>

        <Text

            ohos:right_margin="10vp"

            ohos:width="80vp"

            ohos:height="match_parent"

            ohos:text_color="#ed6262"

            ohos:text_size="20vp"/>

    </DirectionalLayout>

<!--抽屉布局-->

    <hollowsoft.slidingdrawer.SlidingDrawer

        ohos:id="$+id:slide"

        ohos:background_element="#20000000"

        xmlns:ohos="http://schemas.huawei.com/res/ohos"

        ohos:height="500vp"

        ohos:width="match_parent"

        ohos:orientation="horizontal">

        <DirectionalLayout

            ohos:width="500vp"

            ohos:alignment="top"

            ohos:height="match_parent"

            ohos:orientation="vertical">

<!--菜单一-->

        <Text

            ohos:id="$+id:text_menu_one"

            ohos:height="80vp"

            ohos:background_element="#ffffff"

            ohos:width="match_parent"

            ohos:text_size="20vp"

            ohos:text="菜单一"/>

<!--菜单二-->

            <Text

                ohos:id="$+id:text_menu_two"

                ohos:top_margin="1vp"

                ohos:height="80vp"

                ohos:background_element="#ffffff"

                ohos:width="match_parent"

                ohos:text_size="20vp"

                ohos:text="菜单二"/>

<!--菜单三-->

            <Text

                ohos:id="$+id:text_menu_there"

                ohos:top_margin="1vp"

                ohos:height="80vp"

                ohos:background_element="#ffffff"

                ohos:width="match_parent"

                ohos:text_size="20vp"

                ohos:text="菜单三"/>

        </DirectionalLayout>

    </hollowsoft.slidingdrawer.SlidingDrawer>

</DirectionalLayout>

2、实现java代码

?给“菜单”实现点击事件，控制抽屉布局的打开，然后在实现菜单列表的点击事件，具体代码如下：

/**

 * Copyright (C) 2021 Huawei Device Co., Ltd.

 * Licensed under the Apache License, Version 2.0 (the "License");

 * you may not use this file except in compliance with the License.

 * You may obtain a copy of the License at

 * <p>

 * http://www.apache.org/licenses/LICENSE-2.0

 * <p>

 * Unless required by applicable law or agreed to in writing, software

 * distributed under the License is distributed on an "AS IS" BASIS,

 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

 * See the License for the specific language governing permissions and

 * limitations under the License.

 */

package com.newdemo.myapplication.slice;

import com.newdemo.myapplication.ResourceTable;

import hollowsoft.slidingdrawer.SlidingDrawer;

import ohos.aafwk.ability.AbilitySlice;

import ohos.aafwk.content.Intent;

import ohos.agp.components.*;

import ohos.agp.window.dialog.ToastDialog;

/**

 * MainAbilitySlice class

 */

public class MainAbilitySlice extends AbilitySlice implements Component.ClickedListener {

private  SlidingDrawer drawer1;

private  Text LeftText;

    @Override

    public void onStart(Intent intent) {

        super.onStart(intent);

        super.setUIContent(ResourceTable.Layout_ability_main);

        LeftText=findComponentById(ResourceTable.Id_hos);//todo 菜单按钮

        drawer1     =findComponentById(ResourceTable.Id_slide);//todo 抽屉布局

        drawer1.setHandle(new Component(this));//todo 这个必须设置

        //todo 实现点击菜单的事件

        LeftText.setClickedListener(new Component.ClickedListener() {

            @Override

            public void onClick(Component component) {

                drawer1.animateOpen();

            }

        });

        //todo 给菜单列表实现点击事件

        findComponentById(ResourceTable.Id_text_menu_one).setClickedListener(this);

        findComponentById(ResourceTable.Id_text_menu_two).setClickedListener(this);

        findComponentById(ResourceTable.Id_text_menu_there).setClickedListener(this);

    }

    /**

     * 重写点击事件的按钮事件，并给出提示，关闭抽屉布局

     * @param component

     */

    @Override

    public void onClick(Component component) {

        String myText="";

        switch (component.getId()){

            case ResourceTable.Id_text_menu_one:

                myText="菜单一";

                break;

            case ResourceTable.Id_text_menu_two:

                myText="菜单二";

                break;

            case  ResourceTable.Id_text_menu_there:

                myText="菜单三";

                break;

        }

        //todo 提示

        new ToastDialog(getContext())

                .setText(myText)

                .show();

        //todo 关闭 抽屉列表

        if(drawer1.isOpened()){

            drawer1.animateClose();

        }

    }

}

三、运行效果

动画截图如下：

相关参考：鸿蒙开发中应该如何适配屏幕。