#32 [ui] 홈 화면 구현

UMC-5th-Coumo · Jan 30, 2024 · c079d70 · c079d70
2 parents 04b8f94 + 83e2ca7
commit c079d70
Show file tree

Hide file tree

Showing 12 changed files with 292 additions and 10 deletions.
diff --git a/app/src/main/java/com/umc/coumo/domain/model/BannerCardModel.kt b/app/src/main/java/com/umc/coumo/domain/model/BannerCardModel.kt
@@ -0,0 +1,8 @@
+package com.umc.coumo.domain.model
+
+data class BannerCardModel(
+    val id: Int,
+/*    val title: String,
+    val content: String,
+    val type: String, //TODO(실제 타입 설정)*/
+)
diff --git a/app/src/main/java/com/umc/coumo/presentation/adapter/BannerPagerAdapter.kt b/app/src/main/java/com/umc/coumo/presentation/adapter/BannerPagerAdapter.kt
@@ -0,0 +1,40 @@
+package com.umc.coumo.presentation.adapter
+
+import android.content.Context
+import android.view.LayoutInflater
+import android.view.ViewGroup
+import androidx.recyclerview.widget.ListAdapter
+import androidx.recyclerview.widget.RecyclerView
+import com.umc.coumo.databinding.ItemBannerBinding
+import com.umc.coumo.domain.model.BannerCardModel
+import com.umc.coumo.utils.ItemDiffCallback
+
+class BannerPagerAdapter(val context: Context) : ListAdapter<BannerCardModel, RecyclerView.ViewHolder>(
+    ItemDiffCallback<BannerCardModel>(
+        onContentsTheSame = {old, new -> old == new},
+        onItemsTheSame = {old, new -> old.id == new.id}
+    )
+){
+    inner class ItemViewHolder(
+        private val binding: ItemBannerBinding
+    ): RecyclerView.ViewHolder(binding.root) {
+        fun bind(item: BannerCardModel) {
+
+        }
+    }
+
+    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerView.ViewHolder {
+        val inflater = LayoutInflater.from(parent.context)
+        return ItemViewHolder(ItemBannerBinding.inflate(inflater, parent, false))
+    }
+
+    override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int) {
+        val item = getItem(position)
+
+        when (holder) {
+            is ItemViewHolder -> {
+                holder.bind(item)
+            }
+        }
+    }
+}
diff --git a/app/src/main/java/com/umc/coumo/presentation/fragment/HomeMainFragment.kt b/app/src/main/java/com/umc/coumo/presentation/fragment/HomeMainFragment.kt
@@ -3,17 +3,85 @@ package com.umc.coumo.presentation.fragment
 import android.os.Bundle
 import android.view.View
 import androidx.navigation.fragment.findNavController
+import androidx.recyclerview.widget.LinearLayoutManager
+import androidx.viewpager2.widget.ViewPager2
 import com.umc.coumo.R
 import com.umc.coumo.databinding.FragmentHomeMainBinding
+import com.umc.coumo.domain.model.BannerCardModel
+import com.umc.coumo.domain.model.StoreInfoModel
+import com.umc.coumo.presentation.adapter.BannerPagerAdapter
+import com.umc.coumo.presentation.adapter.StoreInfoAdapter
+import com.umc.coumo.utils.ItemSpacingDecoration
 import com.umc.coumo.utils.binding.BindingFragment
 
 class HomeMainFragment: BindingFragment<FragmentHomeMainBinding>(R.layout.fragment_home_main) {
 
     override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
         super.onViewCreated(view, savedInstanceState)
 
-        binding.btnTest.setOnClickListener {
-            findNavController().navigate(R.id.action_homeMainFragment_to_homeSubFragment)
+        setBanner()
+        setRecyclerView()
+        setButton()
+    }
+
+    private fun setButton() {
+        binding.ivCafe.setOnClickListener {
+            val bundle = Bundle().apply {
+                putString("type","cafe")
+            }
+            findNavController().navigate(
+                R.id.action_homeMainFragment_to_homeSubFragment, bundle
+            )
+        }
+    }
+
+    private fun setRecyclerView() {
+        val storeInfoAdapter = StoreInfoAdapter()
+
+        binding.rvPopular.apply {
+            adapter = storeInfoAdapter
+            addItemDecoration(ItemSpacingDecoration(requireContext(),resources.getDimensionPixelSize(R.dimen.item_between_horizontal)))
+            layoutManager = LinearLayoutManager(requireContext(), LinearLayoutManager.HORIZONTAL, false)
         }
+
+        val list = listOf<StoreInfoModel>(
+            StoreInfoModel(1, null,"앙떼띠 로스터리(강남점)", "강남구 테헤란로 43-7", "양떼띠 로스터리는 2017년에 오픈한 강남의 유명 카페입니다. 강남역 직장인들을 위해 평일 오전 7시~9시에\n" +
+                    "아메리카노 2000원 이벤트를 진행 중입니다."),
+            StoreInfoModel(2, null,"앙떼띠 로스터리(강남점)", "강남구 테헤란로 43-7", "양떼띠 로스터리는 2017년에 오픈한 강남의 유명 카페입니다. 강남역 직장인들을 위해 평일 오전 7시~9시에\n" +
+                    "아메리카노 2000원 이벤트를 진행 중입니다."),
+            StoreInfoModel(3, null,"앙떼띠 로스터리(강남점)", "강남구 테헤란로 43-7", "양떼띠 로스터리는 2017년에 오픈한 강남의 유명 카페입니다. 강남역 직장인들을 위해 평일 오전 7시~9시에\n" +
+                    "아메리카노 2000원 이벤트를 진행 중입니다."),
+            StoreInfoModel(4, null,"앙떼띠 로스터리(강남점)", "강남구 테헤란로 43-7", "양떼띠 로스터리는 2017년에 오픈한 강남의 유명 카페입니다. 강남역 직장인들을 위해 평일 오전 7시~9시에\n" +
+                    "아메리카노 2000원 이벤트를 진행 중입니다."),
+            )
+
+        storeInfoAdapter.submitList(list)
+    }
+
+    private fun setBanner() {
+        val bannerAdapter = BannerPagerAdapter(requireContext())
+        binding.bannerHome.adapter = bannerAdapter
+        val bannerItems = listOf(
+            BannerCardModel(1),
+            BannerCardModel(2),
+        )
+        bannerAdapter.submitList(bannerItems)
+
+        val current = 1
+        val total = bannerAdapter.itemCount
+
+        val indicator = "$current / $total"
+
+        binding.tvIndicator.text = indicator
+
+        binding.bannerHome.registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() {
+            override fun onPageSelected(position: Int) {
+                val currentPage = position + 1
+                val totalPages = bannerAdapter.itemCount
+
+                val indicatorText = "$currentPage / $totalPages"
+                binding.tvIndicator.text = indicatorText
+            }
+        })
     }
 }
diff --git a/app/src/main/res/drawable/image_beauty.png b/app/src/main/res/drawable/image_beauty.png
diff --git a/app/src/main/res/drawable/image_cafe.png b/app/src/main/res/drawable/image_cafe.png
diff --git a/app/src/main/res/drawable/image_class.png b/app/src/main/res/drawable/image_class.png
diff --git a/app/src/main/res/drawable/image_food.png b/app/src/main/res/drawable/image_food.png
diff --git a/app/src/main/res/drawable/image_retail_1.png b/app/src/main/res/drawable/image_retail_1.png
diff --git a/app/src/main/res/drawable/image_retail_2.png b/app/src/main/res/drawable/image_retail_2.png
diff --git a/app/src/main/res/drawable/shape_rect_round_4.xml b/app/src/main/res/drawable/shape_rect_round_4.xml
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android">
+    <corners android:radius="4dp" />
+</shape>
diff --git a/app/src/main/res/layout/fragment_home_main.xml b/app/src/main/res/layout/fragment_home_main.xml
@@ -66,15 +66,148 @@
                 app:layout_constraintEnd_toEndOf="parent"/>
 
         </androidx.constraintlayout.widget.ConstraintLayout>
-
-        <Button
-            android:id="@+id/btn_test"
-            android:layout_width="wrap_content"
+        <androidx.core.widget.NestedScrollView
+            android:layout_width="match_parent"
             android:layout_height="wrap_content"
-            app:layout_constraintStart_toStartOf="parent"
-            app:layout_constraintTop_toTopOf="parent"
-            app:layout_constraintEnd_toEndOf="parent"
-            app:layout_constraintBottom_toBottomOf="parent"/>
+            app:layout_constraintTop_toBottomOf="@id/section_tab_bar">
+
+            <androidx.constraintlayout.widget.ConstraintLayout
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:paddingBottom="84dp">
+
+                <androidx.constraintlayout.widget.ConstraintLayout
+                    android:id="@+id/section_banner"
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    app:layout_constraintTop_toTopOf="parent">
+
+                    <androidx.viewpager2.widget.ViewPager2
+                        android:id="@+id/banner_home"
+                        android:layout_width="match_parent"
+                        android:layout_height="130dp"
+                        android:layout_marginTop="27dp"
+                        android:background="@drawable/shape_rect_round_4"
+                        android:clipToOutline="true"
+                        android:layout_marginHorizontal="@dimen/horizontal_padding"
+                        app:layout_constraintTop_toTopOf="parent"/>
+
+                    <TextView
+                        android:id="@+id/tv_indicator"
+                        android:layout_width="wrap_content"
+                        android:layout_height="wrap_content"
+                        android:minWidth="54dp"
+                        android:layout_marginTop="10dp"
+                        android:layout_marginEnd="15dp"
+                        android:background="@drawable/shape_rect_side_round"
+                        android:backgroundTint="#80000000"
+                        android:paddingHorizontal="4dp"
+                        android:paddingVertical="4dp"
+                        android:text="6/10"
+                        android:fontFamily="@font/pretendard_regular"
+                        android:textColor="#FFFFFF"
+                        android:textSize="12sp"
+                        android:gravity="center"
+                        app:layout_constraintTop_toTopOf="@+id/banner_home"
+                        app:layout_constraintEnd_toEndOf="@id/banner_home"/>
+                </androidx.constraintlayout.widget.ConstraintLayout>
+
+                <androidx.constraintlayout.widget.ConstraintLayout
+                    android:id="@+id/section_category"
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    android:layout_marginTop="34dp"
+                    android:paddingHorizontal="@dimen/horizontal_padding"
+                    app:layout_constraintTop_toBottomOf="@id/section_banner">
+
+                    <androidx.constraintlayout.utils.widget.ImageFilterView
+                        android:id="@+id/iv_cafe"
+                        android:layout_width="68dp"
+                        android:layout_height="wrap_content"
+                        android:adjustViewBounds="true"
+                        android:src="@drawable/image_cafe"
+                        app:layout_constraintEnd_toStartOf="@id/iv_retail_1"
+                        app:layout_constraintHorizontal_chainStyle="spread_inside"
+                        app:layout_constraintStart_toStartOf="parent"
+                        app:layout_constraintTop_toTopOf="parent" />
+
+                    <androidx.constraintlayout.utils.widget.ImageFilterView
+                        android:id="@+id/iv_retail_1"
+                        android:layout_width="68dp"
+                        android:layout_height="wrap_content"
+                        android:adjustViewBounds="true"
+                        android:src="@drawable/image_retail_1"
+                        app:layout_constraintEnd_toStartOf="@id/iv_food"
+                        app:layout_constraintStart_toEndOf="@id/iv_cafe"
+                        app:layout_constraintTop_toTopOf="parent" />
 
+                    <androidx.constraintlayout.utils.widget.ImageFilterView
+                        android:id="@+id/iv_food"
+                        android:layout_width="68dp"
+                        android:layout_height="wrap_content"
+                        android:adjustViewBounds="true"
+                        android:src="@drawable/image_food"
+                        app:layout_constraintEnd_toEndOf="parent"
+                        app:layout_constraintStart_toEndOf="@id/iv_retail_1"
+                        app:layout_constraintTop_toTopOf="parent" />
+
+                    <androidx.constraintlayout.utils.widget.ImageFilterView
+                        android:id="@+id/iv_retail_2"
+                        android:layout_width="68dp"
+                        android:layout_height="wrap_content"
+                        android:adjustViewBounds="true"
+                        android:src="@drawable/image_retail_2"
+                        android:layout_marginTop="10dp"
+                        app:layout_constraintEnd_toStartOf="@id/iv_beauty"
+                        app:layout_constraintHorizontal_chainStyle="spread_inside"
+                        app:layout_constraintStart_toStartOf="parent"
+                        app:layout_constraintTop_toBottomOf="@id/iv_cafe" />
+
+                    <androidx.constraintlayout.utils.widget.ImageFilterView
+                        android:id="@+id/iv_beauty"
+                        android:layout_width="68dp"
+                        android:layout_height="wrap_content"
+                        android:adjustViewBounds="true"
+                        android:src="@drawable/image_beauty"
+                        android:layout_marginTop="10dp"
+                        app:layout_constraintEnd_toStartOf="@id/iv_class"
+                        app:layout_constraintStart_toEndOf="@id/iv_retail_2"
+                        app:layout_constraintTop_toBottomOf="@id/iv_retail_1" />
+
+                    <androidx.constraintlayout.utils.widget.ImageFilterView
+                        android:id="@+id/iv_class"
+                        android:layout_width="68dp"
+                        android:layout_height="wrap_content"
+                        android:adjustViewBounds="true"
+                        android:src="@drawable/image_class"
+                        android:layout_marginTop="10dp"
+                        app:layout_constraintEnd_toEndOf="parent"
+                        app:layout_constraintStart_toEndOf="@id/iv_beauty"
+                        app:layout_constraintTop_toBottomOf="@id/iv_food" />
+
+
+                </androidx.constraintlayout.widget.ConstraintLayout>
+
+                <TextView
+                    android:id="@+id/tv_popular"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:text="다빈님 주변 인기 매장은?"
+                    android:layout_marginTop="36dp"
+                    android:fontFamily="@font/pretendard_700"
+                    android:textSize="22sp"
+                    android:textColor="@color/font_text"
+                    android:layout_marginStart="@dimen/horizontal_padding"
+                    app:layout_constraintTop_toBottomOf="@id/section_category"
+                    app:layout_constraintStart_toStartOf="parent"/>
+
+                <androidx.recyclerview.widget.RecyclerView
+                    android:id="@+id/rv_popular"
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    android:layout_marginTop="16dp"
+                    app:layout_constraintTop_toBottomOf="@id/tv_popular"/>
+            </androidx.constraintlayout.widget.ConstraintLayout>
+        </androidx.core.widget.NestedScrollView>
     </androidx.constraintlayout.widget.ConstraintLayout>
 </layout>
diff --git a/app/src/main/res/layout/item_banner.xml b/app/src/main/res/layout/item_banner.xml
@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="utf-8"?>
+<layout 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">
+
+    <data>
+
+    </data>
+
+    <androidx.constraintlayout.widget.ConstraintLayout
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        android:background="@color/main">
+
+        <TextView
+            android:id="@+id/tv_intro"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:text="광고 배너"
+            android:fontFamily="@font/pretendard_bold"
+            android:textColor="@color/white"
+            android:textSize="14sp"
+            android:layout_marginTop="24dp"
+            android:layout_marginStart="20dp"
+            app:layout_constraintTop_toTopOf="parent"
+            app:layout_constraintStart_toStartOf="parent"/>
+
+    </androidx.constraintlayout.widget.ConstraintLayout>
+</layout>