#176 [chore] 툴팁 적용, 변수명 변경

Team-Sopetit · Aug 16, 2024 · e5d85af · e5d85af
1 parent 47a8863
commit e5d85af
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 73 deletions.
diff --git a/app/build.gradle.kts b/app/build.gradle.kts
@@ -137,6 +137,9 @@ dependencies {
 
     // Coroutine
     implementation("org.jetbrains.kotlinx:kotlinx-coroutines-android:1.3.3")
+
+    // Tool Tip
+    implementation("com.github.skydoves:balloon:1.6.5")
 }
 
 fun getApiKey(propertyKey: String): String {

diff --git a/app/src/main/java/com/sopetit/softie/ui/addroutine/list/AddRoutineActivity.kt b/app/src/main/java/com/sopetit/softie/ui/addroutine/list/AddRoutineActivity.kt
@@ -1,8 +1,12 @@
 package com.sopetit.softie.ui.addroutine.list
 
 import android.os.Bundle
+import android.view.View
+import android.widget.ImageView
 import androidx.activity.viewModels
-import androidx.recyclerview.widget.RecyclerView
+import com.skydoves.balloon.createBalloon
+import com.skydoves.balloon.overlay.BalloonOverlayAnimation
+import com.skydoves.balloon.overlay.BalloonOverlayCircle
 import com.sopetit.softie.R
 import com.sopetit.softie.databinding.ActivityAddRoutineListBinding
 import com.sopetit.softie.util.HorizontalItemDecoration
@@ -13,8 +17,7 @@ import com.sopetit.softie.util.setStatusBarColorFromResource
 import dagger.hilt.android.AndroidEntryPoint
 
 @AndroidEntryPoint
-class AddRoutineActivity :
-    BindingActivity<ActivityAddRoutineListBinding>(R.layout.activity_add_routine_list) {
+class AddRoutineActivity : BindingActivity<ActivityAddRoutineListBinding>(R.layout.activity_add_routine_list) {
     private val makerCardPagerAdapter = MakerCardAdapter()
     private val viewModel by viewModels<AddRoutineViewModel>()
     private var routineThemeListAdapter: RoutineThemeListAdapter? = null
@@ -24,21 +27,46 @@ class AddRoutineActivity :
         binding.viewModel = viewModel
         setStatusBarColorFromResource(R.color.background)
 
-        startMakerHelpModal()
+        startMakerTooltipModal()
         setBackEnter()
         setInitBinding()
         setAddRoutineListCardPagerAdapter()
         setRoutineThemeListAdapter()
         setItemDeco()
+        setupUI()
         setupObservers()
     }
 
-    private fun startMakerHelpModal() {
-        binding.ivAddRoutineListMakerHelp.setSingleOnClickListener {
-            MakerHelpDialogFragment().show(supportFragmentManager, "MakerHelpDialog")
+    private fun startMakerTooltipModal() {
+        binding.ivAddRoutineListMakerHelp.setSingleOnClickListener { view ->
+            showTooltip(view)
         }
     }
 
+    private fun showTooltip(anchor: View) {
+        val balloon =
+            createBalloon(this) {
+                setLayout(R.layout.tooltip_maker_help)
+                setBackgroundDrawableResource(R.drawable.shape_gray0_fill_10_rect)
+                setIsVisibleArrow(false)
+                setDismissWhenClicked(false)
+                setIsVisibleOverlay(true)
+                setOverlayShape(BalloonOverlayCircle(radius = 0f))
+                setOverlayColorResource(R.color.gray950)
+                setBalloonOverlayAnimation(BalloonOverlayAnimation.FADE)
+                setDismissWhenOverlayClicked(false)
+                setLifecycleOwner(lifecycleOwner)
+            }
+
+        balloon.setOnBalloonInitializedListener { view ->
+            view.findViewById<ImageView>(R.id.iv_maker_help_tooltip_exit)?.setOnClickListener {
+                balloon.dismiss()
+            }
+        }
+
+        balloon.showAlignBottom(anchor)
+    }
+
     private fun setBackEnter() {
         binding.ivAddRoutineListBackArrow.setSingleOnClickListener {
             finish()
@@ -64,20 +92,28 @@ class AddRoutineActivity :
     }
 
     private fun setItemDeco() {
-        val horizontalDecoration = HorizontalItemDecoration(
-            context = this,
-            firstItemMargin = R.dimen.maker_recycler_view_first_margin,
-            itemMargin = R.dimen.maker_recycler_view_margin
-        )
-        val verticalDecoration = VerticalItemDecoration(
-            context = this,
-            firstItemMargin = R.dimen.add_routine_recycler_view_first_margin,
-            itemMargin = R.dimen.add_routine_recycler_view_margin
-        )
+        val horizontalDecoration =
+            HorizontalItemDecoration(
+                context = this,
+                firstItemMargin = R.dimen.maker_recycler_view_first_margin,
+                itemMargin = R.dimen.maker_recycler_view_margin
+            )
+        val verticalDecoration =
+            VerticalItemDecoration(
+                context = this,
+                firstItemMargin = R.dimen.add_routine_recycler_view_first_margin,
+                itemMargin = R.dimen.add_routine_recycler_view_margin
+            )
         binding.rvAddRoutineListMakerCard.addItemDecoration(horizontalDecoration)
         binding.rvAddList.addItemDecoration(verticalDecoration)
     }
 
+    private fun setupUI() {
+        binding.ivAddRoutineListMakerHelp.setOnClickListener {
+            showTooltip(it)
+        }
+    }
+
     private fun setupObservers() {
         viewModel.addRoutineThemeListResponse.observe(this) { routineTheme ->
             routineTheme?.let {

diff --git a/app/src/main/java/com/sopetit/softie/ui/addroutine/list/MakerHelpDialogFragment.kt b/app/src/main/java/com/sopetit/softie/ui/addroutine/list/MakerHelpDialogFragment.kt
diff --git a/app/src/main/res/layout/activity_add_routine_list.xml b/app/src/main/res/layout/activity_add_routine_list.xml
@@ -80,6 +80,7 @@
                     android:layout_marginEnd="20dp"
                     android:padding="9dp"
                     android:src="@drawable/ic_maker_help"
+                    android:tooltipText="@string/maker_help_dialog_content"
                     app:layout_constraintBottom_toBottomOf="@id/iv_add_routine_list_maker_chip"
                     app:layout_constraintEnd_toEndOf="parent"
                     app:layout_constraintTop_toTopOf="@id/iv_add_routine_list_maker_chip" />

diff --git a/...src/main/res/layout/dialog_maker_help.xml → ...rc/main/res/layout/tooltip_maker_help.xml b/...src/main/res/layout/dialog_maker_help.xml → ...rc/main/res/layout/tooltip_maker_help.xml
@@ -7,13 +7,13 @@
     </data>
 
     <androidx.constraintlayout.widget.ConstraintLayout
-        android:id="@+id/cl_maker_help_dialog_border"
+        android:id="@+id/cl_maker_help_tooltip_border"
         android:layout_width="272dp"
         android:layout_height="wrap_content"
         android:background="@drawable/shape_gray0_fill_10_rect">
 
         <TextView
-            android:id="@+id/tv_maker_help_dialog_title"
+            android:id="@+id/tv_maker_help_tooltip_title"
             style="@style/head4"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
@@ -25,7 +25,7 @@
             app:layout_constraintTop_toTopOf="parent" />
 
         <ImageView
-            android:id="@+id/iv_maker_help_dialog_exit"
+            android:id="@+id/iv_maker_help_tooltip_exit"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_marginTop="12dp"
@@ -35,7 +35,7 @@
             app:layout_constraintTop_toTopOf="parent" />
 
         <TextView
-            android:id="@+id/tv_maker_help_dialog_content"
+            android:id="@+id/tv_maker_help_tooltip_content"
             style="@style/caption1"
             android:layout_width="0dp"
             android:layout_height="wrap_content"
@@ -47,7 +47,7 @@
             app:layout_constraintBottom_toBottomOf="parent"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintStart_toStartOf="parent"
-            app:layout_constraintTop_toBottomOf="@id/tv_maker_help_dialog_title" />
+            app:layout_constraintTop_toBottomOf="@id/tv_maker_help_tooltip_title" />
 
     </androidx.constraintlayout.widget.ConstraintLayout>
 </layout>

diff --git a/app/src/main/res/values/dimens.xml b/app/src/main/res/values/dimens.xml
@@ -11,4 +11,5 @@
     <dimen name="maker_recycler_view_margin">8dp</dimen>
     <dimen name="add_routine_recycler_view_first_margin">8dp</dimen>
     <dimen name="add_routine_recycler_view_margin">4dp</dimen>
+    <dimen name="add_routine_maker_help_radius">10dp</dimen>
 </resources>