# LiveGiftLayout

**Repository Path**: chinasoft4_ohos/LiveGiftLayout

## Basic Information

- **Project Name**: LiveGiftLayout
- **Description**: 一个带礼物面板的直播礼物连击效果
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 3
- **Created**: 2021-08-12
- **Last Updated**: 2022-11-30

## Categories & Tags

**Categories**: harmonyos-layout

**Tags**: None

## README

# LiveGiftLayout


#### 项目介绍
- 项目名称：LiveGiftLayout
- 所属系列：openharmony的第三方组件适配移植
- 功能：一个带礼物面板的直播礼物连击效果, 由于鸿蒙动画问题，会偶发性出现动画卡死 (偶发性出现直播页面，赠送礼物时，动画卡死现象)
  由于无法通过反射获取“mCurTextColor” 文本描边效果未实现(赠送礼物时，页面动画效果中的礼物个数样式，与安卓不一致)
- 项目移植状态：主功能完成
- 调用差异：无
- 开发版本：sdk6，DevEco Studio2.2 Beta1
- 基线版本：Release v1.3

#### 效果演示
![image text](gif/demo.gif)
#### 安装教程
1.在项目根目录下的build.gradle文件中，
 ```
 allprojects {
    repositories {
        maven {
            url 'https://s01.oss.sonatype.org/content/repositories/releases/'
        }
    }
 }
```
2.在entry模块的build.gradle文件中，
 ```
 dependencies {
    
    implementation('com.gitee.chinasoft_ohos:LiveGiftLayout:1.0.0')
    ......  
 }
```
在sdk6，DevEco Studio2.2 Beta1下项目可直接运行 如无法运行，删除项目.gradle,.idea,build,gradle,build.gradle文件， 并依据自己的版本创建新项目，将新项目的对应文件复制到根目录下
#### 使用说明

1：在要显示的xml文件中添加展示礼物和礼物面板的地方 以项目中的gift1界面为例
```
<?xml version="1.0" encoding="utf-8"?>
<DependentLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent">

    <Image
        ohos:id="$+id:bg"
        ohos:height="match_parent"
        ohos:width="match_parent"
        ohos:image_src="$media:ic_bg"
        ohos:scale_mode="clip_center"/>

    <ListContainer
        ohos:id="$+id:recyclerView"
        ohos:height="300vp"
        ohos:width="180vp"
        ohos:align_parent_right="true"/>

    <DirectionalLayout
        ohos:id="$+id:ll_gift_parent"
        ohos:height="match_parent"
        ohos:width="match_parent"
        ohos:align_parent_bottom="true"
        ohos:alignment="bottom"
        ohos:top_margin="130vp"
        ohos:bottom_margin="280vp"
        ohos:orientation="vertical">
    </DirectionalLayout>

    <Button
        ohos:id="$+id:action"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:background_element="$graphic:background_ability_main"
        ohos:bottom_padding="8vp"
        ohos:horizontal_center="true"
        ohos:left_padding="10vp"
        ohos:right_padding="10vp"
        ohos:text="礼物面板显示/隐藏"
        ohos:text_size="15fp"
        ohos:top_margin="50vp"
        ohos:top_padding="8vp"/>

    <ScrollView
        ohos:height="200vp"
        ohos:width="match_parent"
        ohos:below="$+id:action"
        ohos:top_margin="20vp">

        <DirectionalLayout
            ohos:height="match_parent"
            ohos:width="match_parent"
            ohos:orientation="vertical">

            <Checkbox
                ohos:id="$+id:rb_currentStart"
                ohos:height="match_content"
                ohos:width="match_content"
                ohos:text="是否使用当前礼物数开始显示"
                ohos:text_color_off="$color:white"
                ohos:text_color_on="$color:white"
                ohos:text_size="22fp"/>

            <Checkbox
                ohos:id="$+id:rb_displayMode"
                ohos:height="match_content"
                ohos:width="match_content"
                ohos:marked="true"
                ohos:text="是否由下往上显示"
                ohos:text_color_off="$color:white"
                ohos:text_color_on="$color:white"
                ohos:text_size="22fp"
                ohos:top_margin="5vp"/>

            <Checkbox
                ohos:id="$+id:rb_hideMode"
                ohos:height="match_content"
                ohos:width="match_content"
                ohos:text="是否开启隐藏动画"
                ohos:text_color_off="$color:white"
                ohos:text_color_on="$color:white"
                ohos:text_size="22fp"
                ohos:top_margin="5vp"/>
        </DirectionalLayout>

    </ScrollView>

    <DependentLayout
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:align_parent_bottom="true"
        ohos:bottom_margin="10vp">

        <Button
            ohos:id="$+id:btn_clear_gift"
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:background_element="$graphic:background_ability_main"
            ohos:bottom_padding="8vp"
            ohos:left_padding="18vp"
            ohos:margin="3vp"
            ohos:right_padding="18vp"
            ohos:text="清除礼物"
            ohos:text_size="14vp"
            ohos:top_padding="8vp"/>

        <Button
            ohos:id="$+id:btn_reset_gift"
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:align_bottom="$+id:btn_clear_gift"
            ohos:background_element="$graphic:background_ability_main"
            ohos:bottom_padding="8vp"
            ohos:end_of="$+id:btn_clear_gift"
            ohos:left_padding="18vp"
            ohos:margin="3vp"
            ohos:right_of="$+id:btn_clear_gift"
            ohos:right_padding="18vp"
            ohos:text="初始化礼物"
            ohos:text_size="14vp"
            ohos:top_padding="8vp"/>

        <Button
            ohos:id="$+id:btn_hide_gift"
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:align_bottom="@id/btn_reset_gift"
            ohos:background_element="$graphic:background_ability_main"
            ohos:bottom_padding="8vp"
            ohos:end_of="$+id:btn_reset_gift"
            ohos:left_padding="18vp"
            ohos:margin="3vp"
            ohos:right_of="$+id:btn_reset_gift"
            ohos:right_padding="18vp"
            ohos:text="隐藏/显示礼物"
            ohos:text_size="14vp"
            ohos:top_padding="8vp"/>
    </DependentLayout>

    <include
        ohos:id="$+id:giftLayout"
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:align_parent_bottom="true"
        ohos:layout="$layout:chat_tool_box"/>

    <include
        ohos:id="$+id:pop"
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:align_parent_bottom="true"
        ohos:layout="$layout:dialog_gift"
        ohos:visibility="hide"
        />

</DependentLayout>

```
  
2：在页面中找到控件后就可以初始化礼物模块了。  
**a.礼物面板**。  

代码如下：  
这里如果想使用本地的礼物图片直接使用  
giftPanelControl.init(null);//这里如果为null则加载本地礼物图片

```
        GiftPanelControl giftPanelControl = new GiftPanelControl(this, mViewpager, mRecyclerView, mDotsLayout);
        giftPanelControl.init(null);//这里如果为null则加载本地礼物图片
        giftPanelControl.setGiftListener(new GiftPanelControl.GiftListener() {
            @Override
            public void getGiftInfo(String giftPic, String giftName, String giftPrice) {
                mGifturl = giftPic;
                mGiftName = giftName;
            }
        });
```
这里的giftPic参数我传的是资源文件中图片的名称，你也可以传的是图片的id。  

**b.展示礼物**  
这里的setGiftLayout(giftParent, 3)方法， 参数一：礼物控件的父容器。参数二：礼物轨道的数量。  
setCustormAnim(new CustormAnim())方法，对礼物的动画可以进行扩展，可以在不修改源码的情况下定制属于你的效果。
```
        final DirectionalLayout giftParent = (DirectionalLayout) findComponentById(ResourceTable.Id_ll_gift_parent);
        giftControl = new GiftControl(this);
        giftControl.setGiftLayout(giftParent, 3).setHideMode(false)
                .setCustormAnim(new CustormAnim());//这里可以自定义礼物动画
```
**c.显示礼物数量的面板**  

```
tvGiftNum.setClickedListener(v -> pop.setVisibility(Component.VISIBLE));
```  
**d.礼物面板中发送按钮发送礼物的操作**  

如果你想要从某个礼物数开始连击，你可以在giftControl.loadGift(giftModel);前创建的GiftModel设置setCurrentStart(true)和setHitCombo(giftnum)，  
这样就可以实现了。  
温馨提示：这里的setCurrentStart()方法必须设置为true，setHitCombo()方法才能生效哦。  

```
        btnGift.setClickedListener(v -> {
            if (TextTool.isNullOrEmpty(mGiftName)) {
                new ToastDialog(getContext()).setText("你还没选择礼物呢").show();
            } else {
                String numStr = tvGiftNum.getText().toString();
                if (!TextTool.isNullOrEmpty(numStr)) {
                    int giftnum = Integer.parseInt(numStr);
                    if (giftnum == 0) {
                        return;
                    } else {
                        //这里最好不要直接new对象
                        giftModel = new GiftModel();
                        giftModel.setGiftId(mGiftName).setGiftName("礼物名字").setGiftCount(giftnum).setGiftPic(mGifturl)
                                .setSendUserId("1234").setSendUserName("吕靓茜").setSendUserPic("").setSendGiftTime(System.currentTimeMillis())
                                .setCurrentStart(currentStart);
                        if (currentStart) {
                            giftModel.setHitCombo(giftnum);
                        }
                        giftControl.loadGift(giftModel);
                        adapter.add(mGiftName);
                        System.out.println("onClick: " + giftControl.getShowingGiftLayoutCount());
                    }
                }
            }
        });
```
**e.简单的操作了横竖屏显示不同的面板**  

```
        findComponentById(ResourceTable.Id_action).setClickedListener(v -> {
            if (giftLayout.getVisibility() == Component.VISIBLE) {
                giftLayout.setVisibility(Component.HIDE);
            } else {
                giftLayout.setVisibility(Component.VISIBLE);
            }
        });
```
**f.类似于切换直播间可以重新发送礼物（切换效果没做，功能实现了）**  

```
        findComponentById(ResourceTable.Id_btn_clear_gift).setClickedListener(v -> {
            if (giftControl != null) {
                giftControl.cleanAll();
            }
        });
        findComponentById(ResourceTable.Id_btn_reset_gift).setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component v) {
                giftControl.reSetGiftLayout(giftParent, 3)
                        .setHideMode(false);
            }
        });
```

#### 测试信息

CodeCheck代码测试无异常

CloudTest代码测试无异常

病毒安全检测通过

当前版本demo功能与原组件基本无差异

#### 版本迭代
- 1.0.0

#### 版权和许可信息

Apache License 2.0