Feat: Fragment 화면에 ViewPager 및 TabLayout 구현

Author: modzivv

Heather/FLOClone/app/src/main/java/com/example/floclone/AlbumFragment.kt

@@ -5,12 +5,14 @@ import androidx.fragment.app.Fragment
 import android.view.LayoutInflater
 import android.view.View
 import android.view.ViewGroup
-import android.widget.Toast
+import com.google.android.material.tabs.TabLayoutMediator
 import com.example.floclone.databinding.FragmentAlbumBinding
 
 class AlbumFragment : Fragment() {
 
     lateinit var binding: FragmentAlbumBinding
+    private val information = arrayListOf("수록곡", "상세정보", "영상")
+
 
     override fun onCreateView(
         inflater: LayoutInflater,
@@ -19,14 +21,18 @@ class AlbumFragment : Fragment() {
     ): View? {
         binding = FragmentAlbumBinding.inflate(inflater, container, false)
 
+        // 뒤로가기 버튼
         binding.albumBackIv.setOnClickListener {
             (context as MainActivity).supportFragmentManager.beginTransaction()
                 .replace(R.id.main_frm, HomeFragment()).commitAllowingStateLoss()
         }
 
-        binding.songLalacLayout.setOnClickListener {
-            Toast.makeText(activity, "LILAC", Toast.LENGTH_SHORT).show()
-        }
+        // ViewPager랑 TabLayout 연결
+        val albumAdapter = AlbumVPAdapter(this)
+        binding.albumContentVp.adapter = albumAdapter
+        TabLayoutMediator(binding.albumContentTb, binding.albumContentVp) { tab, position ->
+            tab.text = information[position]
+        }.attach()
 
         return binding.root
     }

Heather/FLOClone/app/src/main/java/com/example/floclone/AlbumVPAdapter.kt

@@ -0,0 +1,16 @@
+package com.example.floclone
+
+import androidx.fragment.app.Fragment
+import androidx.viewpager2.adapter.FragmentStateAdapter
+
+class AlbumVPAdapter(fragment:Fragment) : FragmentStateAdapter(fragment) {
+    override fun getItemCount(): Int = 3
+
+    override fun createFragment(position: Int): Fragment {
+        return when(position){
+            0 -> SongFragment()
+            1 -> DetailFragment()
+            else -> VideoFragment()
+        }
+    }
+}

Heather/FLOClone/app/src/main/java/com/example/floclone/BannerFragment.kt

@@ -0,0 +1,23 @@
+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.FragmentBannerBinding
+
+class BannerFragment(val imgRes: Int) : Fragment() {
+
+    lateinit var binding : FragmentBannerBinding
+
+    override fun onCreateView(
+        inflater: LayoutInflater,
+        container: ViewGroup?,
+        savedInstanceState: Bundle?
+    ): View? {
+        binding = FragmentBannerBinding.inflate(inflater, container, false)
+        binding.bannerImageIv.setImageResource(imgRes)  // 전달받은 imgRes 사용
+        return binding.root
+    }
+}

Heather/FLOClone/app/src/main/java/com/example/floclone/BannerVPAdapter.kt

@@ -0,0 +1,18 @@
+package com.example.floclone
+
+import androidx.fragment.app.Fragment
+import androidx.viewpager2.adapter.FragmentStateAdapter
+
+class BannerVPAdapter(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)
+    }
+}

Heather/FLOClone/app/src/main/java/com/example/floclone/DetailFragment.kt

@@ -0,0 +1,24 @@
+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.FragmentDetailBinding
+
+class DetailFragment : Fragment() {
+
+    lateinit var binding: FragmentDetailBinding
+
+    override fun onCreateView(
+        inflater: LayoutInflater,
+        container: ViewGroup?,
+        savedInstanceState: Bundle?
+    ): View? {
+        binding = FragmentDetailBinding.inflate(inflater,container,false)
+
+        return binding.root
+    }
+
+}

Heather/FLOClone/app/src/main/java/com/example/floclone/HomeFragment.kt

@@ -5,6 +5,7 @@ import androidx.fragment.app.Fragment
 import android.view.LayoutInflater
 import android.view.View
 import android.view.ViewGroup
+import androidx.viewpager2.widget.ViewPager2
 import com.example.floclone.databinding.FragmentHomeBinding
 
 class HomeFragment : Fragment() {
@@ -23,6 +24,12 @@ class HomeFragment : Fragment() {
                 .replace(R.id.main_frm, AlbumFragment()).commitAllowingStateLoss()
         }
 
+        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
+
         return binding.root
     }
 

Heather/FLOClone/app/src/main/java/com/example/floclone/LockerFragment.kt

@@ -5,55 +5,27 @@ import androidx.fragment.app.Fragment
 import android.view.LayoutInflater
 import android.view.View
 import android.view.ViewGroup
+import com.example.floclone.databinding.FragmentLockerBinding
+import com.google.android.material.tabs.TabLayoutMediator
 
-// TODO: Rename parameter arguments, choose names that match
-// the fragment initialization parameters, e.g. ARG_ITEM_NUMBER
-private const val ARG_PARAM1 = "param1"
-private const val ARG_PARAM2 = "param2"
 
-/**
- * A simple [Fragment] subclass.
- * Use the [LockerFragment.newInstance] factory method to
- * create an instance of this fragment.
- */
 class LockerFragment : Fragment() {
-    // TODO: Rename and change types of parameters
-    private var param1: String? = null
-    private var param2: String? = null
-
-    override fun onCreate(savedInstanceState: Bundle?) {
-        super.onCreate(savedInstanceState)
-        arguments?.let {
-            param1 = it.getString(ARG_PARAM1)
-            param2 = it.getString(ARG_PARAM2)
-        }
-    }
+    lateinit var binding: FragmentLockerBinding
+    private val information = arrayListOf("저장한곡", "음악파일")
 
     override fun onCreateView(
-        inflater: LayoutInflater, container: ViewGroup?,
+        inflater: LayoutInflater,
+        container: ViewGroup?,
         savedInstanceState: Bundle?
-    ): View? {
-        // Inflate the layout for this fragment
-        return inflater.inflate(R.layout.fragment_locker, container, false)
-    }
+    ): View {
+        binding = FragmentLockerBinding.inflate(inflater, container, false)
+
+        val lockerAdapter = LockerVPAdapter(this)
+        binding.lockerContentVp.adapter = lockerAdapter
+        TabLayoutMediator(binding.lockerContentTb, binding.lockerContentVp) { tab, position ->
+            tab.text = information[position]
+        }.attach()
 
-    companion object {
-        /**
-         * Use this factory method to create a new instance of
-         * this fragment using the provided parameters.
-         *
-         * @param param1 Parameter 1.
-         * @param param2 Parameter 2.
-         * @return A new instance of fragment LockerFragment.
-         */
-        // TODO: Rename and change types and number of parameters
-        @JvmStatic
-        fun newInstance(param1: String, param2: String) =
-            LockerFragment().apply {
-                arguments = Bundle().apply {
-                    putString(ARG_PARAM1, param1)
-                    putString(ARG_PARAM2, param2)
-                }
-            }
+        return binding.root
     }
 }

Heather/FLOClone/app/src/main/java/com/example/floclone/LockerVPAdapter.kt

@@ -0,0 +1,15 @@
+package com.example.floclone
+
+import androidx.fragment.app.Fragment
+import androidx.viewpager2.adapter.FragmentStateAdapter
+
+class LockerVPAdapter (fragment : Fragment) : FragmentStateAdapter(fragment) {
+    override fun getItemCount(): Int  = 2
+
+    override fun createFragment(position: Int): Fragment {
+        return when(position){
+            0 -> SavedSongFragment()
+            else -> MusicFileFragment()
+        }
+    }
+}

Heather/FLOClone/app/src/main/java/com/example/floclone/MainActivity.kt

@@ -16,7 +16,6 @@ class MainActivity : AppCompatActivity() {
     private val songActivityLauncher = registerForActivityResult(ActivityResultContracts.StartActivityForResult()) { result ->
         if (result.resultCode == RESULT_OK) {
             val songTitle = result.data?.getStringExtra("songTitle")
-            // 노래 제목을 Toast 메시지로 출력
             songTitle?.let {
                 Toast.makeText(this, "$it", Toast.LENGTH_SHORT).show()
             }

Heather/FLOClone/app/src/main/java/com/example/floclone/MusicFileFragment.kt

@@ -0,0 +1,19 @@
+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.FragmentMusicFileBinding
+
+class MusicFileFragment: Fragment() {
+
+    lateinit var binding: FragmentMusicFileBinding
+
+    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
+        binding = FragmentMusicFileBinding.inflate(inflater, container, false)
+
+        return binding.root
+    }
+}