MVVM - ViewPager와 TabLayout

MVVM - ViewPager와 TabLayout

ViewPager와 TabLayout을 MVVM패턴을 적용하여 사용하는 방법을 알아보겠습니다.

아래는 적용된 사진입니다 .

프래그먼트 1개로 동적으로 4개의 탭을 만들어 뷰페이저에 적용하였습니다.

그리고 뷰페이저와 탭레이아웃을연결하여 탭을 클릭하면 뷰페이저 프래그먼트가 바뀌도록 되어있습니다.

크게 MainActivity와 childFragment로 구성되어있습니다 .

먼저 MainAcitivity의 레이아웃먼저 보도록하겠습니다 .

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>

<layout xmlns:android="http://schemas.android.com/apk/res/android"

        xmlns:app="http://schemas.android.com/apk/res-auto">

    <data>

        <variable

                name="viewModel"

                type="com.example.viewpagerandtablayoutwithmvvm.MainViewModel" />

    </data>

    <LinearLayout

            android:layout_width="match_parent"

            android:layout_height="match_parent"

            android:orientation="vertical">

        <android.support.design.widget.TabLayout

                android:id="@+id/tab_category"

                android:layout_width="match_parent"

                android:layout_height="80dp"

                app:tabGravity="fill"

                app:tabIndicatorFullWidth="true"

                app:tabIndicatorHeight="5dp"

                app:tabMaxWidth="0dp"

                app:tabMode="fixed"

                app:setupWithViewPager="@{pager}" />

        <android.support.v4.view.ViewPager

                android:id="@+id/pager"

                android:layout_width="match_parent"

                android:layout_height="0dp"

                android:layout_weight="1"

                app:addOnPageChangeListener="@{viewModel.pageChangeListener}"

                app:setAdapter="@{viewModel.adapter}"

                app:setCurrentItem="@{viewModel.currentPosition}" />

    </LinearLayout>

</layout>

TabLayout과 ViewPager가 있습니다.

TabLayout에는 app:setupWithViewPager 를 이용하여 뷰페이저 아이디를 넣어 연결해줍니다.

ViewPager에는 addOnPageChangeListener와 setAdapter setCurrentItem에 뷰모델에있는 값들을 연결해줍니다 .

MainViewModel.class

package com.example.viewpagerandtablayoutwithmvvm

import android.support.v4.app.FragmentManager

import android.support.v4.view.ViewPager

class MainViewModel(val contract: MainActivityContract) {

    interface MainActivityContract {

        fun getFragmentManger(): FragmentManager

}

    var adapter = PagerAdapter(

        contract.getFragmentManger(),

        listOf("Tab1", "Tab2", "Tab3", "Tab4"),

        listOf(

            ChildFragment.newInstance("1"),

            ChildFragment.newInstance("2"),

            ChildFragment.newInstance("3"),

            ChildFragment.newInstance("4")

)

)

    var currentPosition = 0

    var pageChangeListener = object : ViewPager.OnPageChangeListener {

        override fun onPageScrollStateChanged(p0: Int) {

}

        override fun onPageScrolled(p0: Int, p1: Float, p2: Int) {

}

        override fun onPageSelected(p0: Int) {

            currentPosition = p0

}

}

}

\

앞서 레이아웃에서 넣었던 값들을 선언해주었습니다 .

PagerAdapter를 생성하여, 프래그먼트매니져와, 탭의 리스트목록, 뷰페이저에 들어갈 4개의 프래그먼트를 넣어주었습니다

현재페이지는 0, 페이저체인지리스너를 익명으로 선언해 변수로 만들어주었습니다 .페이지가 변화할때마다 currentPosition이 변경되어 뷰페이저가 인식할수있도록 구현되었습니다 .

데이터바인딩과 MVVM 패턴을 쓰게되면, 효과적으로 코드를 분리하고 ,더 가독성이좋은 코드를 작성할수있었습니다.

이상으로 내용정리를 마치며 , 자세한 코드는 github에 올려두었으니 필요하시면 참고하셔도 좋습니다.

github 주소 ->

Beom Dev Log