4_5-带货场景-打赏

• 1 Feature Overview
• 2 Usage Demo
• 3 Implementation Details
  • 3.1 Reward Popup - PLVECRewardPopupView
  • 3.2 Reward Gift Bar - PLVECRewardGiftAnimView

1 Feature Overview

The reward feature allows viewers to send gifts to the host. The viewer reward interface is encapsulated as the reward popup PLVECRewardPopupView, and the reward gift bar is encapsulated as PLVECRewardGiftAnimView.

2 Usage Demo

Sending reward gifts and listening to others' reward events both depend on the chat room's chatroomPresenter. The Presenter object needs to be pre-constructed.

Sample code for sending a reward:

// PLVECLiveHomeFragment.java
// 打赏弹层创建
PLVECRewardPopupView rewardPopupView = new PLVECRewardPopupView();

// 显示打赏弹层
private void showRewardLayout(View v) {
    // 显示打赏弹层，并设置点击打赏按钮时的回调响应
    rewardPopupView.showRewardLayout(v, new PLVECRewardGiftAdapter.OnViewActionListener() {
        @Override
        public void onRewardClick(View view, PLVCustomGiftBean giftBean) {
            // 隐藏打赏弹层
            rewardPopupView.hide();
            
            String nickName = PolyvSocketWrapper.getInstance().getLoginVO().getNickName();
            showRewardGiftAnimView(nickName + "(我)", giftBean);
            addCustomGiftToChatList(nickName + "(我)", giftBean.getGiftName(), giftBean.getGiftType(), true);
            // 通过自定义信息事件发送礼物信息至聊天室
            chatroomPresenter.sendCustomGiftMessage(giftBean, nickName + " 赠送了" + giftBean.getGiftName());
        }
    });
}

Sample code for listening to others' reward events:

// mvp-view 监听礼物事件
private IPLVChatroomContract.IChatroomView chatroomView = new PLVAbsChatroomView() {
    // 其它事件监听...

    // 礼物事件监听
    @Override
    public void onCustomGiftEvent(@NonNull PolyvCustomEvent.UserBean userBean, @NonNull PLVCustomGiftBean customGiftBean) {
        showRewardGiftAnimView(userBean.getNick(), customGiftBean);
        addCustomGiftToChatList(userBean.getNick(), customGiftBean.getGiftName(), customGiftBean.getGiftType(), false);
    }
}

// 显示打赏礼物条
private void showRewardGiftAnimView(String userName, PLVCustomGiftBean giftBean) {
    int giftDrawableId = getResources().getIdentifier("plvec_gift_" + giftBean.getGiftType(), "drawable", getContext().getPackageName());
    rewardGiftAnimView.acceptRewardGiftMessage(
            new PLVECRewardGiftAnimView.RewardGiftInfo(userName, giftBean.getGiftName(), giftDrawableId)
    );
}

3 Implementation Details

3.1 Reward Popup - PLVECRewardPopupView

In the demo, PLVECRewardPopupView uses a locally generated list of reward gifts for demonstration. It can also be integrated with the backend to implement a dynamic gift list.

// PLVECRewardPopupView.java
// 本地生成礼物列表
private void generateRewardGiftVO();
// 设置礼物列表
private void setRewardGiftVO(List<PLVCustomGiftBean> giftBeanList);

3.2 Reward Gift Bar - PLVECRewardGiftAnimView

The reward gift bar PLVECRewardGiftAnimView displays the gift bar by calling its acceptRewardGiftMessage(RewardGiftInfo) method and automatically hides.

The animation logic for the gift bar is handled in the internal method showRewardLayout(), which can be modified as needed.

// PLVECRewardGiftAnimView.java
// 外部调用 接收礼物数据
public void acceptRewardGiftMessage(final RewardGiftInfo rewardGiftInfo) {
    post(new Runnable() {
        @Override
        public void run() {
            rewardGiftInfoList.add(rewardGiftInfo);
            //列表最多10条数据。超过10条数据时，如果有新来的礼物数据，则移除旧的数据
            if (rewardGiftInfoList.size() > 10) {
                rewardGiftInfoList.remove(0);
            }
            if (!isStart) {
                isStart = !isStart;
                showRewardLayout();
            }
        }
    });
}

// 内部调用 礼物数据动画显示处理
private void showRewardLayout() {
    if (rewardGiftInfoList.size() < 1) {
        setVisibility(View.INVISIBLE);
        TranslateAnimation animation = new TranslateAnimation(0f, -getWidth(), 0f, 0f);
        animation.setDuration(400);
        startAnimation(animation);
        isStart = !isStart;
        return;
    }

    final RewardGiftInfo rewardGiftInfo = rewardGiftInfoList.remove(0);

    acceptRewardGiftDisposable = Observable.just(1)
            .observeOn(AndroidSchedulers.mainThread())
            .doOnNext(new Consumer<Integer>() {
                @Override
                public void accept(Integer integer) throws Exception {
                    setVisibility(View.VISIBLE);
                    rewardUserNameTv.setText(rewardGiftInfo.getUserName());
                    rewardGiftNameTv.setText("赠送    " + rewardGiftInfo.getGiftName());
                    rewardGiftPicIv.setImageResource(rewardGiftInfo.getGiftDrawableId());
                    TranslateAnimation animation = new TranslateAnimation(-getWidth(), 0f, 0f, 0f);
                    animation.setDuration(400);
                    startAnimation(animation);
                }
            })
            .delay(400 + 1200, TimeUnit.MILLISECONDS)
            .observeOn(AndroidSchedulers.mainThread())
            .subscribe(new Consumer<Object>() {
                @Override
                public void accept(Object o) throws Exception {
                    showRewardLayout();
                }
            }, new Consumer<Throwable>() {
                @Override
                public void accept(Throwable throwable) throws Exception {
                }
            });
}