Merge pull request #209 from boostcampwm2023/feature/android/174

바텀 재생 바 UI 구성
boostcampwm2023 · Nov 28, 2023 · b8c1474 · b8c1474
2 parents a4c8143 + bfb21ed
commit b8c1474
Show file tree

Hide file tree

Showing 6 changed files with 178 additions and 0 deletions.
diff --git a/android/app/src/main/res/layout/activity_main.xml b/android/app/src/main/res/layout/activity_main.xml
@@ -20,6 +20,20 @@
             app:layout_constraintTop_toTopOf="parent"
             app:navGraph="@navigation/catchytape_navigation" />
 
+        <com.ohdodok.catchytape.feature.player.PlayerControlView
+            android:layout_width="0dp"
+            android:layout_height="65dp"
+            app:artist="아티스트"
+            app:duration="100"
+            app:isPlaying="false"
+            app:layout_constraintBottom_toTopOf="@id/bottom_nav"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toStartOf="parent"
+            app:progress="65"
+            app:thumbnailUrl="https://picsum.photos/200"
+            app:title="제목" />
+<!--        app:onPlayButtonClick="@{() -> viewModel.doSomething()}" -->
+
         <com.google.android.material.bottomnavigation.BottomNavigationView
             android:id="@+id/bottom_nav"
             android:layout_width="0dp"

diff --git a/android/core/ui/src/main/res/values/strings.xml b/android/core/ui/src/main/res/values/strings.xml
@@ -14,6 +14,7 @@
     <string name="confirm">확인</string>
     <string name="complete">완료</string>
     <string name="save">저장</string>
+    <string name="play">썸네일 이미지</string>
 
     <string name="recently_played_song">최근 재생한 노래</string>
     <string name="recently_added_song">최근 추가된 노래</string>

diff --git a/...d/feature/player/src/main/java/com/ohdodok/catchytape/feature/player/PlayerControlView.kt b/...d/feature/player/src/main/java/com/ohdodok/catchytape/feature/player/PlayerControlView.kt
@@ -0,0 +1,76 @@
+package com.ohdodok.catchytape.feature.player
+
+import android.content.Context
+import android.util.AttributeSet
+import android.widget.ImageButton
+import android.widget.ImageView
+import android.widget.TextView
+import androidx.appcompat.content.res.AppCompatResources
+import androidx.constraintlayout.widget.ConstraintLayout
+import com.google.android.material.progressindicator.LinearProgressIndicator
+import com.ohdodok.catchytape.core.ui.R.*
+import com.ohdodok.catchytape.core.ui.bindImg
+import kotlin.properties.Delegates
+
+class PlayerControlView(context: Context, attrs: AttributeSet) : ConstraintLayout(context, attrs) {
+
+    private lateinit var thumbnailUrl: String
+    private lateinit var title: String
+    private lateinit var artist: String
+    private var isPlaying: Boolean by Delegates.notNull()
+    private var progress: Int by Delegates.notNull()
+    private var duration: Int by Delegates.notNull()
+
+    init {
+        initAttrs(attrs)
+        initView()
+    }
+
+    private fun initAttrs(attrs: AttributeSet) {
+        context.theme.obtainStyledAttributes(
+            attrs,
+            R.styleable.PlayerBarView,
+            0, 0
+        ).apply {
+            try {
+                thumbnailUrl = getString(R.styleable.PlayerBarView_thumbnailUrl) ?: ""
+                title = getString(R.styleable.PlayerBarView_title) ?: "" // 썸네일
+                artist = getString(R.styleable.PlayerBarView_artist) ?: ""
+                isPlaying = getBoolean(R.styleable.PlayerBarView_isPlaying, false)
+                progress = getInt(R.styleable.PlayerBarView_progress, 0)
+                duration = getInt(R.styleable.PlayerBarView_duration, 0)
+            } finally {
+                recycle()
+            }
+        }
+    }
+
+    private fun initView() {
+        inflate(context, R.layout.view_player_control, this)
+
+        val thumbnailView: ImageView = findViewById(R.id.iv_thumbnail)
+        val titleView: TextView = findViewById(R.id.tv_title)
+        val artistView: TextView = findViewById(R.id.tv_artist)
+        val playButton: ImageButton = findViewById(R.id.ib_play)
+        val indicator: LinearProgressIndicator = findViewById(R.id.lpi_player_progress)
+
+        thumbnailView.bindImg(thumbnailUrl)
+
+        titleView.text = title
+        artistView.text = artist
+
+        val buttonDrawable =
+            if (isPlaying) AppCompatResources.getDrawable(context, drawable.ic_pause)
+            else AppCompatResources.getDrawable(context, drawable.ic_play)
+        playButton.setImageDrawable(buttonDrawable)
+
+        indicator.progress = progress
+        indicator.max = duration
+    }
+
+    fun setOnPlayButtonClick(onPlayButtonClick: () -> Unit) {
+        val playButton: ImageButton = findViewById(R.id.ib_play)
+
+        playButton.setOnClickListener { onPlayButtonClick() }
+    }
+}
diff --git a/android/feature/player/src/main/res/layout/view_player_control.xml b/android/feature/player/src/main/res/layout/view_player_control.xml
@@ -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="65dp"
+    android:background="@color/surface_bright">
+
+    <ImageView
+        android:id="@+id/iv_thumbnail"
+        android:layout_width="40dp"
+        android:layout_height="40dp"
+        android:layout_marginStart="@dimen/margin_horizontal"
+        android:scaleType="centerCrop"
+        app:layout_constraintBottom_toTopOf="@id/lpi_player_progress"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent"
+        tools:background="@color/on_surface_variant" />
+
+    <TextView
+        android:id="@+id/tv_title"
+        style="@style/BodyMedium"
+        android:layout_width="0dp"
+        android:layout_height="wrap_content"
+        android:layout_marginStart="@dimen/medium"
+        android:ellipsize="end"
+        android:maxLines="1"
+        app:layout_constraintBottom_toTopOf="@id/tv_artist"
+        app:layout_constraintEnd_toStartOf="@id/ib_play"
+        app:layout_constraintStart_toEndOf="@id/iv_thumbnail"
+        app:layout_constraintTop_toTopOf="@id/iv_thumbnail"
+        app:layout_constraintVertical_chainStyle="packed"
+        tools:text="josee!" />
+
+    <TextView
+        android:id="@+id/tv_artist"
+        style="@style/BodySmall"
+        android:layout_width="0dp"
+        android:layout_height="wrap_content"
+        android:ellipsize="end"
+        android:maxLines="1"
+        android:textColor="@color/on_surface_variant"
+        app:layout_constraintBottom_toBottomOf="@id/iv_thumbnail"
+        app:layout_constraintStart_toStartOf="@id/tv_title"
+        app:layout_constraintTop_toBottomOf="@id/tv_title"
+        tools:text="데이먼스 이어" />
+
+    <ImageButton
+        android:id="@+id/ib_play"
+        android:layout_width="48dp"
+        android:layout_height="48dp"
+        android:layout_marginEnd="6dp"
+        android:background="@android:color/transparent"
+        android:contentDescription="@string/play"
+        android:src="@drawable/ic_play"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintTop_toTopOf="parent" />
+
+    <com.google.android.material.progressindicator.LinearProgressIndicator
+        android:id="@+id/lpi_player_progress"
+        android:layout_width="0dp"
+        android:layout_height="1dp"
+        app:indicatorColor="@color/key"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:trackColor="@color/white"
+        app:trackThickness="1dp"
+        tools:progress="65" />
+
+</androidx.constraintlayout.widget.ConstraintLayout>
diff --git a/android/feature/player/src/main/res/values/attrs.xml b/android/feature/player/src/main/res/values/attrs.xml
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <declare-styleable name="PlayerBarView">
+        <attr name="thumbnailUrl" format="string" />
+        <attr name="title" format="string" />
+        <attr name="artist" format="string" />
+        <attr name="isPlaying" format="boolean" />
+        <attr name="progress" format="integer" />
+        <attr name="duration" format="integer" />
+    </declare-styleable>
+</resources>
diff --git a/android/feature/player/src/main/res/values/strings.xml b/android/feature/player/src/main/res/values/strings.xml
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <string name="play">재생하기</string>
+</resources>