[Kotlin] 안드로이드에서 iOS UiPageViewController의 dots (점) 유를 구현

 TODO


  • 튜토리얼 등에서 사용되는 가로 스크롤하여 한 페이지씩 열람하는 화면을 안드로이드로 실현한다

  • 예는 iOS 홈


    구현



    ViewPager와 TabLayout으로 실현됩니다.
    점 부분이 TabLayout입니다.

    이 셀렉터가 키모
    선택 상태 흰색, 비 선택 상태에서는 unselectedIndicator로 회색으로하면 iOS에 가깝습니다.

    indicator_selector.xml
    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:state_selected="true">
            <shape
                android:innerRadius="0dp"
                android:shape="ring"
                android:thickness="4dp"
                android:useLevel="false">
                <solid android:color="@android:color/white" />
            </shape>
        </item>
        <item>
            <shape
                android:innerRadius="0dp"
                android:shape="ring"
                android:thickness="4dp"
                android:useLevel="false">
                <solid android:color="@color/unselectedIndicator" />
            </shape>
        </item>
    </selector>
    

    fragment_main.xml
    <FrameLayout 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">
    
        <androidx.viewpager.widget.ViewPager
            android:id="@+id/sign_walk_through_view_pager"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    
        <com.google.android.material.tabs.TabLayout
            android:id="@+id/sign_walk_through_indicator"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|center"
            android:layout_marginBottom="8dp"
            android:background="@android:color/transparent"
            app:tabBackground="@drawable/indicator_selector"
            app:tabGravity="center"
            app:tabIndicatorHeight="0dp" />
    
    </FrameLayout>
    

    WalkThroughFragment.kt
    class WalkThroughFragment : Fragment() {
    
        override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
            return inflater.inflate(R.layout.fragment_walk_through, container, false)
        }
    
        override fun onActivityCreated(savedInstanceState: Bundle?) {
            super.onActivityCreated(savedInstanceState)
    
            adapter = WalkThroughFragmentPagerAdapter(childFragmentManager)
            walk_through_view_pager.adapter = adapter
            walk_through_indicator.setupWithViewPager(walk_through_view_pager)
        }
    
        private inner class WalkThroughFragmentPagerAdapter(manager: FragmentManager) : FragmentPagerAdapter(manager) {
    
            override fun getItem(position: Int): Fragment? {
                when (position) {
                    0 -> return WalkThroughFirstFragment()
                    1 -> return WalkThroughSecondFragment()
                    2 -> return WalkThroughThirdFragment()
                    3 -> return WalkThroughFourthFragment()
                }
                return null
            }
    
            override fun getCount(): Int {
                return 4
            }
        }
    }
    

    좋은 웹페이지 즐겨찾기