#31 : 배너 기능 구현

N-X-STITCH · Mar 8, 2023 · 6aaacf3 · 6aaacf3
1 parent 2b8af6b
commit 6aaacf3
Show file tree

Hide file tree

Showing 6 changed files with 158 additions and 21 deletions.
diff --git a/app/src/main/java/com/seunggyu/stitch/adapter/BannerPagerAdapter.kt b/app/src/main/java/com/seunggyu/stitch/adapter/BannerPagerAdapter.kt
@@ -0,0 +1,57 @@
+package com.seunggyu.stitch.adapter
+
+import android.content.Context
+import android.view.LayoutInflater
+import android.view.View
+import android.view.ViewGroup
+import android.widget.ImageView
+import android.widget.TextView
+import androidx.recyclerview.widget.RecyclerView
+import com.bumptech.glide.Glide
+import com.seunggyu.stitch.R
+import com.seunggyu.stitch.data.model.response.EventResponse
+
+class BannerPagerAdapter : RecyclerView.Adapter<BannerPagerAdapter.BannerViewHolder> {
+    private var eventList: List<EventResponse>
+    var context: Context? = null
+    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): BannerViewHolder {
+        val view: View =
+            LayoutInflater.from(parent.context).inflate(R.layout.item_banner, parent, false)
+        return BannerViewHolder(view)
+    }
+
+    override fun onBindViewHolder(holder: BannerViewHolder, position: Int) {
+        // infinite View Pager를 위한 position 변수
+        val actualPosition = holder.bindingAdapterPosition % eventList.size
+
+        // 각 position에 해당하는 url을 리스트로부터 받아온다.
+        val imageUrl: String = eventList[actualPosition].imageUrl.toString()
+        val title: String = eventList[actualPosition].title.toString()
+        Glide.with(holder.itemView.context).load(imageUrl).into(holder.ivBanner)
+        holder.tvBanner.text = title
+        // 클릭 리스너 ..
+    }
+
+    override fun getItemCount(): Int {
+        return Int.MAX_VALUE
+    }
+
+    constructor(arrayList: List<EventResponse>) {
+        eventList = arrayList
+    }
+
+    constructor(arrayList: List<EventResponse>, context: Context?) {
+        eventList = arrayList
+        this.context = context
+    }
+
+    inner class BannerViewHolder(view: View) : RecyclerView.ViewHolder(view) {
+        var ivBanner: ImageView
+        var tvBanner: TextView
+
+        init {
+            ivBanner = view.findViewById<ImageView>(R.id.iv_event)
+            tvBanner = view.findViewById<TextView>(R.id.tv_event)
+        }
+    }
+}
diff --git a/app/src/main/java/com/seunggyu/stitch/ui/fragment/home/HomeFragment.kt b/app/src/main/java/com/seunggyu/stitch/ui/fragment/home/HomeFragment.kt
@@ -1,21 +1,28 @@
 package com.seunggyu.stitch.ui.fragment.home
 
 import android.os.Bundle
+import android.os.Handler
 import android.util.Log
 import android.view.LayoutInflater
 import android.view.View
 import android.view.ViewGroup
 import androidx.databinding.DataBindingUtil
 import androidx.fragment.app.Fragment
+import androidx.viewpager2.widget.ViewPager2.OnPageChangeCallback
 import com.seunggyu.stitch.GlobalApplication
-
 import com.seunggyu.stitch.R
-import com.seunggyu.stitch.Util.SnackBarCustom
+import com.seunggyu.stitch.adapter.BannerPagerAdapter
 import com.seunggyu.stitch.databinding.FragMainHomeBinding
+import java.util.*
 
 class HomeFragment : Fragment() {
     private lateinit var binding: FragMainHomeBinding
 
+    private lateinit var adapter: BannerPagerAdapter
+    private var currentPage = Int.MAX_VALUE / 2
+    private var timer: Timer? = null
+    private val DELAY_MS: Long = 5000 // (초기 웨이팅 타임) ex) 앱 로딩 후 5초 뒤 플립됨.
+    private val PERIOD_MS: Long = 5000 // 5초 주기로 배너 이동
 
     override fun onCreateView(
         inflater: LayoutInflater, container: ViewGroup?,
@@ -25,12 +32,12 @@ class HomeFragment : Fragment() {
         initClickListener()
         initObserver()
         initData()
-        initView()
+        initBannerViewPager()
 
         return binding.root
     }
 
-    private fun initView() {
+    private fun initBannerViewPager() {
 
     }
 
@@ -43,13 +50,72 @@ class HomeFragment : Fragment() {
     }
 
     private fun initData() {
+        // 배너 관련 데이터
         GlobalApplication.bannerData.let {
             if (it != null) {
                 for(index in it.indices) {
                     Log.e("imageurl", it[index].imageUrl.toString())
                     Log.e("title", it[index].title.toString())
                 }
             }
+            adapter = BannerPagerAdapter(it!!, requireContext())
+            binding.vpBanner.adapter = adapter
+            binding.vpBanner.setCurrentItem(currentPage, false)
+            binding.vpBanner.registerOnPageChangeCallback(object : OnPageChangeCallback() {
+                override fun onPageSelected(position: Int) {
+                    super.onPageSelected(position)
+                    // 스크롤 했을 때 현재 페이지를 설정해준다.
+                    // 자동 스크롤의 경우 currentPage의 변수 값을 현재 position으로 잡는데
+                    // 2페이지에서 사용자가 1페이지로 슬라이드 했을 때
+                    // 자동 스크롤 시 다음 페이지를 3번이 아닌 2번으로 다시 바꿔줌
+                    currentPage = position
+                    if (timer != null) {
+                        // 타이머 종료 후 재실
+                        timer!!.cancel()
+                        timer = null
+                        timerStart()
+                    }
+
+                    // 페이지가 스크롤(자동스크롤, 사용자 직접 스크롤 모두 포함)될 때마다 페이지 번호를 갱신
+//                    eventPageDescript = getString(
+//                        R.string.EventViewPagerDescript,
+//                        position % listSize + 1,
+//                        listSize
+//                    )
+//                    binding.tvPagenum.setText(eventPageDescript)
+                }
+            })
+        }
+    }
+
+    private fun timerStart() {
+        // Adapter 세팅 후 타이머 실행
+        val handler = Handler()
+        val Update = Runnable {
+            val nextPage = currentPage + 1
+            binding.vpBanner.setCurrentItem(nextPage, true)
+            currentPage = nextPage
+        }
+        timer = Timer()
+        // thread에 작업용 thread 추가
+        timer?.schedule(object : TimerTask() {
+            override fun run() {
+                handler.post(Update)
+            }
+        }, DELAY_MS, PERIOD_MS)
+    }
+
+    override fun onResume() {
+        super.onResume()
+        timerStart()
+    }
+
+    override fun onPause() {
+        super.onPause()
+        // 다른 탭으로 이동 시 타이머 중지시킴
+        if (timer != null) {
+            timer!!.cancel()
+            timer = null
         }
     }
 }
diff --git a/app/src/main/res/layout/activity_main.xml b/app/src/main/res/layout/activity_main.xml
@@ -29,5 +29,13 @@
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintStart_toStartOf="parent"
             app:menu="@menu/navigation_item" />
+        <ProgressBar
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintTop_toTopOf="parent"
+            android:visibility="gone"
+            app:layout_constraintBottom_toBottomOf="parent"/>
     </androidx.constraintlayout.widget.ConstraintLayout>
 </layout>
diff --git a/app/src/main/res/layout/frag_main_home.xml b/app/src/main/res/layout/frag_main_home.xml
@@ -13,21 +13,14 @@
             android:layout_width="match_parent"
             android:layout_height="wrap_content">
 
-<!--            <androidx.viewpager2.widget.ViewPager2-->
-<!--                android:id="@+id/vp_banner"-->
-<!--                android:layout_width="match_parent"-->
-<!--                android:layout_height="346dp"-->
-<!--                app:layout_constraintEnd_toEndOf="parent"-->
-<!--                app:layout_constraintStart_toStartOf="parent"-->
-<!--                app:layout_constraintTop_toTopOf="parent" />-->
-
-            <include
-                android:id="@+id/introTitleLayout"
-                layout="@layout/item_banner"
+            <androidx.viewpager2.widget.ViewPager2
+                android:id="@+id/vp_banner"
                 android:layout_width="match_parent"
-                android:layout_height="wrap_content"
-                app:layout_constraintTop_toTopOf="parent"
-                app:layout_scrollFlags="scroll" />
+                android:layout_height="346dp"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toTopOf="parent" />
+
 
 
             <com.google.android.material.tabs.TabLayout
@@ -38,7 +31,7 @@
                 android:background="@color/gray_14"
                 app:layout_constraintEnd_toEndOf="parent"
                 app:layout_constraintStart_toStartOf="parent"
-                app:layout_constraintTop_toBottomOf="@id/introTitleLayout"
+                app:layout_constraintTop_toBottomOf="@id/vp_banner"
                 app:tabBackground="@drawable/tab_selector" />
 
             <androidx.constraintlayout.widget.ConstraintLayout

diff --git a/app/src/main/res/layout/item_banner.xml b/app/src/main/res/layout/item_banner.xml
@@ -3,12 +3,12 @@
     xmlns:app="http://schemas.android.com/apk/res-auto"
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
-    android:layout_height="wrap_content">
+    android:layout_height="match_parent">
 
     <ImageView
         android:id="@+id/iv_event"
         android:layout_width="0dp"
-        android:layout_height="346dp"
+        android:layout_height="match_parent"
         android:background="@color/black"
         android:scaleType="centerCrop"
         app:layout_constraintBottom_toBottomOf="parent"
@@ -17,6 +17,7 @@
         app:layout_constraintTop_toTopOf="parent" />
 
     <androidx.constraintlayout.widget.ConstraintLayout
+        android:id="@+id/cl_title"
         android:layout_width="match_parent"
         android:layout_height="90dp"
         android:background="@drawable/background_banner_text_area"
@@ -39,4 +40,14 @@
 
     </androidx.constraintlayout.widget.ConstraintLayout>
 
+    <include
+        android:id="@+id/chip_banner"
+        layout="@layout/chip_event"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        app:layout_constraintStart_toStartOf="parent"
+        android:layout_marginStart="16dp"
+        android:layout_marginBottom="4dp"
+        app:layout_constraintBottom_toTopOf="@id/cl_title"/>
+
 </androidx.constraintlayout.widget.ConstraintLayout>
diff --git a/app/src/main/res/values/themes.xml b/app/src/main/res/values/themes.xml
@@ -21,6 +21,8 @@
         <item name="android:textColorLink">@color/gray_06</item>
         <!-- EditText의 커서 색상 지정 -->
         <item name="android:textCursorDrawable">@drawable/cursor_drawable</item>
+        <!-- progressbar 색상 지정 -->
+        <item name="android:indeterminateTint">@color/primary</item>
     </style>
 
     <!-- Splash Theme -->