지금 라이브 중 전체보기 - UI 표시 방식 수정

- 1줄에 1개 보이던 리스트 방식에서 1줄에 3개씩 표시하는 그리드 방식으로 변경

app/src/main/java/kr/co/vividnext/sodalive/live/now/all/LiveNowAllActivity.kt

@@ -6,6 +6,7 @@ import android.graphics.Rect
 import android.os.Bundle
 import android.view.View
 import android.widget.Toast
+import androidx.recyclerview.widget.GridLayoutManager
 import androidx.recyclerview.widget.LinearLayoutManager
 import androidx.recyclerview.widget.RecyclerView
 import kr.co.vividnext.sodalive.audio_content.AudioContentPlayService
@@ -17,6 +18,7 @@ import kr.co.vividnext.sodalive.databinding.ActivityLiveNowAllBinding
 import kr.co.vividnext.sodalive.extensions.dpToPx
 import kr.co.vividnext.sodalive.extensions.moneyFormat
 import kr.co.vividnext.sodalive.live.LiveViewModel
+import kr.co.vividnext.sodalive.live.now.LiveNowAdapter
 import kr.co.vividnext.sodalive.live.room.LiveRoomActivity
 import kr.co.vividnext.sodalive.live.room.detail.LiveRoomDetailFragment
 import kr.co.vividnext.sodalive.live.room.dialog.LivePaymentDialog
@@ -63,12 +65,7 @@ class LiveNowAllActivity : BaseActivity<ActivityLiveNowAllBinding>(
             )
         }
 
-        recyclerView.layoutManager = LinearLayoutManager(
+        recyclerView.layoutManager = GridLayoutManager(this, 3)
-            applicationContext,
-            LinearLayoutManager.VERTICAL,
-            false
-        )
-
         recyclerView.addItemDecoration(object : RecyclerView.ItemDecoration() {
             override fun getItemOffsets(
                 outRect: Rect,
@@ -78,27 +75,13 @@ class LiveNowAllActivity : BaseActivity<ActivityLiveNowAllBinding>(
             ) {
                 super.getItemOffsets(outRect, view, parent, state)
 
-                when (parent.getChildAdapterPosition(view)) {
+                outRect.top = 16f.dpToPx().toInt()
-                    0 -> {
+                outRect.bottom = 16f.dpToPx().toInt()
-                        outRect.top = 0.dpToPx().toInt()
+                outRect.left = 4f.dpToPx().toInt()
-                        outRect.bottom = 6.7f.dpToPx().toInt()
+                outRect.right = 4f.dpToPx().toInt()
-                    }
-
-                    adapter.itemCount - 1 -> {
-                        outRect.top = 6.7f.dpToPx().toInt()
-                        outRect.bottom = 0.dpToPx().toInt()
-                    }
-
-                    else -> {
-                        outRect.top = 6.7f.dpToPx().toInt()
-                        outRect.bottom = 6.7f.dpToPx().toInt()
-                    }
-                }
             }
         })
 
-        recyclerView.adapter = adapter
-
         recyclerView.addOnScrollListener(object : RecyclerView.OnScrollListener() {
             override fun onScrolled(recyclerView: RecyclerView, dx: Int, dy: Int) {
                 super.onScrolled(recyclerView, dx, dy)
@@ -113,6 +96,8 @@ class LiveNowAllActivity : BaseActivity<ActivityLiveNowAllBinding>(
             }
         })
 
+        recyclerView.adapter = adapter
+
         binding.swipeRefreshLayout.setOnRefreshListener {
             adapter.clear()
             viewModel.page = 1

app/src/main/java/kr/co/vividnext/sodalive/live/now/all/LiveNowAllAdapter.kt

@@ -8,10 +8,12 @@ import android.view.ViewGroup
 import androidx.core.content.ContextCompat
 import androidx.recyclerview.widget.RecyclerView
 import coil.load
+import coil.transform.CircleCropTransformation
 import coil.transform.RoundedCornersTransformation
 import kr.co.vividnext.sodalive.R
 import kr.co.vividnext.sodalive.databinding.ItemLiveNowAllBinding
 import kr.co.vividnext.sodalive.extensions.dpToPx
+import kr.co.vividnext.sodalive.extensions.loadUrl
 import kr.co.vividnext.sodalive.extensions.moneyFormat
 import kr.co.vividnext.sodalive.live.GetRoomListResponse
 
@@ -27,48 +29,56 @@ class LiveNowAllAdapter(
     ) : RecyclerView.ViewHolder(binding.root) {
         @SuppressLint("SetTextI18n")
         fun bind(item: GetRoomListResponse) {
-            binding.ivCover.load(item.coverImageUrl) {
+            binding.ivCover.loadUrl(item.coverImageUrl) {
                 crossfade(true)
-                placeholder(R.drawable.bg_placeholder)
+                placeholder(R.drawable.ic_place_holder)
                 transformations(RoundedCornersTransformation(4.7f.dpToPx()))
             }
-            binding.tvNickname.text = item.creatorNickname
-            binding.tvTitle.text = item.title
             binding.ivLock.visibility = if (item.isPrivateRoom) {
                 View.VISIBLE
             } else {
                 View.GONE
             }
 
-            if (item.numberOfPeople > item.numberOfParticipate) {
+            if (item.price > 0) {
-                binding.tvAvailableParticipate.text = "참여가능"
+                binding.tvPrice.text = "${item.price}"
-                binding.tvAvailableParticipate.setTextColor(
-                    ContextCompat.getColor(
-                        context,
-                        R.color.color_3bb9f1
-                    )
-                )
-            } else {
-                binding.tvAvailableParticipate.text = "Sold out"
-                binding.tvAvailableParticipate.setTextColor(
-                    ContextCompat.getColor(
-                        context,
-                        R.color.color_ffd300
-                    )
-                )
-            }
-
-            if (item.price < 1) {
-                binding.tvPrice.text = "무료"
-                binding.tvPrice.setCompoundDrawables(null, null, null, null)
-            } else {
-                binding.tvPrice.text = item.price.moneyFormat()
                 binding.tvPrice.setCompoundDrawablesWithIntrinsicBounds(
+                    R.drawable.ic_can_white,
                     0,
                     0,
-                    R.drawable.ic_can,
                     0
                 )
+                binding.tvPrice.setBackgroundResource(R.drawable.bg_round_corner_13_3_dd4500)
+            } else {
+                binding.tvPrice.text = "무료"
+                binding.tvPrice.setCompoundDrawables(null, null, null, null)
+                binding.tvPrice.setBackgroundResource(R.drawable.bg_round_corner_13_3_111111)
+            }
+
+            if (item.tags.isNotEmpty()) {
+                binding.tvTags.visibility = View.VISIBLE
+                binding.tvTags.text = item.tags.joinToString(" ") { "#$it" }
+            } else {
+                binding.tvTags.visibility = View.GONE
+            }
+
+            binding.tvTitle.text = item.title
+            binding.tvNickname.text = item.creatorNickname
+            binding.ivProfile.loadUrl(item.creatorProfileImage) {
+                crossfade(true)
+                placeholder(R.drawable.ic_place_holder)
+                transformations(CircleCropTransformation())
+            }
+
+            if (item.numberOfPeople > item.numberOfParticipate) {
+                binding.tvRemainingParticipantNumber.visibility = View.VISIBLE
+                binding.tvRemainingParticipant.text = "잔여"
+                binding.tvRemainingParticipantNumber.text =
+                    "${item.numberOfPeople - item.numberOfParticipate}"
+            } else {
+                binding.tvRemainingParticipantNumber.visibility = View.GONE
+                binding.tvRemainingParticipant.text = "Sold out"
+                binding.tvRemainingParticipantNumber.text = ""
             }
 
             binding.root.setOnClickListener { onClick(item) }

app/src/main/res/layout/activity_live_now_all.xml

@@ -2,6 +2,7 @@
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
+    android:background="@color/black"
     android:orientation="vertical">
 
     <include

app/src/main/res/layout/item_live_now_all.xml

@@ -2,25 +2,52 @@
 <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_width="wrap_content"
     android:layout_height="wrap_content">
 
     <ImageView
         android:id="@+id/iv_cover"
-        android:layout_width="80dp"
+        android:layout_width="102dp"
-        android:layout_height="116.7dp"
+        android:layout_height="144dp"
         android:contentDescription="@null"
         android:scaleType="centerCrop"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintTop_toTopOf="parent"
-        tools:src="@mipmap/ic_launcher" />
+        tools:src="@drawable/ic_launcher_background" />
+
+    <View
+        android:layout_width="0dp"
+        android:layout_height="0dp"
+        android:background="@drawable/gradient_live_room_item"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent" />
+
+    <TextView
+        android:id="@+id/tv_price"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_marginStart="3.3dp"
+        android:layout_marginTop="3.3dp"
+        android:drawablePadding="1dp"
+        android:fontFamily="@font/gmarket_sans_medium"
+        android:paddingHorizontal="7.3dp"
+        android:paddingVertical="4dp"
+        android:textColor="@color/white"
+        android:textSize="10sp"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent"
+        tools:background="@drawable/bg_round_corner_13_3_111111"
+        tools:ignore="SmallSp"
+        tools:text="유료" />
 
     <ImageView
         android:id="@+id/iv_lock"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
-        android:layout_marginTop="13.3dp"
+        android:layout_marginTop="3.3dp"
-        android:layout_marginEnd="13.3dp"
+        android:layout_marginEnd="3.3dp"
         android:background="@drawable/bg_circle_b3333333"
         android:contentDescription="@null"
         android:padding="2.7dp"
@@ -29,73 +56,102 @@
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintTop_toTopOf="parent" />
 
-    <TextView
+    <LinearLayout
-        android:id="@+id/tv_nickname"
+        android:layout_width="wrap_content"
-        android:layout_width="0dp"
+        android:layout_height="wrap_content"
+        android:layout_marginEnd="3.3dp"
+        android:layout_marginBottom="11dp"
+        android:background="@drawable/bg_round_corner_13_3_b3333333"
+        android:gravity="center"
+        android:orientation="horizontal"
+        android:paddingHorizontal="4dp"
+        android:paddingVertical="3dp"
+        app:layout_constraintBottom_toTopOf="@+id/tv_title"
+        app:layout_constraintEnd_toEndOf="parent">
+
+        <TextView
+            android:id="@+id/tv_remaining_participant"
+            android:layout_width="wrap_content"
             android:layout_height="wrap_content"
-        android:layout_marginStart="20dp"
-        android:layout_marginTop="13.3dp"
-        android:layout_marginEnd="6.7dp"
             android:fontFamily="@font/gmarket_sans_medium"
-        android:textColor="@color/color_bbbbbb"
+            android:textColor="@color/color_eeeeee"
-        android:textSize="11.3sp"
+            android:textSize="10sp"
-        app:layout_constraintEnd_toStartOf="@+id/iv_lock"
+            tools:ignore="SmallSp"
-        app:layout_constraintStart_toEndOf="@+id/iv_cover"
+            tools:text="잔여" />
-        app:layout_constraintTop_toTopOf="@+id/iv_cover"
+
-        app:layout_goneMarginEnd="20dp"
+        <TextView
-        tools:text="사냥꾼 1004" />
+            android:id="@+id/tv_remaining_participant_number"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_marginStart="2dp"
+            android:fontFamily="@font/gmarket_sans_medium"
+            android:textColor="@color/color_3bb9f1"
+            android:textSize="10sp"
+            tools:ignore="SmallSp"
+            tools:text="3" />
+    </LinearLayout>
 
     <TextView
         android:id="@+id/tv_title"
         android:layout_width="0dp"
         android:layout_height="wrap_content"
-        android:layout_marginTop="4.3dp"
+        android:layout_marginTop="8dp"
-        android:layout_marginEnd="6.7dp"
         android:ellipsize="end"
         android:fontFamily="@font/gmarket_sans_medium"
         android:maxLines="2"
-        android:textColor="@color/color_e2e2e2"
+        android:textColor="@color/color_eeeeee"
-        android:textSize="15.3sp"
+        android:textSize="12sp"
-        app:layout_constraintEnd_toStartOf="@+id/iv_lock"
+        app:layout_constraintEnd_toEndOf="@+id/iv_cover"
-        app:layout_constraintStart_toStartOf="@+id/tv_nickname"
+        app:layout_constraintStart_toStartOf="@+id/iv_cover"
-        app:layout_constraintTop_toBottomOf="@+id/tv_nickname"
+        app:layout_constraintTop_toBottomOf="@+id/iv_cover"
-        app:layout_goneMarginEnd="20dp"
+        tools:text="test" />
-        tools:text="여자들이 좋아하는 남자 스타일은?여자들이 좋아하는 남자 스타일은?여자들이 좋아하는 남자 스타일은?" />
+
+    <LinearLayout
+        android:layout_width="0dp"
+        android:layout_height="wrap_content"
+        android:orientation="vertical"
+        app:layout_constraintEnd_toEndOf="@+id/tv_title"
+        app:layout_constraintStart_toStartOf="@+id/tv_title"
+        app:layout_constraintTop_toBottomOf="@+id/tv_title">
 
         <TextView
-        android:id="@+id/tv_available_participate"
+            android:id="@+id/tv_tags"
-        android:layout_width="wrap_content"
+            android:layout_width="match_parent"
             android:layout_height="wrap_content"
-        android:layout_marginBottom="3.3dp"
+            android:layout_marginTop="5.3dp"
             android:fontFamily="@font/gmarket_sans_medium"
             android:textColor="@color/color_3bb9f1"
-        android:textSize="12sp"
+            android:textSize="11sp"
-        app:layout_constraintBottom_toBottomOf="@+id/iv_cover"
+            app:layout_constraintEnd_toEndOf="@+id/tv_title"
             app:layout_constraintStart_toStartOf="@+id/tv_title"
-        tools:text="참여가능" />
+            app:layout_constraintTop_toBottomOf="@+id/tv_title"
+            tools:text="#팬미팅 #힐링" />
+
+        <LinearLayout
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:layout_marginTop="5.3dp"
+            android:gravity="center_vertical"
+            android:orientation="horizontal"
+            tools:ignore="UseCompoundDrawables">
+
+            <ImageView
+                android:id="@+id/iv_profile"
+                android:layout_width="21.3dp"
+                android:layout_height="21.3dp"
+                android:contentDescription="@null" />
 
             <TextView
-        android:id="@+id/tv_price"
+                android:id="@+id/tv_nickname"
-        android:layout_width="wrap_content"
+                android:layout_width="match_parent"
                 android:layout_height="wrap_content"
-        android:drawablePadding="6.7dp"
+                android:layout_marginStart="5.3dp"
-        android:fontFamily="@font/gmarket_sans_bold"
+                android:fontFamily="@font/gmarket_sans_medium"
-        android:gravity="center"
+                android:gravity="center_vertical"
-        android:textColor="@color/color_eeeeee"
+                android:textColor="@color/color_777777"
-        android:textSize="15.3sp"
+                android:textSize="10sp"
-        app:drawableEndCompat="@drawable/ic_can"
+                tools:ignore="SmallSp"
-        app:layout_constraintBottom_toBottomOf="@+id/tv_available_participate"
+                tools:text="user8" />
-        app:layout_constraintEnd_toEndOf="parent"
+        </LinearLayout>
-        app:layout_constraintTop_toTopOf="@+id/tv_available_participate"
+    </LinearLayout>
-        tools:text="500" />
-
-    <View
-        android:layout_width="0dp"
-        android:layout_height="1dp"
-        android:layout_marginTop="13.3dp"
-        android:background="@color/color_88909090"
-        app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toBottomOf="@+id/tv_available_participate" />
-
 </androidx.constraintlayout.widget.ConstraintLayout>