#8 [ui] Daily Routine - 추가하기

app/build.gradle.kts

@@ -124,6 +124,9 @@ dependencies {
     testImplementation("junit:junit:4.13.2")
     androidTestImplementation("androidx.test.ext:junit:1.1.5")
     androidTestImplementation("androidx.test.espresso:espresso-core:3.5.1")
+
+    // indicator
+    implementation("com.tbuonomo:dotsindicator:5.0")
 }
 
 fun getApiKey(propertyKey: String): String {

app/src/main/AndroidManifest.xml

@@ -36,6 +36,12 @@
             android:name=".ui.storytelling.StoryTellingActivity"
             android:exported="false"
             android:screenOrientation="portrait"></activity>
+
+        <activity
+            android:name=".ui.dailyroutine.dailyroutineadd.DailyRoutineAddActivity"
+            android:exported="false"
+            android:screenOrientation="portrait"></activity>
+
         <activity
             android:name=".ui.onboarding.splash.SplashActivity"
             android:exported="true"

app/src/main/java/com/sopetit/softie/domain/entity/DailyCard.kt

@@ -0,0 +1,7 @@
+package com.sopetit.softie.domain.entity
+
+data class DailyCard(
+    val backgroundImageUrl: String,
+    val routineId: Int,
+    val content: String
+)

app/src/main/java/com/sopetit/softie/domain/entity/Theme.kt

@@ -4,5 +4,5 @@ data class Theme(
     val themeId: Int,
     val name: String,
     val iconImageUrl: String,
-    val backgroudnImageUrl: String
+    val backgroundImageUrl: String
 )

app/src/main/java/com/sopetit/softie/ui/dailyroutine/dailyroutineadd/DailyRoutineAddActivity.kt

@@ -0,0 +1,141 @@
+package com.sopetit.softie.ui.dailyroutine.dailyroutineadd
+
+import android.graphics.Rect
+import android.os.Bundle
+import android.view.View
+import androidx.activity.viewModels
+import androidx.recyclerview.widget.RecyclerView
+import androidx.viewpager2.widget.CompositePageTransformer
+import androidx.viewpager2.widget.MarginPageTransformer
+import androidx.viewpager2.widget.ViewPager2
+import com.sopetit.softie.R
+import com.sopetit.softie.databinding.ActivityDailyRoutineAddBinding
+import com.sopetit.softie.domain.entity.Theme
+import com.sopetit.softie.util.binding.BindingActivity
+import timber.log.Timber
+
+class DailyRoutineAddActivity :
+    BindingActivity<ActivityDailyRoutineAddBinding>(R.layout.activity_daily_routine_add) {
+    private lateinit var viewPager: ViewPager2
+    private lateinit var dailyRoutineAddCardPagerAdapter: DailyRoutineAddCardPagerAdapter
+    private lateinit var dailyRoutineAddThemeAdapter: DailyRoutineAddThemeAdapter
+
+    private val dailyRoutineAddViewModel by viewModels<DailyRoutineAddViewModel>()
+
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+        viewPager = binding.vpDailyRoutineAddCard
+        binding.viewModel = dailyRoutineAddViewModel
+
+        setupAdapter()
+        setViewPager()
+        setIndicator()
+        setItemDiv()
+        initPagerDiv(0, 90)
+    }
+
+    private fun setupAdapter() {
+        with(binding) {
+            dailyRoutineAddCardPagerAdapter = DailyRoutineAddCardPagerAdapter()
+            vpDailyRoutineAddCard.adapter = dailyRoutineAddCardPagerAdapter
+            dailyRoutineAddThemeAdapter = DailyRoutineAddThemeAdapter().apply {
+                setOnItemClickListener(object : DailyRoutineAddThemeAdapter.OnItemClickListener {
+                    override fun onItemClick(item: Theme, position: Int) {
+                        setRoutineList(item)
+                    }
+                })
+            }
+            rvDailyRoutineAddTheme.adapter = dailyRoutineAddThemeAdapter
+        }
+        dailyRoutineAddViewModel.mockThemeList.observe(this) {
+            dailyRoutineAddCardPagerAdapter.submitList(dailyRoutineAddViewModel.mockDailyFirstCardList.value)
+            dailyRoutineAddThemeAdapter.submitList(dailyRoutineAddViewModel.mockThemeList.value)
+        }
+    }
+
+    private fun setRoutineList(item: Theme) {
+        Timber.d("daily routine act -> ${item.themeId}")
+        when (item.themeId) {
+            1 -> dailyRoutineAddCardPagerAdapter.submitList(dailyRoutineAddViewModel.mockDailyFirstCardList.value)
+            2 -> dailyRoutineAddCardPagerAdapter.submitList(dailyRoutineAddViewModel.mockDailySecondCardList.value)
+            3 -> dailyRoutineAddCardPagerAdapter.submitList(dailyRoutineAddViewModel.mockDailyThirdCardList.value)
+            4 -> dailyRoutineAddCardPagerAdapter.submitList(dailyRoutineAddViewModel.mockDailyFourthCardList.value)
+            5 -> dailyRoutineAddCardPagerAdapter.submitList(dailyRoutineAddViewModel.mockDailyFifthCardList.value)
+            6 -> dailyRoutineAddCardPagerAdapter.submitList(dailyRoutineAddViewModel.mockDailySixthCardList.value)
+            7 -> dailyRoutineAddCardPagerAdapter.submitList(dailyRoutineAddViewModel.mockDailySeventhCardList.value)
+            8 -> dailyRoutineAddCardPagerAdapter.submitList(dailyRoutineAddViewModel.mockDailyEighthCardList.value)
+            9 -> dailyRoutineAddCardPagerAdapter.submitList(dailyRoutineAddViewModel.mockDailyNinthCardList.value)
+            10 -> dailyRoutineAddCardPagerAdapter.submitList(dailyRoutineAddViewModel.mockDailyTenthCardList.value)
+            11 -> dailyRoutineAddCardPagerAdapter.submitList(dailyRoutineAddViewModel.mockDailyEleventhCardList.value)
+            12 -> dailyRoutineAddCardPagerAdapter.submitList(dailyRoutineAddViewModel.mockDailyTwelfthCardList.value)
+
+            else -> dailyRoutineAddCardPagerAdapter.submitList(
+                dailyRoutineAddViewModel.mockDailyFirstCardList.value
+            )
+        }
+    }
+
+    private fun initPagerDiv(previewWidth: Int, itemMargin: Int) {
+        val decoMargin = previewWidth + itemMargin
+        val pageTransX = decoMargin + previewWidth
+        val decoration = PageDecoration(decoMargin)
+
+        binding.vpDailyRoutineAddCard.also {
+            it.offscreenPageLimit = 3
+            it.addItemDecoration(decoration)
+            it.setPageTransformer { page, position ->
+                page.translationX = position * -pageTransX
+            }
+        }
+    }
+
+    private class PageDecoration(private val margin: Int) : RecyclerView.ItemDecoration() {
+
+        override fun getItemOffsets(
+            outRect: Rect,
+            view: View,
+            parent: RecyclerView,
+            state: RecyclerView.State
+        ) {
+            outRect.left = margin
+            outRect.right = margin
+        }
+    }
+
+    private fun setViewPager() {
+        with(binding.vpDailyRoutineAddCard) {
+            adapter = dailyRoutineAddCardPagerAdapter
+            offscreenPageLimit = 3
+
+            val dpValue = 40
+            val margin = (dpValue * resources.displayMetrics.density).toInt()
+            setPadding(margin, 0, margin, 0)
+
+            setPageTransformer(CompositePageTransformer().apply {
+                addTransformer(MarginPageTransformer(resources.getDimensionPixelOffset(R.dimen.viewpager_margin)))
+            })
+        }
+    }
+
+    private fun setIndicator() {
+        binding.diDailyRoutineAddIndicator.attachTo(binding.vpDailyRoutineAddCard)
+    }
+
+    class HorizontalItemDecorator(private val divHeight: Int) : RecyclerView.ItemDecoration() {
+        @Override
+        override fun getItemOffsets(
+            outRect: Rect,
+            view: View,
+            parent: RecyclerView,
+            state: RecyclerView.State
+        ) {
+            super.getItemOffsets(outRect, view, parent, state)
+            outRect.left = divHeight
+            outRect.right = divHeight
+        }
+    }
+
+    private fun setItemDiv() {
+        binding.rvDailyRoutineAddTheme.addItemDecoration(HorizontalItemDecorator(16))
+    }
+}

app/src/main/java/com/sopetit/softie/ui/dailyroutine/dailyroutineadd/DailyRoutineAddCardPagerAdapter.kt

@@ -0,0 +1,39 @@
+package com.sopetit.softie.ui.dailyroutine.dailyroutineadd
+
+import android.view.LayoutInflater
+import android.view.ViewGroup
+import androidx.recyclerview.widget.ListAdapter
+import androidx.recyclerview.widget.RecyclerView
+import coil.load
+import com.sopetit.softie.databinding.ItemDailyRoutineAddCardBinding
+import com.sopetit.softie.domain.entity.DailyCard
+import com.sopetit.softie.util.ItemDiffCallback
+import timber.log.Timber
+
+class DailyRoutineAddCardPagerAdapter :
+    ListAdapter<DailyCard, DailyRoutineAddCardPagerAdapter.DailyPagerViewHolder>(
+        ItemDiffCallback<DailyCard>(
+            onItemsTheSame = { oldItem, newItem -> oldItem == newItem },
+            onContentsTheSame = { oldItem, newItem -> oldItem == newItem }
+        )
+    ) {
+    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): DailyPagerViewHolder {
+        val binding = ItemDailyRoutineAddCardBinding.inflate(
+            LayoutInflater.from(parent.context), parent, false
+        )
+        return DailyPagerViewHolder(binding)
+    }
+
+    override fun onBindViewHolder(holder: DailyPagerViewHolder, position: Int) {
+        holder.onBind(currentList[position])
+    }
+
+    class DailyPagerViewHolder(private val binding: ItemDailyRoutineAddCardBinding) :
+        RecyclerView.ViewHolder(binding.root) {
+        fun onBind(data: DailyCard) {
+            binding.tvDailyRoutineAddCard.load(data.backgroundImageUrl)
+            Timber.d("load Image -> ${data}")
+            binding.tvDailyRoutineAddCardName.text = data.content
+        }
+    }
+}

app/src/main/java/com/sopetit/softie/ui/dailyroutine/dailyroutineadd/DailyRoutineAddThemeAdapter.kt

@@ -0,0 +1,94 @@
+package com.sopetit.softie.ui.dailyroutine.dailyroutineadd
+
+import android.view.LayoutInflater
+import android.view.ViewGroup
+import androidx.core.content.ContextCompat
+import androidx.recyclerview.widget.ListAdapter
+import androidx.recyclerview.widget.RecyclerView
+import coil.load
+import com.sopetit.softie.R
+import com.sopetit.softie.databinding.ItemDailyRoutineAddThemeBinding
+import com.sopetit.softie.domain.entity.Theme
+import com.sopetit.softie.util.ItemDiffCallback
+
+class DailyRoutineAddThemeAdapter :
+    ListAdapter<Theme, DailyRoutineAddThemeAdapter.DailyThemeViewHolder>(
+        ItemDiffCallback<Theme>(
+            onItemsTheSame = { old, new -> old.themeId == new.themeId },
+            onContentsTheSame = { old, new -> old == new }
+        )
+    ) {
+    private var onItemClickListener: OnItemClickListener? = null
+    private var selectedPosition = 0
+
+    interface OnItemClickListener {
+        fun onItemClick(item: Theme, position: Int)
+    }
+
+    fun setOnItemClickListener(listener: OnItemClickListener) {
+        this.onItemClickListener = listener
+    }
+
+    inner class DailyThemeViewHolder(private val binding: ItemDailyRoutineAddThemeBinding) :
+        RecyclerView.ViewHolder(binding.root) {
+        fun onBind(data: Theme) {
+            binding.tvDailyRoutineAddThemeName.text = data.name
+            binding.ivDailyRoutineAddThemeIcon.load(data.iconImageUrl)
+            if (selectedPosition == absoluteAdapterPosition) {
+                changeThemeBackground(binding, true)
+            } else {
+                changeThemeBackground(binding, false)
+            }
+
+            if (onItemClickListener != null) {
+                binding.root.setOnClickListener {
+                    onItemClickListener?.onItemClick(data, absoluteAdapterPosition)
+                    if (selectedPosition != absoluteAdapterPosition) {
+                        changeThemeBackground(binding, true)
+                        notifyItemChanged(selectedPosition)
+                        selectedPosition = absoluteAdapterPosition
+                    }
+                }
+            }
+        }
+    }
+
+    private fun changeThemeBackground(
+        binding: ItemDailyRoutineAddThemeBinding,
+        selected: Boolean
+    ) {
+        when (selected) {
+            true -> {
+                binding.ivDailyRoutineAddThemeBackground.setBackgroundResource(R.drawable.ic_daily_theme_background_click)
+                binding.tvDailyRoutineAddThemeName.setTextColor(
+                    ContextCompat.getColor(
+                        binding.root.context,
+                        R.color.gray700
+                    )
+                )
+            }
+
+            false -> {
+                binding.ivDailyRoutineAddThemeBackground.setBackgroundResource(R.drawable.ic_daily_theme_background)
+                binding.tvDailyRoutineAddThemeName.setTextColor(
+                    ContextCompat.getColor(
+                        binding.root.context,
+                        R.color.gray400
+                    )
+                )
+            }
+        }
+    }
+
+    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): DailyThemeViewHolder {
+        val binding = ItemDailyRoutineAddThemeBinding.inflate(
+            LayoutInflater.from(parent.context), parent, false
+        )
+        return DailyThemeViewHolder(binding)
+    }
+
+    override fun onBindViewHolder(holder: DailyThemeViewHolder, position: Int) {
+        holder.onBind(currentList[position])
+    }
+}
+