Feat: 3주차 미션 HomeFragment에 ViewPager와 자동 슬라이드, Indicator 추가

modzivv · modzivv · commit 4e0ba48de680 · 2024-11-06T13:07:14.000+09:00
diff --git a/Heather/FLOClone/app/build.gradle.kts b/Heather/FLOClone/app/build.gradle.kts
@@ -45,6 +45,7 @@ dependencies {
     implementation(libs.material)
     implementation(libs.androidx.activity)
     implementation(libs.androidx.constraintlayout)
+    implementation("me.relex:circleindicator:2.1.6")
     testImplementation(libs.junit)
     androidTestImplementation(libs.androidx.junit)
     androidTestImplementation(libs.androidx.espresso.core)
diff --git a/Heather/FLOClone/app/src/main/java/com/example/floclone/BannerVPAdapter.kt b/Heather/FLOClone/app/src/main/java/com/example/floclone/BannerVPAdapter.kt
@@ -11,7 +11,7 @@ class BannerVPAdapter(fragment: Fragment) :FragmentStateAdapter(fragment) {
 
     override fun createFragment(position: Int): Fragment = fragmentlist[position]
 
-    fun addFragment(fragment: Fragment){
+    fun addFragment(fragment: Fragment) {
         fragmentlist.add(fragment)
         notifyItemInserted(fragmentlist.size-1)
     }
diff --git a/Heather/FLOClone/app/src/main/java/com/example/floclone/HomeFragment.kt b/Heather/FLOClone/app/src/main/java/com/example/floclone/HomeFragment.kt
@@ -7,10 +7,15 @@ import android.view.View
 import android.view.ViewGroup
 import androidx.viewpager2.widget.ViewPager2
 import com.example.floclone.databinding.FragmentHomeBinding
+import me.relex.circleindicator.CircleIndicator3
+import android.os.Handler
+import android.os.Looper
 
 class HomeFragment : Fragment() {
 
     lateinit var binding: FragmentHomeBinding
+    lateinit var handler: Handler
+    lateinit var runnable: Runnable
 
     override fun onCreateView(
         inflater: LayoutInflater,
@@ -24,12 +29,38 @@ class HomeFragment : Fragment() {
                 .replace(R.id.main_frm, AlbumFragment()).commitAllowingStateLoss()
         }
 
+        // ViewPager 설정
         val bannerAdapter = BannerVPAdapter(this)
         bannerAdapter.addFragment(BannerFragment(R.drawable.img_home_viewpager_exp))
         bannerAdapter.addFragment(BannerFragment(R.drawable.img_home_viewpager_exp2))
         binding.homeBannerVp.adapter = bannerAdapter
         binding.homeBannerVp.orientation = ViewPager2.ORIENTATION_HORIZONTAL
 
+        val panelAdpater = PanelVPAdapter(this)
+        panelAdpater.addFragment(PanelFragment(R.drawable.img_first_album_default))
+        panelAdpater.addFragment(PanelFragment(R.drawable.img_first_album_default))
+        binding.homePanelBackgroundVp.adapter = panelAdpater
+        binding.homePanelBackgroundVp.orientation = ViewPager2.ORIENTATION_HORIZONTAL
+
+        // Indicator 설정
+        val indicator: CircleIndicator3 = binding.homePanelIndicator
+        indicator.setViewPager(binding.homeBannerVp)
+
+        // 자동 슬라이드 구현
+        handler = Handler(Looper.getMainLooper())
+        runnable = object : Runnable {
+            override fun run() {
+                if (binding.homePanelBackgroundVp.currentItem == bannerAdapter.itemCount - 1) {
+                    binding.homePanelBackgroundVp.currentItem = 0
+                } else {
+                    binding.homePanelBackgroundVp.currentItem = binding.homePanelBackgroundVp.currentItem + 1
+                }
+                handler.postDelayed(this, 3000) // 3초마다 슬라이드
+            }
+        }
+        handler.postDelayed(runnable, 3000) // 최초 실행
+
+
         return binding.root
     }
 
diff --git a/Heather/FLOClone/app/src/main/java/com/example/floclone/PanelFragment.kt b/Heather/FLOClone/app/src/main/java/com/example/floclone/PanelFragment.kt
@@ -0,0 +1,26 @@
+package com.example.floclone
+
+import android.os.Bundle
+import androidx.fragment.app.Fragment
+import android.view.LayoutInflater
+import android.view.View
+import android.view.ViewGroup
+import com.example.floclone.databinding.FragmentPanelBinding
+
+class PanelFragment(val imgRes : Int) : Fragment() {
+    lateinit var binding : FragmentPanelBinding
+
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+
+    }
+
+    override fun onCreateView(
+        inflater: LayoutInflater, container: ViewGroup?,
+        savedInstanceState: Bundle?
+    ): View? {
+        binding = FragmentPanelBinding.inflate(inflater, container, false)
+        binding.pannelImageIv.setImageResource(imgRes)
+        return binding.root
+    }
+}
diff --git a/Heather/FLOClone/app/src/main/java/com/example/floclone/PanelVPAdapter.kt b/Heather/FLOClone/app/src/main/java/com/example/floclone/PanelVPAdapter.kt
@@ -0,0 +1,18 @@
+package com.example.floclone
+
+import androidx.fragment.app.Fragment
+import androidx.viewpager2.adapter.FragmentStateAdapter
+
+class PanelVPAdapter(fragment: Fragment) : FragmentStateAdapter(fragment) {
+
+    private val fragmentList: ArrayList<Fragment> = ArrayList()
+
+    override fun getItemCount(): Int = fragmentList.size
+
+    override fun createFragment(position: Int): Fragment = fragmentList[position]
+
+    fun addFragment(fragment: Fragment) {
+        fragmentList.add(fragment)
+        notifyItemInserted(fragmentList.size - 1)
+    }
+}
diff --git a/Heather/FLOClone/app/src/main/res/drawable/indicator_selected_circle.xml b/Heather/FLOClone/app/src/main/res/drawable/indicator_selected_circle.xml
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="oval">
+    <solid android:color="@color/select_color"/>
+    <size android:width="5dp"
+        android:height="5dp"/>
+</shape>
diff --git a/Heather/FLOClone/app/src/main/res/drawable/indicator_unselected_circle.xml b/Heather/FLOClone/app/src/main/res/drawable/indicator_unselected_circle.xml
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="oval">
+    <solid android:color="@color/gray_color"/>
+    <size android:width="5dp"
+        android:height="5dp"/>
+</shape>
diff --git a/Heather/FLOClone/app/src/main/res/layout/fragment_home.xml b/Heather/FLOClone/app/src/main/res/layout/fragment_home.xml
@@ -10,38 +10,49 @@
         android:layout_width="match_parent"
         android:layout_height="wrap_content">
 
-        <ImageView
-            android:id="@+id/home_pannel_background_iv"
+        <androidx.viewpager2.widget.ViewPager2
+            android:id="@+id/home_panel_background_vp"
             android:layout_width="match_parent"
             android:layout_height="430dp"
             android:scaleType="centerCrop"
-            android:src="@drawable/img_first_album_default"
             app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintHorizontal_bias="0.0"
             app:layout_constraintStart_toStartOf="parent"
-            app:layout_constraintTop_toTopOf="parent" />
+            app:layout_constraintTop_toTopOf="parent"/>
+
+        <me.relex.circleindicator.CircleIndicator3
+            android:id="@+id/home_panel_indicator"
+            android:layout_width="wrap_content"
+            android:layout_height="15dp"
+            android:layout_marginTop="5dp"
+            app:layout_constraintTop_toBottomOf="@id/home_panel_background_vp"
+            app:layout_constraintEnd_toEndOf="@id/home_panel_background_vp"
+            app:layout_constraintStart_toStartOf="@id/home_panel_background_vp"
+            app:ci_drawable="@drawable/indicator_selected_circle"
+            app:ci_drawable_unselected="@drawable/indicator_unselected_circle"/>
 
         <ImageView
-            android:id="@+id/home_pannel_btn_nugu_iv"
+            android:id="@+id/home_panel_btn_nugu_iv"
             android:layout_width="35dp"
             android:layout_height="35dp"
             android:layout_marginTop="20dp"
             android:layout_marginEnd="15dp"
             android:src="@drawable/btn_main_mike"
-            app:layout_constraintEnd_toStartOf="@id/home_pannel_btn_ticket_iv"
+            app:layout_constraintEnd_toStartOf="@id/home_panel_btn_ticket_iv"
             app:layout_constraintTop_toTopOf="parent" />
 
         <ImageView
-            android:id="@+id/home_pannel_btn_ticket_iv"
+            android:id="@+id/home_panel_btn_ticket_iv"
             android:layout_width="35dp"
             android:layout_height="35dp"
             android:layout_marginTop="20dp"
             android:layout_marginEnd="15dp"
             android:src="@drawable/btn_main_ticket"
-            app:layout_constraintEnd_toStartOf="@id/home_pannel_btn_setting_iv"
+            app:layout_constraintEnd_toStartOf="@id/home_panel_btn_setting_iv"
             app:layout_constraintTop_toTopOf="parent" />
 
         <ImageView
-            android:id="@+id/home_pannel_btn_setting_iv"
+            android:id="@+id/home_panel_btn_setting_iv"
             android:layout_width="35dp"
             android:layout_height="35dp"
             android:layout_marginTop="20dp"
@@ -51,7 +62,7 @@
             app:layout_constraintTop_toTopOf="parent" />
 
         <TextView
-            android:id="@+id/home_pannel_title_tv"
+            android:id="@+id/home_panel_title_tv"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_marginStart="20dp"
@@ -61,98 +72,98 @@
             android:textSize="28sp"
             android:textStyle="bold"
             app:layout_constraintStart_toStartOf="parent"
-            app:layout_constraintTop_toBottomOf="@id/home_pannel_btn_nugu_iv" />
+            app:layout_constraintTop_toBottomOf="@id/home_panel_btn_nugu_iv" />
 
         <ImageView
-            android:id="@+id/home_pannel_btn_play_iv"
+            android:id="@+id/home_panel_btn_play_iv"
             android:layout_width="60dp"
             android:layout_height="60dp"
             android:layout_marginEnd="20dp"
             android:src="@drawable/btn_panel_play_large"
             app:layout_constraintEnd_toEndOf="parent"
-            app:layout_constraintTop_toBottomOf="@id/home_pannel_title_tv" />
+            app:layout_constraintTop_toBottomOf="@id/home_panel_title_tv" />
 
         <TextView
-            android:id="@+id/home_pannel_album_info_01_tv"
+            android:id="@+id/home_panel_album_info_01_tv"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_marginStart="20dp"
             android:layout_marginBottom="12dp"
             android:text="총 15곡 2019.11.11"
             android:textColor="@color/white"
             android:textSize="12sp"
-            app:layout_constraintBottom_toTopOf="@id/home_pannel_album_img_01_iv"
+            app:layout_constraintBottom_toTopOf="@id/home_panel_album_img_01_iv"
             app:layout_constraintStart_toStartOf="parent" />
 
 
         <ImageView
-            android:id="@+id/home_pannel_album_img_01_iv"
+            android:id="@+id/home_panel_album_img_01_iv"
             android:layout_width="40dp"
             android:layout_height="40dp"
             android:layout_marginStart="20dp"
             android:layout_marginBottom="30dp"
             android:src="@drawable/img_album_exp"
-            app:layout_constraintBottom_toTopOf="@id/home_pannel_album_img_02_iv"
+            app:layout_constraintBottom_toTopOf="@id/home_panel_album_img_02_iv"
             app:layout_constraintStart_toStartOf="parent" />
 
         <TextView
-            android:id="@+id/home_pannel_album_title_01_tv"
+            android:id="@+id/home_panel_album_title_01_tv"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_marginStart="15dp"
             android:text="잠이 안온다"
             android:textColor="@color/white"
             android:textStyle="bold"
-            app:layout_constraintBottom_toTopOf="@id/home_pannel_album_singer_02_tv"
-            app:layout_constraintStart_toEndOf="@id/home_pannel_album_img_01_iv"
-            app:layout_constraintTop_toTopOf="@id/home_pannel_album_img_01_iv" />
+            app:layout_constraintBottom_toTopOf="@id/home_panel_album_singer_02_tv"
+            app:layout_constraintStart_toEndOf="@id/home_panel_album_img_01_iv"
+            app:layout_constraintTop_toTopOf="@id/home_panel_album_img_01_iv" />
 
         <TextView
-            android:id="@+id/home_pannel_album_singer_02_tv"
+            android:id="@+id/home_panel_album_singer_02_tv"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_marginStart="15dp"
             android:text="젠(zen)"
             android:textColor="@color/white"
             android:textStyle="bold"
-            app:layout_constraintBottom_toBottomOf="@id/home_pannel_album_img_01_iv"
-            app:layout_constraintStart_toEndOf="@id/home_pannel_album_img_01_iv"
-            app:layout_constraintTop_toBottomOf="@id/home_pannel_album_title_01_tv" />
+            app:layout_constraintBottom_toBottomOf="@id/home_panel_album_img_01_iv"
+            app:layout_constraintStart_toEndOf="@id/home_panel_album_img_01_iv"
+            app:layout_constraintTop_toBottomOf="@id/home_panel_album_title_01_tv" />
 
 
         <ImageView
-            android:id="@+id/home_pannel_album_img_02_iv"
+            android:id="@+id/home_panel_album_img_02_iv"
             android:layout_width="40dp"
             android:layout_height="40dp"
             android:layout_marginStart="20dp"
             android:layout_marginBottom="30dp"
             android:src="@drawable/img_album_exp"
-            app:layout_constraintBottom_toBottomOf="@id/home_pannel_background_iv"
+            app:layout_constraintBottom_toBottomOf="@id/home_panel_background_vp"
             app:layout_constraintStart_toStartOf="parent" />
 
         <TextView
-            android:id="@+id/home_pannel_album_title_03_tv"
+            android:id="@+id/home_panel_album_title_03_tv"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_marginStart="15dp"
             android:text="잠이 안온다"
             android:textColor="@color/white"
             android:textStyle="bold"
-            app:layout_constraintBottom_toTopOf="@id/home_pannel_album_singer_04_tv"
-            app:layout_constraintStart_toEndOf="@id/home_pannel_album_img_02_iv"
-            app:layout_constraintTop_toTopOf="@id/home_pannel_album_img_02_iv" />
+            app:layout_constraintBottom_toTopOf="@id/home_panel_album_singer_04_tv"
+            app:layout_constraintStart_toEndOf="@id/home_panel_album_img_02_iv"
+            app:layout_constraintTop_toTopOf="@id/home_panel_album_img_02_iv" />
 
         <TextView
-            android:id="@+id/home_pannel_album_singer_04_tv"
+            android:id="@+id/home_panel_album_singer_04_tv"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_marginStart="15dp"
             android:text="젠(zen)"
             android:textColor="@color/white"
             android:textStyle="bold"
-            app:layout_constraintBottom_toBottomOf="@id/home_pannel_album_img_02_iv"
-            app:layout_constraintStart_toEndOf="@id/home_pannel_album_img_02_iv"
-            app:layout_constraintTop_toBottomOf="@id/home_pannel_album_title_03_tv" />
+            app:layout_constraintBottom_toBottomOf="@id/home_panel_album_img_02_iv"
+            app:layout_constraintStart_toEndOf="@id/home_panel_album_img_02_iv"
+            app:layout_constraintTop_toBottomOf="@id/home_panel_album_title_03_tv" />
 
         <TextView
             android:id="@+id/home_today_music_title_tv"
@@ -166,7 +177,7 @@
             android:textSize="18sp"
             android:textStyle="bold"
             app:layout_constraintStart_toStartOf="parent"
-            app:layout_constraintTop_toBottomOf="@id/home_pannel_background_iv" />
+            app:layout_constraintTop_toBottomOf="@id/home_panel_background_vp" />
 
         <ImageView
             android:id="@+id/home_today_music_title_btn_iv"
@@ -189,7 +200,7 @@
             android:textColor="#3F3FFF"
             android:textSize="16sp"
             app:layout_constraintEnd_toStartOf="@id/home_today_music_domestic_tv"
-            app:layout_constraintTop_toBottomOf="@id/home_pannel_background_iv" />
+            app:layout_constraintTop_toBottomOf="@id/home_panel_background_vp" />
 
         <TextView
             android:id="@+id/home_today_music_domestic_tv"
@@ -200,7 +211,7 @@
             android:text="국내"
             android:textSize="16sp"
             app:layout_constraintEnd_toStartOf="@id/home_today_music_oversea_tv"
-            app:layout_constraintTop_toBottomOf="@id/home_pannel_background_iv" />
+            app:layout_constraintTop_toBottomOf="@id/home_panel_background_vp" />
 
         <TextView
             android:id="@+id/home_today_music_oversea_tv"
@@ -211,7 +222,7 @@
             android:text="해외"
             android:textSize="16sp"
             app:layout_constraintEnd_toEndOf="parent"
-            app:layout_constraintTop_toBottomOf="@id/home_pannel_background_iv" />
+            app:layout_constraintTop_toBottomOf="@id/home_panel_background_vp" />
 
         <HorizontalScrollView
             android:id="@+id/home_today_music_oversea_hs"
diff --git a/Heather/FLOClone/app/src/main/res/layout/fragment_panel.xml b/Heather/FLOClone/app/src/main/res/layout/fragment_panel.xml
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    android:layout_width="match_parent"
+    android:layout_height="wrap_content"
+    xmlns:app="http://schemas.android.com/apk/res-auto">
+
+    <ImageView
+        android:id="@+id/pannel_image_iv"
+        android:layout_width="match_parent"
+        android:layout_height="430dp"
+        android:scaleType="fitXY"
+        android:src="@drawable/img_first_album_default"
+        app:layout_constraintTop_toTopOf="parent"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintEnd_toEndOf="parent"/>
+
+</androidx.constraintlayout.widget.ConstraintLayout>

Original file line number	Diff line number	Diff line change
`@@ -11,7 +11,7 @@ class BannerVPAdapter(fragment: Fragment) :FragmentStateAdapter(fragment) {`
`11`	`11`
`12`	`12`	`override fun createFragment(position: Int): Fragment = fragmentlist[position]`
`13`	`13`
`14`		`- fun addFragment(fragment: Fragment){`
	`14`	`+ fun addFragment(fragment: Fragment) {`
`15`	`15`	`fragmentlist.add(fragment)`
`16`	`16`	`notifyItemInserted(fragmentlist.size-1)`
`17`	`17`	`}`