[안드로이드/Kotlin] ViewPager로 온보딩 페이지 간단히 구현하기

코틀린 환경에서 온보딩 페이지를 구현할 일이 생겼는데, 유투브에서 매우 친절한 영상을 찾아

 

1시간도 못되는 시간안에 온보딩 페이지를 구현할 수 있었다. (물론 영상에서는 자바로 진행하지만)

 

간단히 아래의 준비물들만 착착 적어넣으면 온보딩 페이지를 만들 수 있다.

 

 

- 페이지 구성에 필요한 별도의 PagerAdapter 클래스

 

PagerAdapter는 각 페이지를 구성하는 핵심 역할을 한다.

각 페이지에 띄울 이미지와 제목, 그리고 내용을 각 array로 구현하여 페이지별로 적용할 수 있고,

필요에 따라 버튼구성의 변경등도 가능하다. 

 

별도의 코틀린 파일로 생성하여 프로젝트에 추가한다.

 

아래의 코드는 필수적으로 구현해야 하는 부분들로, 기타 필요 요소들은 생략하였다.

class SliderAdapter : PagerAdapter {

    var context : Context
    private lateinit var layoutInflater : LayoutInflater

    constructor(context: Context) {
        this.context = context
    }
    
    .....

override fun isoverride fun isViewFromObject(view: View, `object`: Any): Boolean {
        return view == `object`
    }

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

    override fun instantiateItem(container: ViewGroup, position: Int): Any {
        layoutInflater = context.getSystemService(Context.LAYOUT_INFLATER_SERVICE) as LayoutInflater
        var view = layoutInflater.inflate(R.layout.slide_layout, container, false)

        var 이미지뷰 = view.findViewById(R.id.slide_image)
        var 페이지의제목= view.findViewById(R.id.heading)
        var 페이지의설명= view.findViewById(R.id.description)

        이미지뷰 .setImageResource(이미지배열[position])
        페이지의제목.text = 페이지제목배열[position]
        페이지의설명.text = 페이지설명배열[position]
        container.addView(view)

        return view
    }

    override fun destroyItem(container: ViewGroup, position: Int, `object`: Any) {

        container.removeView(`object` as 구현한레이아웃의종류)
    }
}

 

- 온보딩 페이지를 띄울 ViewPager 뷰

 

메인 액티비티의 레이아웃에 온보딩 페이지를 띄우도록 ViewPager 뷰를 추가한다.

보통 온보딩 페이지 형식에 맞게 화면에 꽉 채우게 만들면 될듯.

 

 

 

- 만들어 둔 PagerAdapter를 가져오기 위해 MainActivity에 코드 추가하기

 

이제 만들어 둔 SliderAdapter를 레이아웃에 ViewPager에 쏴주면 대략적인 작업이 마무리된다.

온보딩 페이지의 페이지를 표시하는 도트 레이아웃의 경우 유투브 영상에서는 LinearLayout을

사용했는데, 기존 프로젝트에 적용하기에 비효율적으로 보여 TabLayout으로 구현하였다. 

(이게 더 일반적인듯)

 

......

private val 온보딩뷰페이져 by lazy{
        findViewById<ViewPager>(R.id.뷰페이져ID)
}

private val 페이지Dot레이아웃 by lazy{
	findViewById<TabLayout>(R.id.페이지Dot레이아웃ID)
}

private lateinit var 슬라이더어댑터 : SliderAdapter

......

override fun onCreate(savedInstanceState : Bundle?) {

	슬라이더어댑터 = SliderAdapter(this)
    온보딩뷰페이져.adapter = 슬라이더어댑터
    페이지Dot레이아웃.setupWithViewPager(온보딩뷰페이져, true)

....

 

- 온보딩 페이지의 페이지를 표시하기 위한 DotLayout 구현

 

참조했던 페이지를 찾기가 어려워 허가 있을 수 있으나, 어찌되었든 보이는 대로 남겨두자면

 

현재 페이지에 표시할 원 혹은 이미지를 보여줄 shape 레이아웃(layert-list)

선택되지 않았을 때 표시할 원 혹은 이미지를 보여줄 shape 레이아웃(layer-list)

 

예)

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape
            android:innerRadius="0dp"
            android:shape="ring"
            android:thickness="5dp"
            android:useLevel="false">
            <solid android:color="@color/하고싶은색"/>
        </shape>
    </item>def
</layer-list>

두 종류의 shape를 담는 selector 레이아웃

 

예) 

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/선택된Dot"
        android:state_selected="true"/>

    <item android:drawable="@drawable/기본Dot"/>
</selector>

 

이렇게 총 세가지를 준비하고, 최종으로 selector 레이아웃 파일을

TabLayout의 tabBackground로 지정해주면 끝이다.

 

<android.support.design.widget.TabLayout
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            android:gravity="center"
            android:id="@+id/페이지Dot레이아웃ID"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            app:tabBackground="@drawable/셀렉터레이아웃이름"
            app:tabGravity="center"
            app:tabIndicatorHeight="0dp"/>

 

 

 

참조 : https://www.youtube.com/watch?v=byLKoPgB7yA