#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

@@ -32,6 +32,11 @@
             android:exported="false"
             android:screenOrientation="portrait" />
 
+        <activity
+            android:name=".ui.daily.DailyAddActivity"
+            android:exported="false"
+            android:screenOrientation="portrait" />
+
         <activity
             android:name=".ui.storytelling.StoryTellingActivity"
             android:exported="true"

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

@@ -0,0 +1,8 @@
+package com.sopetit.softie.domain.entity
+
+import androidx.annotation.DrawableRes
+
+data class DailyCard(
+    @DrawableRes val card: Int,
+    val routine: String
+)

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

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

app/src/main/java/com/sopetit/softie/ui/daily/DailyAddActivity.kt

@@ -0,0 +1,133 @@
+package com.sopetit.softie.ui.daily
+
+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.ActivityDailyAddBinding
+import com.sopetit.softie.util.binding.BindingActivity
+
+class DailyAddActivity : BindingActivity<ActivityDailyAddBinding>(R.layout.activity_daily_add) {
+    private lateinit var viewPager: ViewPager2
+    private lateinit var dailyPagerAdapter: DailyPagerAdapter
+    private lateinit var dailyThemeAdapter: DailyThemeAdapter
+
+    private val dailyAddViewModel by viewModels<DailyAddViewModel>()
+    private val dailyThemeViewModel by viewModels<DailyThemeViewModel>()
+
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+        dailyPagerAdapter = DailyPagerAdapter()
+        dailyThemeAdapter = DailyThemeAdapter()
+
+        viewPager = binding.vpDailyCard
+
+        setupAdapter()
+        //marginPage()
+        initViewPager()
+        setIndicator()
+        setDiv()
+        initPagerDiv(19, 20)
+    }
+
+    private fun setupAdapter() {
+        with(binding) {
+            vpDailyCard.adapter = dailyPagerAdapter
+            rvThemeDaily.adapter = dailyThemeAdapter
+        }
+        dailyPagerAdapter.submitList(dailyAddViewModel.mockDailyList)
+        dailyThemeAdapter.submitList(dailyThemeViewModel.mockDailyThemeList.value)
+    }
+
+    private fun marginPage() {
+        val pageMarginPx = resources.getDimensionPixelOffset(R.dimen.viewpager_margin)
+        val pagerWidth = resources.getDimensionPixelOffset(R.dimen.viewpager_margin)
+        val screenWidth = resources.displayMetrics.widthPixels
+        val offsetPx = screenWidth - pageMarginPx - pagerWidth
+
+        binding.vpDailyCard.setPageTransformer { page, position ->
+            page.translationX = position * -offsetPx
+        }
+    }
+
+    private fun initViewPager() {
+
+        viewPager.adapter = dailyPagerAdapter
+
+        viewPager.apply {
+            clipChildren = false
+            clipToPadding = false
+            offscreenPageLimit = 1
+        }
+
+        val compositePageTransformer = CompositePageTransformer()
+        compositePageTransformer.addTransformer(
+            MarginPageTransformer(
+                resources.getDimensionPixelOffset(
+                    R.dimen.viewpager_margin
+                )
+            )
+        )
+        viewPager.setPageTransformer(compositePageTransformer)
+    }
+
+    private fun setIndicator() {
+        binding.diDailyIndicator.attachTo(binding.vpDailyCard)
+    }
+
+    private fun initPagerDiv(previewWidth: Int, itemMargin: Int) {
+        val decoMargin = previewWidth + itemMargin
+        val pageTransX = decoMargin + previewWidth
+        val decoration = PageDecoration(decoMargin)
+
+        binding.vpDailyCard.also {
+            it.offscreenPageLimit = 1
+            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
+        }
+    }
+
+    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 selectTheme() {
+        dailyThemeAdapter.setOnThemeClickListener {
+
+        }
+    }
+
+    private fun setDiv() {
+        binding.rvThemeDaily.addItemDecoration(HorizontalItemDecorator(16))
+    }
+}

app/src/main/java/com/sopetit/softie/ui/daily/DailyAddViewModel.kt

@@ -0,0 +1,30 @@
+package com.sopetit.softie.ui.daily
+
+import androidx.lifecycle.ViewModel
+import com.sopetit.softie.R
+import com.sopetit.softie.domain.entity.DailyCard
+
+class DailyAddViewModel : ViewModel() {
+    val mockDailyList = listOf<DailyCard>(
+        DailyCard(
+            card = R.drawable.shape_gray_fill_20_rect,
+            routine = "가짜 데이터"
+        ),
+        DailyCard(
+            card = R.drawable.shape_gray_fill_20_rect,
+            routine = "진짜 데이터"
+        ),
+        DailyCard(
+            card = R.drawable.shape_gray_fill_20_rect,
+            routine = "가짜 데이터"
+        ),
+        DailyCard(
+            card = R.drawable.shape_gray_fill_20_rect,
+            routine = "가짜 데이터"
+        ),
+        DailyCard(
+            card = R.drawable.shape_gray_fill_20_rect,
+            routine = "가짜 데이터"
+        )
+    )
+}

app/src/main/java/com/sopetit/softie/ui/daily/DailyPagerAdapter.kt

@@ -0,0 +1,36 @@
+package com.sopetit.softie.ui.daily
+
+import android.view.LayoutInflater
+import android.view.ViewGroup
+import androidx.recyclerview.widget.ListAdapter
+import androidx.recyclerview.widget.RecyclerView
+import com.sopetit.softie.R
+import com.sopetit.softie.databinding.ItemDailyCardBinding
+import com.sopetit.softie.domain.entity.DailyCard
+import com.sopetit.softie.util.ItemDiffCallback
+
+class DailyPagerAdapter : ListAdapter<DailyCard, DailyPagerAdapter.DailyPagerViewHolder>(
+    ItemDiffCallback<DailyCard>(
+        onItemsTheSame = { oldItem, newItem -> oldItem == newItem },
+        onContentsTheSame = { oldItem, newItem -> oldItem == newItem }
+    )
+) {
+    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): DailyPagerViewHolder {
+        val binding = ItemDailyCardBinding.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: ItemDailyCardBinding) :
+        RecyclerView.ViewHolder(binding.root) {
+        fun onBind(data: DailyCard) {
+            binding.clDailyCard.loadLayoutDescription(R.layout.item_daily_card)
+            binding.tvDailyCard.text = data.routine
+        }
+    }
+}

app/src/main/java/com/sopetit/softie/ui/daily/DailyThemeAdapter.kt

@@ -0,0 +1,95 @@
+package com.sopetit.softie.ui.daily
+
+import android.view.LayoutInflater
+import android.view.ViewGroup
+import androidx.core.content.ContextCompat
+import androidx.recyclerview.widget.ListAdapter
+import androidx.recyclerview.widget.RecyclerView
+import com.sopetit.softie.R
+import com.sopetit.softie.databinding.ItemDailyThemeBinding
+import com.sopetit.softie.domain.entity.DailyTheme
+import com.sopetit.softie.util.ItemDiffCallback
+
+class DailyThemeAdapter : ListAdapter<DailyTheme, DailyThemeAdapter.DailyThemeViewHolder>(
+    ItemDiffCallback<DailyTheme>(
+        onItemsTheSame = { oldItem, newItem -> oldItem == newItem },
+        onContentsTheSame = { oldItem, newItem -> oldItem == newItem }
+    )
+) {
+    var selectedThemeArray = mutableListOf<Int>()
+
+    inner class DailyThemeViewHolder(private val binding: ItemDailyThemeBinding) :
+        RecyclerView.ViewHolder(binding.root) {
+
+        init {
+            toggleThemeSelection(getItem(0).routineId)
+        }
+
+        fun onBind(data: DailyTheme) {
+            binding.data = data
+            binding.root.setOnClickListener {
+                val position = bindingAdapterPosition
+                if (position != RecyclerView.NO_POSITION) {
+                    val isSelected = toggleThemeSelection(data.routineId)
+                    onItemClickListener?.invoke(data)
+                    notifyItemChanged(bindingAdapterPosition)
+                    changeThemeBackground(binding, selectedThemeArray.contains(data.routineId))
+                }
+            }
+        }
+    }
+
+    //클릭이벤트 만들어 주기
+    private var onItemClickListener: ((DailyTheme) -> Unit)? = null
+    fun setOnThemeClickListener(listener: (DailyTheme) -> Unit) {
+        onItemClickListener = listener
+    }
+
+    private fun toggleThemeSelection(routineId: Int): Boolean {
+        val isSelected = selectedThemeArray.contains(routineId)
+        if (isSelected) {
+            selectedThemeArray.remove(routineId) // 선택 해제
+        } else {
+            selectedThemeArray.add(routineId) // 선택
+        }
+        return !isSelected // 선택 상태 반전
+    }
+
+    private fun changeThemeBackground(
+        binding: ItemDailyThemeBinding,
+        selected: Boolean
+    ) {
+        when (selected) {
+            true -> {
+                binding.ivDailyThemeBackground.setBackgroundResource(R.drawable.ic_daily_theme_background_click)
+                binding.tvThemeDaily.setTextColor(
+                    ContextCompat.getColor(
+                        binding.root.context,
+                        R.color.gray700
+                    )
+                )
+            }
+
+            false -> {
+                binding.ivDailyThemeBackground.setBackgroundResource(R.drawable.ic_daily_theme_background)
+                binding.tvThemeDaily.setTextColor(
+                    ContextCompat.getColor(
+                        binding.root.context,
+                        R.color.gray400
+                    )
+                )
+            }
+        }
+    }
+
+    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): DailyThemeViewHolder {
+        val binding = ItemDailyThemeBinding.inflate(
+            LayoutInflater.from(parent.context), parent, false
+        )
+        return DailyThemeViewHolder(binding)
+    }
+
+    override fun onBindViewHolder(holder: DailyThemeViewHolder, position: Int) {
+        holder.onBind(getItem(position))
+    }
+}