[Android Kotlin] 안드로이드 코틀린 ViewPager

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/tv1"
        android:text="hi hello"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

class MainActivity : AppCompatActivity() {

    var view_list = ArrayList<View>()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        view_list.add(layoutInflater.inflate(R.layout.view1, null))
        view_list.add(layoutInflater.inflate(R.layout.view2, null))
        view_list.add(layoutInflater.inflate(R.layout.view3, null))

        pager.adapter = CustomAdapter()

        pager.addOnPageChangeListener(object : ViewPager.OnPageChangeListener {
            // 스크롤 상태가 변경되었을 때
            override fun onPageScrollStateChanged(state: Int) {
            }

            override fun onPageScrolled(
                position: Int,
                positionOffset: Float,
                positionOffsetPixels: Int
            ) {
                tv1.text = "${position} 번째 뷰가 나타났습니다."
            }

            // 클릭했을 때
            override fun onPageSelected(position: Int) {

            }

        })
    }

    inner class CustomAdapter : PagerAdapter() {
        override fun isViewFromObject(view: View, `object`: Any): Boolean {
            return view == `object` // 3. 받은 이 두개가 일치할때만 반환.
        }

        override fun getCount(): Int {
            return view_list.size
        }

        // 항목을 구성하기 위해서 호출
        // 보여주고자 하는 뷰를 페이저 객체에 집어 넣고 반환하면 된다.
        override fun instantiateItem(
            container: ViewGroup,
            position: Int
        ): Any { // position : 항목의 인덱스
            pager.addView(view_list[position]) // 1. 얘가 isViewFromObject의 view로 들어오고

            return view_list[position] // 2. 얘가 isViewFromObject의 `object`로 들어온다.
        }

        override fun destroyItem(container: ViewGroup, position: Int, `object`: Any) {
            pager.removeView(`object` as View?)
        }
    }
}

 

 

 

우리가 여러 어플을 사용할 때 화면 전환을 터치로 넘기면서 휙휙 이동하는 ViewPager이다. 뷰 ArrayList에 미리 만들어 놓은 뷰들을 집어넣고, 중첩클래스로 어뎁터에 PagerAdapter을 상속 시키고 사용한다. 가장 중요한 것은 instantiateItem인데 현재 보여질 레이아웃을 리턴하는 메서드이다. 여기서 view_list[position]이 isViewFromObject의 view로 들어가고, return view_list[position]이 isViewFromObject의 `object`로 들어간다. 일치할때만 화면에 뿌린다. 

 

그리고 addOnPageChangeListener을 통해서 페이저의 상태에 따라서 동작을 시키게 할 수 있다.

1. onPageScrollStateChanged : 스크롤 상태가 변경되었을 때

2. onPageSelected : 클릭했을 때

3. onPageScrolled : 페이지가 스크롤 되었을 때

 

onPageScrolled 에서 position으로 들어오는 것이 보여지는 페이지의 인덱스이다.

 

이것들을 활용해서 만들면 될 것 같다. 활용은 자유!