[Android] ViewPager 로 Banner 구현

ViewPager를 이용하여 FLO앱의 배너를 구현해보자.

 

먼저 단순히 이미지뷰로 설정했었던 이미지를 ViewPager2 로 바꾸자.

ViewPager와 ViewPager2가 있는데, 2는 VIewPager의 단점을 보완하며 새로 나온 버전이라 생각하면 된다.

<androidx.viewpager2.widget.ViewPager2
    android:id="@+id/home_banner_vp"
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:layout_marginTop="15dp"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toBottomOf="@id/home_today_music_oversea_hs"/>

위의 코드처럼 ViewPager2로 배너의 위치를 먼저 잡아주자.

그 다음 배너프래그먼트를 만들고, 홈프래그먼트와 연결해줄 배너 Adapter클래스도 생성해주자.

어댑터는 홈프래그먼트와 배너프래그먼트를 연결해주는 연결 선이라고 생각하면 된다!

다음은 배너프래그먼트.xml파일이다.

<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/banner_image_iv"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:scaleType="fitXY"
        android:src="@drawable/img_home_viewpager_exp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

위의 코드에서 주의할 점이 있다!!

전체 뷰의 height를 wrap_content로 잡아주어야 한다.

왜냐하면 이 xml파일은 단순히 배너의 이미지만 담기 때문에 딱 그 크기만큼 height로 설정해주어야 하기 때문이다!

 

다음은 어댑터클래스이다.

//뷰페이지에 이미지를 넣어주어야함
//하나의 프래그먼트를 만들어서 넣어주는 형태
class BannerVPAdapter(fragment:Fragment) : FragmentStateAdapter(fragment){
    //이 클래스 안에서만 사용할 것
    private val fragmentlist : ArrayList<Fragment> = ArrayList()

    //프래그먼트리스트에 담긴 프래그먼트의 수를 반환
    override fun getItemCount(): Int {
        return fragmentlist.size
    }
    //프래그먼트를 생성해줌.
    override fun createFragment(position: Int): Fragment = fragmentlist[position]

    fun addFragment(fragment: Fragment){
        fragmentlist.add(fragment)
        notifyItemInserted(fragmentlist.size - 1) //프래그먼트가 하나 추가되었을 때 사이즈를 하나 줄여줌으로써 추가된 것을 알려줌
        //0번쨰에 저장하기 위해
    }
}

배너어댑터클래스는 사용할 프래그먼트를 인자로 받으며 생성이 된다.

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 //좌우로 스크롤 해줄수 있음

위의 코드는 홈프래그먼트에서 배너어댑터클래스를 사용해준 부분의 코드이다.

배너어댑터로 홈프래그먼트(this)를 전달하고 bannerAdapter에 저장한다.

변수 bannerAdapter를 가지고 위에서 생성해준 addFragment함수로 BannerFragment를 연결해준다.

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
    }
}

배너프래그먼트클래스는 이미지를 인자로 받으며, 여러 이미지가 셋팅될 수 있게 해주는 클래스이다.

HomeFragment  <-> BannerAdapter <-> BannerFragment

이러한 형태로 서로 연결해준다고 생각하면 편리하다.

요약하자면 다음과 같다.

1. 홈프래그먼트에서 배너어댑터하고 연결한다.
2. 사진을 들고 배너프래그먼트에 저장한 뒤 어댑터의 addFragment메소드를 통해 변수 bannerAdapter에 저장한다.
3. binding을 통해 배너가 담긴 ViewPager2에 bannerAdapter를 저장하면 끝이난다.

결과화면