What's New

버튼이 있는 말풍 선 구현하기

RecyclerView ViewType 과 Kotlin언어를 사용하여 간단한 말풍선을 아래와 같이 구현할 수 있습니다.

1. 메시지 전송 시, UIView 객체를 생성하기 위해서 'metaData' 프로퍼티에 key-value 데이터를 채워넣습니다.

val metaData: HashMap<String, String> = hashMapOf()
metaData.apply {
    put("type", "msg_with_button")
    put("title", "안녕하세요?")
    put("body", "버튼이 있는 말풍선입니다.")
    put("button_text", "더 자세히 보기")
    put("button_action", "SayHello")
}

val params: TPMessageSendParams = TPMessageSendParams.Builder(channel,
        TPMessageSendParams.MessageType.TEXT,
        TPMessageSendParams.ContentType.TEXT)
        .setText(textMessage)
        .setMentions(mentionsUserIDs)
        .setParentMessageId(parentMessageId)
        .setMetaData(metaData)
        .setFileUrl()
        .setTranslationLanguages(translationLanguages)
        .build()
                
TalkPlus.sendMessage(params, 
    object : TalkPlus.CallbackListener<TPMessage>() {
        override fun onSuccess(tpMessage: TPMessage) { }
        override fun onFailure(errorCode: Int, exception: Exception) { }
})

data의 경우, 최대 10개의 Key-value 형식의 데이터를 넣을 수 있습니다. key, value 둘 다 문자열이어야 합니다. key값의 최대 길이는 128자이고 value값의 최대 길이는 1024자입니다.

2. 화면에 표시될 데이터를 포함하는 CardViewMessageModel data class를 정의합니다.

data class CardViewMessageModel(
    var type: String,
    var title: String,
    var body: String,
    var button_text: String,
    var button_action: String
)

3. RecyclerView에 바인딩된 어댑터 클래스의 ViewType을 추가합니다.

sealed class Item {
    object ChatBubble : Item()
    object AnotherItem : Item()
}

class MultiViewTypeAdapter(private val items: List<CardViewMessageModel>) : RecyclerView.Adapter<RecyclerView.ViewHolder>() {
    companion object {
        private const val VIEW_TYPE_CHAT_BUBBLE = 1
        private const val VIEW_TYPE_ANOTHER_ITEM = 2
    }

    override fun getItemViewType(position: Int): Int {
        return when (items[position]) {
            is Item.ChatBubble -> VIEW_TYPE_CHAT_BUBBLE
            is Item.AnotherItem -> VIEW_TYPE_ANOTHER_ITEM
        }
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerView.ViewHolder {
        return when (viewType) {
            VIEW_TYPE_CHAT_BUBBLE -> {
                val view = LayoutInflater.from(parent.context).inflate(R.layout.chat_bubble_item, parent, false)
                ChatBubbleViewHolder(view)
            }
            VIEW_TYPE_ANOTHER_ITEM -> {
                val view = LayoutInflater.from(parent.context).inflate(R.layout.another_item, parent, false)
                AnotherItemViewHolder(view)
            }
            else -> throw IllegalArgumentException("Invalid view type")
        }
    }

    override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int) {
        when (holder) {
            is ChatBubbleViewHolder -> holder.bind()
            is AnotherItemViewHolder -> holder.bind()
        }
    }

    override fun getItemCount(): Int {
        return items.size
    }

    class ChatBubbleViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        private val textTitle: TextView = itemView.findViewById(R.id.textTitle)
        private val textMessage: TextView = itemView.findViewById(R.id.textMessage)
        private val buttonSayHello: Button = itemView.findViewById(R.id.buttonSayHello)

        fun bind(cardViewMessageModel: CardViewMessageModel) {
            textTitle.text = cardViewMessageModel.title
            textMessage.text = cardViewMessageModel.body
            buttonSayHello.setOnClickListener {
                
            }
        }
    }

4. 새로운 메시지를 수신받을 때 마다 'messageReceived' 메소드가 호출됩니다. 여기에서 'TPMessage'의 인스턴스 메소드인 'getData' 메소드를 호출하여, Key-Value 데이터를 가져와서 'CardViewMessageModel' 객체를 생성하여 주십시오.

TalkPlus.addChannelListener(channelId, object : ChannelListener { 
    override fun onMessageReceived(channel: TPChannel, tpMessage: TPMessage) {
        if (tpMessage.data.isNotEmpty()) {
            val metaData = tpMessage.data
            val cardViewMessageModel = CardViewMessageModel(
                type = metaData.type,
                title = metaData.title,
                body = metaData.body,
                button_text = metaData.button_text,
                button_action = metaData.button_action
            )
            chatMessages.add(cardViewMessageModel)
            chatAdapter.notifyItemInserted()
        }
    }
}