[Nunu/#18] feat: 4주차 구현 (#21)

* [nunu/#18] feat: Thread로 타이머 구현

- 시간이 흐를 때마다 화면에 표시
- 1분으로 미리듣기 구현
- MM:SS 형식으로 포맷 형식 변경
- 문제>> 상단의 내리는 버튼을 눌렀다가 다시 들어가면 새로 시작이라는 것…..

* [nunu/#18] feat: Splash Activity 구현

- Splash Activity 추가
- AndroidManifest.xml 수정
- themes.xml 수정

* [nunu/#18] feat: SongActivity Time Seekbar 구현

- 타이머 중지 및 재실행 구현
- 파란바 타이머 초에 맞춰 회색바 기준으로 길이 조절

문제
- 색 적용 제대로 안됨
- 초기 시작시 파란바 길이 엄청 길어졌다가 시작됨

UMC_6th/app/src/main/AndroidManifest.xml

@@ -12,15 +12,17 @@
         android:supportsRtl="true"
         android:theme="@style/Theme.UMC_6th"
         tools:targetApi="31">
-        <activity
-            android:name=".MainActivity"
+        <activity android:name=".SplashActivity"
             android:exported="true">
             <intent-filter>
                 <action android:name="android.intent.action.MAIN" />
-
                 <category android:name="android.intent.category.LAUNCHER" />
             </intent-filter>
         </activity>
+        <activity
+            android:name=".MainActivity"
+            android:exported="true">
+        </activity>
         <activity
             android:name=".SongActivity"
             android:exported="true"

UMC_6th/app/src/main/java/com/example/umc_6th/SongActivity.kt

@@ -5,12 +5,20 @@ import android.content.Intent
 import android.graphics.PorterDuff
 import android.os.Bundle
 import android.os.PersistableBundle
+import android.view.View
 import androidx.appcompat.app.AppCompatActivity
 import androidx.compose.ui.graphics.Color
+import androidx.core.content.ContextCompat
 import com.example.umc_6th.databinding.ActivitySongBinding
+import kotlin.math.log
 
 class SongActivity : AppCompatActivity() {
     private lateinit var binding : ActivitySongBinding
+    private var maxBarWidth = 0
+    private var timerThread: Thread? = null
+    @Volatile private var isTimerRunning: Boolean = false
+    private var elapsedSeconds = 0
+    private val totalSeconds = 60
 
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
@@ -23,27 +31,78 @@ class SongActivity : AppCompatActivity() {
         binding.txSongTitle.text = songTitle
         binding.txSongArtist.text = songArtist
 
-        binding.imgSongRandom.setOnClickListener(){
+        setupColorFilters()
+        setupButtonListeners()
+
+        binding.imgSongDown.setOnClickListener {
+            val returnIntent = Intent().apply {
+                putExtra("albumTitle", "LILAC")
+            }
+            setResult(Activity.RESULT_OK, returnIntent)
+            finish()
+        }
+
+        binding.viewSongBar.post{
+            maxBarWidth = binding.viewSongBar.width
+            binding.viewSongBarBlue.layoutParams.width=1
+        }
+
+    }
+
+    private fun setupColorFilters() {
+        binding.imgSongRandom.setOnClickListener {
             if (binding.imgSongRandom.colorFilter != null) {
                 binding.imgSongRandom.clearColorFilter()
             } else {
-                binding.imgSongRandom.setColorFilter(R.color.flo, PorterDuff.Mode.SRC_IN)
+                binding.imgSongRandom.setColorFilter(ContextCompat.getColor(this, R.color.flo), PorterDuff.Mode.SRC_IN)
             }
         }
-        binding.imgSongRepeat.setOnClickListener(){
+
+        binding.imgSongRepeat.setOnClickListener {
             if (binding.imgSongRepeat.colorFilter != null) {
                 binding.imgSongRepeat.clearColorFilter()
             } else {
-                binding.imgSongRepeat.setColorFilter(R.color.flo, PorterDuff.Mode.SRC_IN)
+                binding.imgSongRepeat.setColorFilter(ContextCompat.getColor(this, R.color.flo), PorterDuff.Mode.SRC_IN)
             }
         }
+    }
 
-        binding.imgSongDown.setOnClickListener {
-            val returnIntent = Intent().apply {
-                putExtra("albumTitle", "LILAC")
-            }
-            setResult(Activity.RESULT_OK, returnIntent)
-            finish()
+    private fun setupButtonListeners() {
+        binding.imgSongPlayBtn.setOnClickListener {
+            isTimerRunning = true
+            binding.imgSongPlayPauseBtn.visibility = View.VISIBLE
+            binding.imgSongPlayBtn.visibility = View.GONE
+            startOrResumeTimer()
+        }
+
+        binding.imgSongPlayPauseBtn.setOnClickListener {
+            isTimerRunning = false
+            binding.imgSongPlayBtn.visibility = View.VISIBLE
+            binding.imgSongPlayPauseBtn.visibility = View.GONE
+        }
+    }
+
+    private fun startOrResumeTimer() {
+        if (timerThread == null || !timerThread!!.isAlive) {
+            startTimer(totalSeconds)
         }
     }
+
+    private fun startTimer(totalSeconds: Int) {
+        timerThread = Thread {
+            while (elapsedSeconds <= totalSeconds && isTimerRunning) {
+                val minutes = elapsedSeconds / 60
+                val seconds = elapsedSeconds % 60
+                val newWidth = maxBarWidth * elapsedSeconds / totalSeconds
+                runOnUiThread {
+                    val layoutParams = binding.viewSongBarBlue.layoutParams
+                    layoutParams.width = newWidth
+                    binding.viewSongBarBlue.layoutParams = layoutParams
+                    binding.txSongBarStartTime.text = String.format("%02d:%02d", minutes, seconds)
+                }
+                Thread.sleep(1000)
+                elapsedSeconds++
+            }
+        }.apply { start() }
+    }
 }

UMC_6th/app/src/main/java/com/example/umc_6th/SplashActivity.kt

@@ -0,0 +1,22 @@
+package com.example.umc_6th
+
+import android.content.Intent
+import android.os.Bundle
+import androidx.appcompat.app.AppCompatActivity
+import com.example.umc_6th.databinding.ActivitySplashBinding
+
+class SplashActivity :AppCompatActivity() {
+    private lateinit var binding : ActivitySplashBinding
+
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+        binding = ActivitySplashBinding.inflate(layoutInflater)
+        setContentView(binding.root)
+
+        android.os.Handler().postDelayed({
+            startActivity(Intent(this, MainActivity::class.java))
+            finish()
+            overridePendingTransition(0, 0)
+        }, 2000)
+    }
+}

UMC_6th/app/src/main/res/layout/activity_song.xml

@@ -169,7 +169,7 @@
 
     <View
         android:id="@+id/viewSongBarBlue"
-        android:layout_width="35dp"
+        android:layout_width="1dp"
         android:layout_height="2dp"
         android:layout_marginStart="20dp"
         android:background="@color/flo"
@@ -181,7 +181,7 @@
         android:id="@+id/txSongBarStartTime"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
-        android:text="00:08"
+        android:text="00:00"
         android:textColor="@color/flo"
         app:layout_constraintStart_toStartOf="@+id/viewSongBar"
         app:layout_constraintTop_toBottomOf="@+id/viewSongBar" />

UMC_6th/app/src/main/res/layout/activity_splash.xml

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    android:theme="@style/Theme.AppCompat.NoActionBar"
+    android:background="@color/white">
+
+    <ImageView
+        android:id="@+id/imageView"
+        android:layout_width="150dp"
+        android:layout_height="wrap_content"
+        android:layout_centerInParent="true"
+        android:src="@drawable/ic_flo_logo" />
+</RelativeLayout>

UMC_6th/app/src/main/res/values/themes.xml

@@ -3,7 +3,12 @@
     <style name="Base.Theme.UMC_6th" parent="Theme.Material3.DayNight.NoActionBar">
         <!-- Customize your light theme here. -->
         <!-- <item name="colorPrimary">@color/my_light_primary</item> -->
+
     </style>
 
-    <style name="Theme.UMC_6th" parent="Base.Theme.UMC_6th" />
+    <style name="Theme.UMC_6th" parent="Base.Theme.UMC_6th">
+        <item name="android:windowDisablePreview">true</item>
+        <item name="android:windowBackground">@null</item>
+        <item name="android:windowIsTranslucent">true</item>
+    </style>
 </resources>