UMC 3주차 - Viewpager 구현하기

• HomeFragment에서 banner 부분 Viewpager 구현하기‼️
• AlbumFragment 에 TabLayout + Viewpager 추가 구현하기‼️
• AlbumFragment Viewpager 에 DetailFragment, VideoFragment 구현하기‼️

 

 

 

---

 

 

 

 

 

• ViewPager
• TabLayout
• BottomNavigation
• Adapter

 

 

---

 

 

 

 

fragment_banner.xml

<?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="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    
    <ImageView
        android:id="@+id/banner_image_iv"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:src="@drawable/img_home_viewpager_exp"
        android:scaleType="fitXY"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

 

 

 

 

BannerFragment.kt

package com.example.flo

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.fragment.app.Fragment
import com.example.flo.databinding.FragmentAlbumBinding
import com.example.flo.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)

        return binding.root
    }

 

 

 

 

 

BannerViewpagerAdapter.kt

package com.example.flo

import androidx.fragment.app.Fragment
import androidx.viewpager2.adapter.FragmentStateAdapter

class BannerViewpagerAdapter (fragment: Fragment):FragmentStateAdapter(fragment){


    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)//viewpager
    }
}

 

 

 

AlbumFragment

package com.example.flo

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.Toast
import androidx.fragment.app.Fragment
import com.example.flo.databinding.FragmentAlbumBinding
import com.google.android.material.tabs.TabLayoutMediator

class AlbumFragment : Fragment() {

    lateinit var binding: FragmentAlbumBinding

    val information= arrayListOf("수록곡", "상세정보", "영상")

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): 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,"라일락", Toast.LENGTH_SHORT).show()
//        }
//  3주차 34초

        val albumAdapter = AlbumViewpagerAdapter(this)
        binding.albumContentVp.adapter=albumAdapter
        TabLayoutMediator(binding.albumContentTb, binding.albumContentVp){
            tab, position ->
            tab.text =information[position]
        }.attach()
        return binding.root
    }
}

 

 

 

 

 

AlbumFragment Viewpager

 

package com.example.flo

import androidx.fragment.app.Fragment
import androidx.viewpager2.adapter.FragmentStateAdapter

class AlbumViewpagerAdapter(fragment: Fragment):FragmentStateAdapter(fragment) {

    override fun getItemCount(): Int=3
    override fun createFragment(position: Int): Fragment {
        return when(position){
            0 ->SongFragment()
            1 ->DetailFragment()
            else ->VideoFragment()
        }
    }
}