[Kotlin] viewPager2, indicator

 

결과물

 

설명

보통은 viewPager와 tabView를 같이 쓰지만 인디케이터만을 사용하기 위해서 직접 ImageView를 이용하여 인디케이터를 만들어 사용하였으며 페이지에 들어갈 프래그먼트는 이미 만들어둔 게 있어 만들어 둔 것을 사용하였다

viewpager, indicator

viewPager

• 화면을 옆으로 넘기는 기능, 결과물과 같이 되어있다
• 보통은 TabView와 같이 사용하는 경우가 많다

indicator

• 화면을 넘기는 경우 몇 번째 화면인지 시각적으로 알려주기 위한 경우로 많이 사용됨 
• TabView에도 기능이 있다.

 

순서

1) Drawable에서 두 가지 파일을 만들어준다 

하나는 선택된 페이지에서의 indicator 하나는 선택되지 않은 페이지에서의 indicator

선택되지 않은 페이지

indicator.dot.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

    <solid
        android:color="@color/dark_gray"/>
</shape>

선택된 페이지

indicator.empty.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

    <solid
        android:color="@color/black"/>

</shape>

 

xml

activity_tab_layout_pager_new

<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.LinearLayoutCompat 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=".TableLayoutPagerActivity">

    <androidx.appcompat.widget.LinearLayoutCompat
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:gravity="center"
        android:orientation="horizontal">

        <ImageView
            android:id="@+id/indicator1"
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:src="@drawable/indicator_dot" />

        <ImageView
            android:id="@+id/indicator2"
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:layout_marginLeft="5dp"
            android:src="@drawable/indicator_dot" />

        <ImageView
            android:id="@+id/indicator3"
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:layout_marginLeft="5dp"
            android:src="@drawable/indicator_dot" />

    </androidx.appcompat.widget.LinearLayoutCompat>


    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />


</androidx.appcompat.widget.LinearLayoutCompat>

 

TabLayoutPagerNewActivity

사용할 프래그먼트를 어댑터에서 설정해 놓으면 된다.

class TabLayoutPagerNewActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_tab_layout_pager_new)

       
        val viewpager = findViewById<ViewPager2>(R.id.viewPager)
        val indicator1 = findViewById<ImageView>(R.id.indicator1)
        val indicator2 = findViewById<ImageView>(R.id.indicator2)
        val indicator3 = findViewById<ImageView>(R.id.indicator3)

        //탭 레이아웃에 탭을 추가하는 방법


        //Pager에 adapter를 장착하는 방법
        viewpager.adapter = FragmentAdapter(this, 3)
        //페이저와 탭을 연결
        viewpager.registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() {


            override fun onPageSelected(position: Int) {
                indicator1.setImageDrawable(getDrawable(R.drawable.indicator_dot))
                indicator2.setImageDrawable(getDrawable(R.drawable.indicator_dot))
                indicator3.setImageDrawable(getDrawable(R.drawable.indicator_dot))

                when (position) {
                    0 -> indicator1.setImageDrawable(getDrawable(R.drawable.indicator_empty))
                    1 -> indicator2.setImageDrawable(getDrawable(R.drawable.indicator_empty))
                    2 -> indicator3.setImageDrawable(getDrawable(R.drawable.indicator_empty))
                }

            }

            override fun onPageScrollStateChanged(state: Int) {
                super.onPageScrollStateChanged(state)
            }
        })

      
    }
}


class FragmentAdapter(
    fragmentActivity: androidx.fragment.app.FragmentActivity,
    val tabCount: Int
) : FragmentStateAdapter(fragmentActivity) {
    override fun getItemCount(): Int {
        return tabCount
    }

    override fun createFragment(position: Int): Fragment {
        when (position) {
            0 -> return FragmentFirst()
            1 -> return FragmentFirst()
            else -> return FragmentFirst()
        }
    }


}