feat(chat): DM 채팅방 레이아웃을 추가한다
This commit is contained in:
@@ -0,0 +1,161 @@
|
||||
package kr.co.vividnext.sodalive.v2.main.chat.dm.ui
|
||||
|
||||
import android.view.LayoutInflater
|
||||
import android.view.View
|
||||
import android.view.ViewGroup
|
||||
import android.widget.ImageView
|
||||
import android.widget.TextView
|
||||
import androidx.core.view.isVisible
|
||||
import androidx.recyclerview.widget.DiffUtil
|
||||
import androidx.recyclerview.widget.RecyclerView
|
||||
import coil.transform.CircleCropTransformation
|
||||
import kr.co.vividnext.sodalive.R
|
||||
import kr.co.vividnext.sodalive.extensions.loadUrl
|
||||
import kr.co.vividnext.sodalive.v2.main.chat.dm.model.DmChatMessageStatus
|
||||
import kr.co.vividnext.sodalive.v2.main.chat.dm.model.DmChatMessageUiItem
|
||||
|
||||
class DmChatMessageAdapter(
|
||||
private val onRetryClick: (String) -> Unit
|
||||
) : RecyclerView.Adapter<RecyclerView.ViewHolder>() {
|
||||
|
||||
private var items: List<DmChatMessageUiItem> = emptyList()
|
||||
|
||||
init {
|
||||
setHasStableIds(true)
|
||||
}
|
||||
|
||||
fun submitItems(newItems: List<DmChatMessageUiItem>) {
|
||||
val diffResult = DiffUtil.calculateDiff(DmChatMessageDiffCallback(items, newItems))
|
||||
items = newItems
|
||||
diffResult.dispatchUpdatesTo(this)
|
||||
}
|
||||
|
||||
override fun getItemCount(): Int = items.size
|
||||
|
||||
override fun getItemId(position: Int): Long = stableId(items[position])
|
||||
|
||||
override fun getItemViewType(position: Int): Int = if (items[position].mine) {
|
||||
VIEW_TYPE_MY_MESSAGE
|
||||
} else {
|
||||
VIEW_TYPE_OPPONENT_MESSAGE
|
||||
}
|
||||
|
||||
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerView.ViewHolder {
|
||||
val inflater = LayoutInflater.from(parent.context)
|
||||
return when (viewType) {
|
||||
VIEW_TYPE_MY_MESSAGE -> MyMessageViewHolder(
|
||||
inflater.inflate(R.layout.item_dm_chat_my_message, parent, false),
|
||||
onRetryClick
|
||||
)
|
||||
VIEW_TYPE_OPPONENT_MESSAGE -> OpponentMessageViewHolder(
|
||||
inflater.inflate(R.layout.item_dm_chat_opponent_message, parent, false)
|
||||
)
|
||||
else -> throw IllegalArgumentException("Unknown viewType: $viewType")
|
||||
}
|
||||
}
|
||||
|
||||
override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int) {
|
||||
when (holder) {
|
||||
is MyMessageViewHolder -> holder.bind(items[position])
|
||||
is OpponentMessageViewHolder -> holder.bind(items[position])
|
||||
}
|
||||
}
|
||||
|
||||
private class DmChatMessageDiffCallback(
|
||||
private val oldItems: List<DmChatMessageUiItem>,
|
||||
private val newItems: List<DmChatMessageUiItem>
|
||||
) : DiffUtil.Callback() {
|
||||
override fun getOldListSize(): Int = oldItems.size
|
||||
override fun getNewListSize(): Int = newItems.size
|
||||
|
||||
override fun areItemsTheSame(oldItemPosition: Int, newItemPosition: Int): Boolean {
|
||||
val oldItem = oldItems[oldItemPosition]
|
||||
val newItem = newItems[newItemPosition]
|
||||
return sameIdentity(oldItem, newItem)
|
||||
}
|
||||
|
||||
override fun areContentsTheSame(oldItemPosition: Int, newItemPosition: Int): Boolean =
|
||||
oldItems[oldItemPosition] == newItems[newItemPosition]
|
||||
}
|
||||
|
||||
private class MyMessageViewHolder(
|
||||
itemView: View,
|
||||
private val onRetryClick: (String) -> Unit
|
||||
) : RecyclerView.ViewHolder(itemView) {
|
||||
private val tvMessage = itemView.findViewById<TextView>(R.id.tv_message)
|
||||
private val tvStatus = itemView.findViewById<TextView>(R.id.tv_status)
|
||||
private val ivRetry = itemView.findViewById<ImageView>(R.id.iv_retry)
|
||||
private val messageContainer = itemView.findViewById<View>(R.id.message_container)
|
||||
|
||||
fun bind(item: DmChatMessageUiItem) {
|
||||
tvMessage.text = item.textMessage
|
||||
tvMessage.maxWidth = (itemView.resources.displayMetrics.widthPixels * MESSAGE_MAX_WIDTH_RATIO).toInt()
|
||||
|
||||
val statusText = when (item.status) {
|
||||
DmChatMessageStatus.SENDING -> itemView.context.getString(R.string.status_sending)
|
||||
DmChatMessageStatus.FAILED -> itemView.context.getString(R.string.status_failed)
|
||||
DmChatMessageStatus.SENT -> ""
|
||||
}
|
||||
tvStatus.text = statusText
|
||||
tvStatus.isVisible = statusText.isNotEmpty()
|
||||
|
||||
val showRetry = item.status == DmChatMessageStatus.FAILED && item.localId != null
|
||||
ivRetry.isVisible = showRetry
|
||||
if (showRetry) {
|
||||
ivRetry.setOnClickListener { item.localId?.let(onRetryClick) }
|
||||
} else {
|
||||
ivRetry.setOnClickListener(null)
|
||||
}
|
||||
|
||||
messageContainer.alpha = when (item.status) {
|
||||
DmChatMessageStatus.SENDING -> 0.6f
|
||||
DmChatMessageStatus.FAILED -> 0.4f
|
||||
DmChatMessageStatus.SENT -> 1.0f
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private class OpponentMessageViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
|
||||
private val ivProfile = itemView.findViewById<ImageView>(R.id.iv_profile)
|
||||
private val tvName = itemView.findViewById<TextView>(R.id.tv_name)
|
||||
private val tvMessage = itemView.findViewById<TextView>(R.id.tv_message)
|
||||
|
||||
fun bind(item: DmChatMessageUiItem) {
|
||||
tvName.text = item.senderNickname
|
||||
tvMessage.text = item.textMessage
|
||||
tvMessage.maxWidth = (itemView.resources.displayMetrics.widthPixels * MESSAGE_MAX_WIDTH_RATIO).toInt()
|
||||
ivProfile.loadUrl(item.senderProfileImageUrl) {
|
||||
placeholder(R.drawable.ic_placeholder_profile)
|
||||
error(R.drawable.ic_placeholder_profile)
|
||||
transformations(CircleCropTransformation())
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
companion object {
|
||||
private const val VIEW_TYPE_MY_MESSAGE = 1
|
||||
private const val VIEW_TYPE_OPPONENT_MESSAGE = 2
|
||||
private const val MESSAGE_MAX_WIDTH_RATIO = 0.68f
|
||||
|
||||
private fun stableId(item: DmChatMessageUiItem): Long =
|
||||
item.messageId ?: item.localId?.let(::localStableId) ?: localStableId(item.createdAt.toString())
|
||||
|
||||
private fun localStableId(localId: String): Long {
|
||||
var hash = 1125899906842597L
|
||||
localId.forEach { char ->
|
||||
hash = 31L * hash + char.code
|
||||
}
|
||||
return -1L - (hash and Long.MAX_VALUE)
|
||||
}
|
||||
|
||||
private fun sameIdentity(oldItem: DmChatMessageUiItem, newItem: DmChatMessageUiItem): Boolean {
|
||||
if (oldItem.messageId != null && newItem.messageId != null) {
|
||||
return oldItem.messageId == newItem.messageId
|
||||
}
|
||||
if (oldItem.localId != null && newItem.localId != null) {
|
||||
return oldItem.localId == newItem.localId
|
||||
}
|
||||
return stableId(oldItem) == stableId(newItem)
|
||||
}
|
||||
}
|
||||
}
|
||||
139
app/src/main/res/layout/activity_dm_chat_room.xml
Normal file
139
app/src/main/res/layout/activity_dm_chat_room.xml
Normal file
@@ -0,0 +1,139 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
|
||||
xmlns:app="http://schemas.android.com/apk/res-auto"
|
||||
xmlns:tools="http://schemas.android.com/tools"
|
||||
android:layout_width="match_parent"
|
||||
android:layout_height="match_parent"
|
||||
android:background="@color/color_131313">
|
||||
|
||||
<ImageView
|
||||
android:id="@+id/iv_background_profile"
|
||||
android:layout_width="0dp"
|
||||
android:layout_height="0dp"
|
||||
android:contentDescription="@string/a11y_profile_background"
|
||||
android:scaleType="centerCrop"
|
||||
app:layout_constraintBottom_toBottomOf="parent"
|
||||
app:layout_constraintDimensionRatio="H,2:3"
|
||||
app:layout_constraintEnd_toEndOf="parent"
|
||||
app:layout_constraintStart_toStartOf="parent"
|
||||
app:layout_constraintTop_toTopOf="parent" />
|
||||
|
||||
<View
|
||||
android:id="@+id/view_character_dim"
|
||||
android:layout_width="0dp"
|
||||
android:layout_height="0dp"
|
||||
android:background="@color/color_99000000"
|
||||
app:layout_constraintBottom_toBottomOf="@id/iv_background_profile"
|
||||
app:layout_constraintEnd_toEndOf="parent"
|
||||
app:layout_constraintStart_toStartOf="parent"
|
||||
app:layout_constraintTop_toTopOf="@id/iv_background_profile" />
|
||||
|
||||
<androidx.constraintlayout.widget.ConstraintLayout
|
||||
android:id="@+id/header_container"
|
||||
android:layout_width="0dp"
|
||||
android:layout_height="60dp"
|
||||
android:background="@android:color/transparent"
|
||||
android:paddingHorizontal="16dp"
|
||||
android:paddingVertical="8dp"
|
||||
android:paddingTop="4dp"
|
||||
app:layout_constraintEnd_toEndOf="parent"
|
||||
app:layout_constraintStart_toStartOf="parent"
|
||||
app:layout_constraintTop_toTopOf="parent">
|
||||
|
||||
<ImageView
|
||||
android:id="@+id/iv_back"
|
||||
android:layout_width="24dp"
|
||||
android:layout_height="24dp"
|
||||
android:contentDescription="@string/a11y_back"
|
||||
android:src="@drawable/ic_back"
|
||||
app:layout_constraintBottom_toBottomOf="parent"
|
||||
app:layout_constraintStart_toStartOf="parent"
|
||||
app:layout_constraintTop_toTopOf="parent" />
|
||||
|
||||
<ImageView
|
||||
android:id="@+id/iv_profile"
|
||||
android:layout_width="36dp"
|
||||
android:layout_height="36dp"
|
||||
android:layout_marginStart="12dp"
|
||||
android:contentDescription="@string/a11y_profile_image"
|
||||
android:scaleType="centerCrop"
|
||||
android:src="@drawable/ic_placeholder_profile"
|
||||
app:layout_constraintBottom_toBottomOf="parent"
|
||||
app:layout_constraintStart_toEndOf="@id/iv_back"
|
||||
app:layout_constraintTop_toTopOf="parent" />
|
||||
|
||||
<TextView
|
||||
android:id="@+id/tv_name"
|
||||
android:layout_width="0dp"
|
||||
android:layout_height="wrap_content"
|
||||
android:layout_marginStart="12dp"
|
||||
android:ellipsize="end"
|
||||
android:fontFamily="@font/bold"
|
||||
android:maxLines="1"
|
||||
android:textColor="#FFFFFFFF"
|
||||
android:textSize="12sp"
|
||||
app:layout_constraintBottom_toBottomOf="@id/iv_profile"
|
||||
app:layout_constraintEnd_toEndOf="parent"
|
||||
app:layout_constraintStart_toEndOf="@id/iv_profile"
|
||||
app:layout_constraintTop_toTopOf="@id/iv_profile"
|
||||
tools:text="Creator Name" />
|
||||
|
||||
</androidx.constraintlayout.widget.ConstraintLayout>
|
||||
|
||||
<androidx.recyclerview.widget.RecyclerView
|
||||
android:id="@+id/rv_messages"
|
||||
android:layout_width="0dp"
|
||||
android:layout_height="0dp"
|
||||
android:clipToPadding="false"
|
||||
app:layout_constraintBottom_toTopOf="@id/input_container"
|
||||
app:layout_constraintEnd_toEndOf="parent"
|
||||
app:layout_constraintStart_toStartOf="parent"
|
||||
app:layout_constraintTop_toBottomOf="@id/header_container" />
|
||||
|
||||
<androidx.constraintlayout.widget.ConstraintLayout
|
||||
android:id="@+id/input_container"
|
||||
android:layout_width="0dp"
|
||||
android:layout_height="wrap_content"
|
||||
android:background="@android:color/transparent"
|
||||
android:padding="12dp"
|
||||
app:layout_constraintBottom_toBottomOf="parent"
|
||||
app:layout_constraintEnd_toEndOf="parent"
|
||||
app:layout_constraintStart_toStartOf="parent">
|
||||
|
||||
<EditText
|
||||
android:id="@+id/et_message"
|
||||
android:layout_width="0dp"
|
||||
android:layout_height="wrap_content"
|
||||
android:layout_marginEnd="8dp"
|
||||
android:background="@drawable/bg_chat_input"
|
||||
android:fontFamily="@font/regular"
|
||||
android:hint="@string/chat_input_placeholder"
|
||||
android:imeOptions="actionSend|flagNoEnterAction"
|
||||
android:importantForAutofill="no"
|
||||
android:inputType="textMultiLine"
|
||||
android:maxLength="200"
|
||||
android:maxLines="4"
|
||||
android:minHeight="48dp"
|
||||
android:paddingHorizontal="16dp"
|
||||
android:paddingVertical="8dp"
|
||||
android:textColor="#FFFFFFFF"
|
||||
android:textColorHint="#80FFFFFF"
|
||||
android:textSize="14sp"
|
||||
app:layout_constraintBottom_toBottomOf="parent"
|
||||
app:layout_constraintEnd_toStartOf="@id/iv_send"
|
||||
app:layout_constraintStart_toStartOf="parent"
|
||||
app:layout_constraintTop_toTopOf="parent" />
|
||||
|
||||
<ImageView
|
||||
android:id="@+id/iv_send"
|
||||
android:layout_width="24dp"
|
||||
android:layout_height="24dp"
|
||||
android:contentDescription="@string/action_send"
|
||||
android:src="@drawable/ic_message_send"
|
||||
app:layout_constraintBottom_toBottomOf="parent"
|
||||
app:layout_constraintEnd_toEndOf="parent"
|
||||
app:layout_constraintTop_toTopOf="parent" />
|
||||
|
||||
</androidx.constraintlayout.widget.ConstraintLayout>
|
||||
|
||||
</androidx.constraintlayout.widget.ConstraintLayout>
|
||||
72
app/src/main/res/layout/item_dm_chat_my_message.xml
Normal file
72
app/src/main/res/layout/item_dm_chat_my_message.xml
Normal file
@@ -0,0 +1,72 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
|
||||
xmlns:app="http://schemas.android.com/apk/res-auto"
|
||||
xmlns:tools="http://schemas.android.com/tools"
|
||||
android:layout_width="match_parent"
|
||||
android:layout_height="wrap_content"
|
||||
android:paddingStart="12dp"
|
||||
android:paddingTop="6dp"
|
||||
android:paddingEnd="12dp"
|
||||
android:paddingBottom="6dp">
|
||||
|
||||
<TextView
|
||||
android:id="@+id/tv_status"
|
||||
android:layout_width="wrap_content"
|
||||
android:layout_height="wrap_content"
|
||||
android:layout_marginEnd="4dp"
|
||||
android:fontFamily="@font/regular"
|
||||
android:includeFontPadding="false"
|
||||
android:textColor="@color/color_777777"
|
||||
android:textSize="12sp"
|
||||
app:layout_constraintBottom_toBottomOf="@id/message_container"
|
||||
app:layout_constraintEnd_toStartOf="@id/message_container"
|
||||
tools:text="전송 중" />
|
||||
|
||||
<androidx.constraintlayout.widget.ConstraintLayout
|
||||
android:id="@+id/message_container"
|
||||
android:layout_width="wrap_content"
|
||||
android:layout_height="wrap_content"
|
||||
android:background="@drawable/bg_chat_user_message"
|
||||
android:paddingHorizontal="14dp"
|
||||
android:paddingVertical="10dp"
|
||||
app:layout_constrainedWidth="true"
|
||||
app:layout_constraintEnd_toEndOf="parent"
|
||||
app:layout_constraintStart_toEndOf="@id/tv_status"
|
||||
app:layout_constraintTop_toTopOf="parent">
|
||||
|
||||
<TextView
|
||||
android:id="@+id/tv_message"
|
||||
android:layout_width="wrap_content"
|
||||
android:layout_height="wrap_content"
|
||||
android:breakStrategy="balanced"
|
||||
android:ellipsize="end"
|
||||
android:fontFamily="@font/regular"
|
||||
android:hyphenationFrequency="normal"
|
||||
android:includeFontPadding="false"
|
||||
android:lineSpacingExtra="2dp"
|
||||
android:maxLines="1000"
|
||||
android:textColor="@android:color/white"
|
||||
android:textSize="15sp"
|
||||
app:layout_constrainedWidth="true"
|
||||
app:layout_constraintBottom_toBottomOf="parent"
|
||||
app:layout_constraintEnd_toEndOf="parent"
|
||||
app:layout_constraintStart_toStartOf="parent"
|
||||
app:layout_constraintTop_toTopOf="parent"
|
||||
tools:text="내가 보낸 DM 메시지입니다." />
|
||||
|
||||
</androidx.constraintlayout.widget.ConstraintLayout>
|
||||
|
||||
<ImageView
|
||||
android:id="@+id/iv_retry"
|
||||
android:layout_width="20dp"
|
||||
android:layout_height="20dp"
|
||||
android:layout_marginEnd="6dp"
|
||||
android:background="@android:color/transparent"
|
||||
android:contentDescription="@string/action_retry"
|
||||
android:src="@drawable/ic_dm_retry"
|
||||
android:visibility="gone"
|
||||
app:layout_constraintBottom_toTopOf="@id/tv_status"
|
||||
app:layout_constraintEnd_toStartOf="@id/message_container"
|
||||
tools:visibility="visible" />
|
||||
|
||||
</androidx.constraintlayout.widget.ConstraintLayout>
|
||||
76
app/src/main/res/layout/item_dm_chat_opponent_message.xml
Normal file
76
app/src/main/res/layout/item_dm_chat_opponent_message.xml
Normal file
@@ -0,0 +1,76 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
|
||||
xmlns:app="http://schemas.android.com/apk/res-auto"
|
||||
xmlns:tools="http://schemas.android.com/tools"
|
||||
android:layout_width="match_parent"
|
||||
android:layout_height="wrap_content"
|
||||
android:paddingStart="12dp"
|
||||
android:paddingTop="6dp"
|
||||
android:paddingEnd="12dp"
|
||||
android:paddingBottom="6dp">
|
||||
|
||||
<ImageView
|
||||
android:id="@+id/iv_profile"
|
||||
android:layout_width="32dp"
|
||||
android:layout_height="32dp"
|
||||
android:contentDescription="@string/a11y_profile_image"
|
||||
android:scaleType="centerCrop"
|
||||
android:src="@drawable/ic_placeholder_profile"
|
||||
app:layout_constraintStart_toStartOf="parent"
|
||||
app:layout_constraintTop_toTopOf="@id/message_group" />
|
||||
|
||||
<LinearLayout
|
||||
android:id="@+id/message_group"
|
||||
android:layout_width="wrap_content"
|
||||
android:layout_height="wrap_content"
|
||||
android:layout_marginStart="8dp"
|
||||
android:orientation="vertical"
|
||||
app:layout_constraintStart_toEndOf="@id/iv_profile"
|
||||
app:layout_constraintTop_toTopOf="parent">
|
||||
|
||||
<TextView
|
||||
android:id="@+id/tv_name"
|
||||
android:layout_width="wrap_content"
|
||||
android:layout_height="wrap_content"
|
||||
android:layout_marginBottom="2dp"
|
||||
android:ellipsize="end"
|
||||
android:fontFamily="@font/regular"
|
||||
android:includeFontPadding="false"
|
||||
android:maxLines="1"
|
||||
android:textColor="@android:color/white"
|
||||
android:textSize="12sp"
|
||||
tools:text="Creator Name" />
|
||||
|
||||
<androidx.constraintlayout.widget.ConstraintLayout
|
||||
android:id="@+id/message_container"
|
||||
android:layout_width="wrap_content"
|
||||
android:layout_height="wrap_content"
|
||||
android:background="@drawable/bg_chat_ai_message"
|
||||
android:paddingHorizontal="10dp"
|
||||
android:paddingVertical="8dp">
|
||||
|
||||
<TextView
|
||||
android:id="@+id/tv_message"
|
||||
android:layout_width="wrap_content"
|
||||
android:layout_height="wrap_content"
|
||||
android:breakStrategy="balanced"
|
||||
android:ellipsize="end"
|
||||
android:fontFamily="@font/regular"
|
||||
android:hyphenationFrequency="normal"
|
||||
android:includeFontPadding="false"
|
||||
android:lineSpacingExtra="2dp"
|
||||
android:maxLines="1000"
|
||||
android:textColor="@android:color/white"
|
||||
android:textSize="15sp"
|
||||
app:layout_constrainedWidth="true"
|
||||
app:layout_constraintBottom_toBottomOf="parent"
|
||||
app:layout_constraintEnd_toEndOf="parent"
|
||||
app:layout_constraintStart_toStartOf="parent"
|
||||
app:layout_constraintTop_toTopOf="parent"
|
||||
tools:text="상대가 보낸 DM 메시지입니다." />
|
||||
|
||||
</androidx.constraintlayout.widget.ConstraintLayout>
|
||||
|
||||
</LinearLayout>
|
||||
|
||||
</androidx.constraintlayout.widget.ConstraintLayout>
|
||||
Reference in New Issue
Block a user