#TIL 24 안드로이드 코틀린 뷰페이저2 구현하기

 

첫 출근을 하고 드디어 과제를 받게 되었는데,

 

바로 스와이프 기능을 구현하는 것이다.

 

자바로는 뷰 페이저 2를 프래그먼트와 사용했지만, 이제는

 

코틀린으로 사용해야한다. 어디 한번 코틀린으로 사용하는 법을 알아보자.

 

---

해결책

https://todaycode.tistory.com/26

코틀린 viewPager2 : 사용법, 애니메이션 등

대부분에 자료는 이 곳에서 알게 되었으므로, 출처를 남기겠습니다.

 

우선 코틀린이 많이 처음이라 자세한 부분을 설명하기보다는

 

코드 안에 설명을 올려, 읽어보시면서 이해하셨으면 좋겠습니다.

 

디펜던시에 뷰 페이저를 작성해줍니다.

 

dependencies {
    implementation 'androidx.viewpager2:viewpager2:1.0.0-alpha01'
    }

 

우선  MainActivity.kt입니다.

class MainActivity : AppCompatActivity() {

    private val MIN_SCALE = 0.8f // 뷰가 몇퍼센트로 줄어들 것인지
    private val MIN_ALPHA = 0.8f // 어두워지는 정도를 나타낸 듯 하다.

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

        val viewPager_idol : ViewPager2 = findViewById(R.id.viewPager_idol)

        /* 여백, 너비에 대한 정의 */
        val pageMarginPx = resources.getDimensionPixelOffset(R.dimen.pageMargin) // dimen 파일 안에 크기를 정의해두었다.
        val pagerWidth = resources.getDimensionPixelOffset(R.dimen.pageWidth) // dimen 파일이 없으면 생성해야함
        val screenWidth = resources.displayMetrics.widthPixels // 스마트폰의 너비 길이를 가져옴
        val offsetPx = screenWidth - pageMarginPx - pagerWidth

        viewPager_idol.setPageTransformer { page, position ->
            page.translationX = position * -offsetPx
        }

        viewPager_idol.offscreenPageLimit = 1 // 몇 개의 페이지를 미리 로드 해둘것인지

        viewPager_idol.adapter = ViewPagerAdapter(getIdolList()) // 어댑터 생성
        viewPager_idol.orientation = ViewPager2.ORIENTATION_HORIZONTAL // 방향을 가로로
        viewPager_idol.setPageTransformer(ZoomOutPageTransformer()) // 애니메이션 적용

    }

    // 뷰 페이저에 들어갈 아이템
    private fun getIdolList(): ArrayList<Int> {
        return arrayListOf<Int>(R.drawable.idol1, R.drawable.idol2, R.drawable.idol3)
    }

    /* 공식문서에 있는 코드 긁어온거임 */
    inner class ZoomOutPageTransformer : ViewPager2.PageTransformer {
        override fun transformPage(view: View, position: Float) {
            view.apply {
                val pageWidth = width
                val pageHeight = height
                when {
                    position < -1 -> { // [-Infinity,-1)
                        // This page is way off-screen to the left.
                        alpha = 0f
                    }
                    position <= 1 -> { // [-1,1]
                        // Modify the default slide transition to shrink the page as well
                        val scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position))
                        val vertMargin = pageHeight * (1 - scaleFactor) / 2
                        val horzMargin = pageWidth * (1 - scaleFactor) / 2
                        translationX = if (position < 0) {
                            horzMargin - vertMargin / 2
                        } else {
                            horzMargin + vertMargin / 2
                        }

                        // Scale the page down (between MIN_SCALE and 1)
                        scaleX = scaleFactor
                        scaleY = scaleFactor

                        // Fade the page relative to its size.
                        alpha = (MIN_ALPHA +
                                (((scaleFactor - MIN_SCALE) / (1 - MIN_SCALE)) * (1 - MIN_ALPHA)))
                    }
                    else -> { // (1,+Infinity]
                        // This page is way off-screen to the right.
                        alpha = 0f
                    }
                }
            }
        }
    }
}

 

순서보다는 예전 자바 뷰 페이저 2와 비슷한 방법인 것 같습니다.

 

메인에 뷰 페이저의 크기를 설정하고, 아이템을 받을 수 있게 어댑터를 연동합니다.

 

어댑터 부분을 보겠습니다.

 

class ViewPagerAdapter(idolList: ArrayList<Int>) : RecyclerView.Adapter<ViewPagerAdapter.PagerViewHolder>() {
    var item = idolList

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int) = PagerViewHolder((parent))

    override fun getItemCount(): Int = item.size

    override fun onBindViewHolder(holder: PagerViewHolder, position: Int) {
        holder.idol.setImageResource(item[position])
    }

    inner class PagerViewHolder(parent: ViewGroup) : RecyclerView.ViewHolder
        (LayoutInflater.from(parent.context).inflate(R.layout.idol_list_item, parent, false)){

        val idol = itemView.findViewById<ImageView>(R.id.imageView_idol)!!
    }
}

코드가 리사이클 러뷰와 매우 유사합니다.

 

onCreateViewHolder에서 뷰 객체를 만들어주고,

 

getItemCount 메서드를 호출하여 아이템 개수만큼 

 

출력하고,

 

position 넘버 별로 뷰 객체에 담아주어 이미지를 출력해줍니다.

 

xml도 보시면

 

activity_main.xml에는

 

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    tools:context=".MainActivity">

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewPager_idol"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:clipToPadding="false"
        android:clipChildren="false"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


</androidx.constraintlayout.widget.ConstraintLayout>

 

 

뷰 페이저를 넣어주시고,

 

출력할 아이템을 담을 이미지 뷰는 따로 만들어 주시면 됩니다.

 

idol_list_item.xml

 

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/imageView_idol"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/idol1" />
</androidx.constraintlayout.widget.ConstraintLayout>

이렇게 완성하면

20210420_163731.mp4

5.31MB

 

갑자기 파일 첨부가 안돼서 이렇게 올린다

 

이런 식으로 뷰 페이저가 완성이 된다.

 

자세한 정보는 깃허브링크를 올려두겠다.

 

https://github.com/qjsqjsaos/ViewPager_Kotlin

qjsqjsaos/ViewPager_Kotlin