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 주소 ->
https://github.com/qjatjr1108/ViewPagerAndTabLayoutWithMVVM/tree/master/app/src/main/java/com/example/viewpagerandtablayoutwithmvvm