# PanelSwitchHelper

**Repository Path**: hihopeorg/PanelSwitchHelper

## Basic Information

- **Project Name**: PanelSwitchHelper
- **Description**: No description available
- **Primary Language**: Java
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2021-02-27
- **Last Updated**: 2021-10-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# PanelSwitchHelper

**本项目是基于开源项目PanelSwitchHelper进行ohos的移植和开发的，可以通过项目标签以及github地址（https://github.com/YummyLau/PanelSwitchHelper）追踪到原项目版本**

#### 项目介绍
- 项目名称：输入法与面板流畅切换
- 所属系列：ohos的第三方组件适配移植
- 功能：解决输入法与聊天面板的顺畅切换
- 项目移植状态：完成
- 调用差异：无
- 项目作者和维护人：hihope
- 联系方式：hihope@hoperun.com
- 原项目Doc地址：https://github.com/YummyLau/PanelSwitchHelper
- 编程语言：Java
- 外部库依赖：无
#### 演示效果

<img src="gif/demo.gif"/>

#### 安装教程

方法1.

1. 下载动画库jar包PanelSwitchHelper.har。
2. 启动 DevEco Studio，将下载的har包，导入工程目录“entry->libs”下。
3. 在moudle级别下的build.gradle文件中添加依赖，在dependences标签中增加对libs目录下jar包的引用。

```
dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar', '*.har'])
	……
}
```

4. 在导入的har包上点击右键，选择“Add as Library”对包进行引用，选择需要引用的模块，并点击“OK”即引用成功。

方法2.

1. 在工程的build.gradle的allprojects中，添加HAR所在的Maven仓地址

```
repositories {
    maven {
        url 'http://106.15.92.248:8081/repository/Releases/' 
    }
}
```

2. 在应用模块的build.gradle的dependencies闭包中，添加如下代码:

```
dependencies {
    Implementation 'com.effective.ohos:panelSwitchHelper:1.0.1'
}
```

#### 使用说明
 ```xml
<!--主容器-->
    <com.example.library.view.PanelSwitchLayout
        ohos:id="$+id:panel_view"
        ohos:height="match_parent"
        ohos:width="match_parent"
        ohos:orientation="vertical">
        <!-- 显示上半部分 的View-->
        <com.example.library.view.content.RelativeContentContainer
            ohos:id="$+id:recc_pageview"
            ohos:width="match_parent"
            ohos:height="0vp"
            ohos:weight="1"
            ohos:orientation="vertical"
            app:auto_reset_area="$id:empty_view"
            app:auto_reset_enable="false"
            app:edit_view="$id:textfield_input">

            <Text
                ohos:id="$+id:empty_view"
                ohos:height="0vp"
                ohos:weight="1"
                ohos:width="match_parent"
                ohos:background_element="$color:gray_900"
                ohos:text="点击view内部才有效，外部无效哦～"
                />
            <!-- 内容区域 -->
            <!-- edit_view 指定一个 EditText 用于输入 ，必须项-->
            <!-- empty_view 指定用户点击该 ID 对应的 View 时实现面板或者输入法隐藏，非必须项 -->

            <DirectionalLayout
                ohos:id="$+id:input_layout"
                ohos:height="match_content"
                ohos:width="match_parent"
                ohos:orientation="horizontal">

                <Image
                    ohos:id="$+id:add_btn"
                    ohos:height="35vp"
                    ohos:width="35vp"
                    ohos:image_src="$media:add_btn"
                    />

                <TextField
                    ohos:id="$+id:textfield_input"
                    ohos:height="35vp"
                    ohos:width="249vp"
                    ohos:background_element="$color:btn_video_text"
                    />

                <DirectionalLayout
                    ohos:height="40vp"
                    ohos:width="match_parent"
                    ohos:orientation="horizontal">

                    <Image
                        ohos:id="$+id:emotion_btn"
                        ohos:height="35vp"
                        ohos:width="35vp"
                        ohos:end_margin="3vp"
                        ohos:image_src="$media:icon_emotion"
                        ohos:right_margin="10vp"/>

                    <Text
                        ohos:height="50vp"
                        ohos:width="35vp"
                        ohos:text="发送"
                        ohos:text_alignment="center"
                        ohos:background_element="$color:btn_activity_text"
                        />

                </DirectionalLayout>
            </DirectionalLayout>

        </com.example.library.view.content.RelativeContentContainer>
        <!--下半部分面板-->
        <com.example.library.view.panel.PanelContainer
            ohos:id="$+id:panelc_container"
            ohos:height="match_content"
            ohos:width="match_parent"
            ohos:background_element="$color:gray_50">
            <!-- 每一项面板 -->
            <!-- panel_layout 用于指定面板该 ID 对应的布局 ，必须项-->
            <!-- panel_trigger 用于用户点击该 ID 对应的 View 时切换到该面板 -->
            <!-- panel_toggle  用于当该面板显示时 ，用户再次点击 panel_trigger 对应的 View 时是否回切输入法-->

            <com.example.library.view.panel.PanelView
                ohos:id="$+id:panel_emotion"
                ohos:height="200vp"
                ohos:width="match_parent"
                app:panel_name="emotion_btn"
                app:panel_trigger="$id:emotion_btn"
                ohos:background_element="#ff0000"
                app:panel_layout="$layout:panel_emotion_layout"
                />


            <com.example.library.view.panel.PanelView
                ohos:id="$+id:panel_addition"
                ohos:height="100vp"
                ohos:width="match_parent"
                app:panel_name="add_btn"
                app:panel_trigger="@id/add_btn"
                ohos:background_element="#ffff00"
                />

        </com.example.library.view.panel.PanelContainer>

    </com.example.library.view.PanelSwitchLayout>

 ```
2.在Ability中获取到PanelSwitchLayout，进行初始化控件工作。
    1、在onStart()方法中，要添加切换面板的数据源，数据类型为 List<Component>
        例如：

```java
PanelLayoutId.add(LayoutScatter.getInstance(getContext()).parse(ResourceTable.Layout_panel_add_layout, null, false));
```

​    2、在onStart()获取到xml中对应的PanelSwitchLayout 控件，获取该属性后，传入第一步的数据集合，在调用方法进行初始化
        ```
            mPanelSwitchLayout = (PanelSwitchLayout) findComponentById(ResourceTable.Id_panel_switch_layout);
            mPanelSwitchLayout.setPanelLayoutId(PanelLayoutId);
            mPanelSwitchLayout.onFinishInflate();
        ```
​    3.在onActive()中对面板状态进行监听，进行事件处理
        ```
            PanelSwitchHelper mHelper = new PanelSwitchHelper.Builder(this,mPanelSwitchLayout)
                                   .addKeyboardStateListener((visible,height)->{
                                       //可选实现，监听输入法变化
                                   })
                                   .addEditTextFocusChangeListener((view,hasFocus)->{
                                       //可选实现，监听输入框焦点变化
                                   })
                                   .addViewClickListener(component->{
                                       //可选实现，监听触发器的点击
                                   })
                                   //暂时先留着
                                   .addPanelChangeListener(new OnPanelChangeListenerBuilder.OnPanelChangeListener() {
                                       @Override
                                       public void onKeyboard() {
                                           //可选实现，输入法显示回调
                                            }
                                           @Override
                                           public void onNone() {
                                               //可选实现，默认状态回调
                                           }
                                           @Override
                                           public void onPanel(IPanelView panel) {
                                              //可选实现，面板显示回调
                                           }
        
                                           @Override
                                           public void onPanelSizeChange(IPanelView panel, boolean portrait, int oldWidth, int oldHeight, int width, int height) {
                                              //可选实现，输入法动态调整时引起的面板高度变化动态回调
        
                                           }
                                       })
                                       .addContentScrollMeasurer(new ContentScrollMeasurerBuilder.ContentScrollMeasurer() {
                                       //可选，滑动模式下，可以针对内容面板内的view，定制滑动距离，默认滑动距离为 defaultDistance
                                        })
                                       .build();
        ```

#### 版本迭代
 - v1.0.1

 #### 版权和许可信息
 - Apache Licence