实现礼物动效
更新时间: 2024/08/14 11:41:36
本文介绍如何通过礼物组件实现发送礼物、展示礼物通知。
功能介绍
礼物在 1 对 1 娱乐社交场景中是非常重要的功能,它可以让用户之间更加亲密,提高用户留存率。
礼物组件默认提供了几种礼物类型, 用于展示礼物消息的发送和接收功能。
发送礼物
因礼物会涉及到用户计费计量的逻辑,所以需要开发者根据自己的业务需求,在服务端计费后调用 IM 服务端接口发送礼物消息。
发送礼物的流程如下:
sequenceDiagram
participant 礼物发送方
participant 业务服务器
participant IM服务器
participant 礼物接收方
礼物发送方 ->> 业务服务器: 发起送礼物请求
Note right of 业务服务器: 涉及到计费逻辑,请自行实现
业务服务器 ->> IM服务器: 调用IM服务端的发送自定义消息接口通知对方
IM服务器 -->> 礼物接收方: 礼物消息
IM服务器 -->> 礼物发送方: 礼物消息
- 客户端向业务服务器发起送礼物请求,涉及到计费逻辑。
- 计费结算后,业务服务器调用 IM 服务端的发送自定义消息 接口通知礼物发送方和礼物接收方。
- 送礼方与收礼方收到代表礼物的 IM 的自定义消息,送礼方与收礼方的聊天页面分别展示礼物消息。
自定义发送礼物的界面
目前礼物选择及发送界面为 NEOneOnOneGiftViewController
。
资源 | 描述 |
---|---|
NEOneOnOneGiftItem | 礼物对象 |
NEOneOnOneGiftCountCell | 礼物数量选择cell |
NEOneOnOneGiftCell | 礼物选择cell |
NEOneOnOneGiftViewController | 礼物整体视图 |
展示礼物通知
礼物消息通过 IM 自定义消息来实现。您可以通过如下两种方式自定义展示的礼物消息。
方式1:直接基于 1 对 1 社交源码修改
因为礼物消息接收端和发送端的样式不同,所以这里区分 NEOneOnOneRewardRightCell
和 NEOneOnOneRewardLeftCell
。
NEOneOnOneRewardRightCell
和 NEOneOnOneRewardLeftCell
中都只添加了 NEOneOnOneCustomMsgRewardSalution
,只是会根据收发状态来显示不同的布局。
通过修改 NEOneOnOneCustomMsgRewardSalution
的代码就可以实现自己想要的UI样式了。关注 setModel
函数,在里面实现自己对礼物的定制。
示例代码
func setModel(_ model: CustomAttachment) {
switch model.giftId {
case 1:
giftImgae.image = ne_chatUI_imageName(imageName: "gift01_ico")
countLabel.text = "\(ne_localized("荧光棒")) x\(model.giftCount)"
case 2:
giftImgae.image = ne_chatUI_imageName(imageName: "gift02_ico")
countLabel.text = "\(ne_localized("安排")) x\(model.giftCount)"
case 3:
giftImgae.image = ne_chatUI_imageName(imageName: "gift03_ico")
countLabel.text = "\(ne_localized("跑车")) x\(model.giftCount)"
case 4:
giftImgae.image = ne_chatUI_imageName(imageName: "gift04_ico")
countLabel.text = "\(ne_localized("火箭")) x\(model.giftCount)"
default: break
}
}
方式2:基于IMUIKit完全自定义开发
-
继承
P2PChatViewController
来创建您自己的会话页面,例如示例项目源码中的NEOneOnOneChatP2PViewController
。 -
实现礼物消息 cell 。
可参考示例项目源码中的
NEOneOnOneRewardLeftCell
与NEOneOnOneRewardRightCell
。这两个 cell 分别继承于 IMUIKit 的ChatBaseRightCell
与ChatBaseLeftCell
,用于区分消息在接收和发送时的不同样式。 -
重写 cell 的
setModel
方法,拿到消息对象来构建您自己的控件。override func setModel(_ model: MessageContentModel) { super.setModel(model) if let messageObject = model.message?.messageObject as? NIMCustomObject, let attach = messageObject.attachment as? CustomAttachment { salutionCell.setModel(attach) } }
-
在模块初始化的时候注册自定义消息解析器,用于对礼物消息进行解析。
NIMCustomObject.registerCustomDecoder(CustomAttachmentDecoder())
-
创建
NIMCustomAttachment
与NIMCustomAttachmentCoding
,请参考示例项目源码中的CustomAttachment
与CustomAttachmentDecoder
。CustomAttachment
中必须要有customType
的定义,用于与第二步中的 key 对应。CustomAttachment
中必须要有cellHeight
的定义,用于指定 cell 的高度。在
CustomAttachmentDecoder
的decodeAttachment
中解析自定义消息,获得消息的属性后构建自己的customType
与cellHeight
,这样 IMUIKit 内部就能为您的消息准确匹配到您设置的 cell。switch customAttachment.type { case OneOnOneChatCustomMessageType.SEND_GIFT_TYPE: if let senderAccount = customAttachment.senderUserUuid { if senderAccount == NEOneOnOneKit.getInstance().localMember?.imAccid { customAttachment.customType = SEND_GIFT_TYPE_SEND } else { customAttachment.customType = SEND_GIFT_TYPE_RECV } customAttachment.cellHeight = 114 } default: customAttachment.cellHeight = 70 }