코틀린 뷰페이저 + 탭레이아웃 사용하기

메인 XML

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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=".Main_page">



    <android.support.v4.view.ViewPager
        android:id="@+id/friend_List_VP"
        android:layout_width="match_parent"
        android:layout_height="match_parent">


    </android.support.v4.view.ViewPager>






</LinearLayout>

 

 

프래그 먼트 생성

1. Friend_ListPage.kt

2. OneToOne_Chatting.kt

3. OneToGroup_Chatting.kt

4. Setting_Page.kt

 

 

 

뷰페이저들을 연결해줄 메인 어댑터를 생성

Main_Pager_Adapter.kt

 

import android.support.v4.app.Fragment
import android.support.v4.app.FragmentManager
import android.support.v4.app.FragmentPagerAdapter


class Main_Pager_Adapter : FragmentPagerAdapter{



    // 객체 생성
    var data1 : Fragment = Friend_ListPage()
    var data2 : Fragment = OneToOne_Chatting()
    var data3 : Fragment = OnwToGroup_Chatting()
    var data4 : Fragment = Setting_Page()


    // 초기화
    var mData : ArrayList<Fragment> = arrayListOf(data1,data2,data3,data4)


    constructor(fm : FragmentManager) : super(fm){

    }


    override fun getItem(position: Int): Fragment {
        return mData.get(position)
    }

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


}

 

메인.kt에서  뷰페이저를 어댑터에 연결

 

// 뷰페이저 연결 ( Main_Pager_Adapter 와 연결 )
var main_adapter = Main_Pager_Adapter(supportFragmentManager)
friend_List_VP.adapter = main_adapter

 

 

---------------------------------------------------------------------------------------------------------------------------------------------------------

 

탭레이아웃  

 

그래이들에 추가

 

// 탭레이아웃
implementation 'com.android.support:design:27.1.1'

 

메인 .kt

// 탭레이아웃 연결
main_TabLayout.setupWithViewPager(friend_List_VP)

 

아이콘 설정

main_TabLayout.getTabAt(0)?.setIcon(R.drawable.friends)
main_TabLayout.getTabAt(1)?.setIcon(R.drawable.chatting)
main_TabLayout.getTabAt(2)?.setIcon(R.drawable.group)
main_TabLayout.getTabAt(3)?.setIcon(R.drawable.setting)

 

선택 리스너

main_TabLayout.addOnTabSelectedListener(object : TabLayout.OnTabSelectedListener{

    override fun onTabReselected(tab: TabLayout.Tab?) {
    }

    override fun onTabUnselected(tab: TabLayout.Tab?) {
    }

    override fun onTabSelected(tab: TabLayout.Tab?) {
    }
})

 

 

 

페이지가  3개 이상일때 나타나는 이슈

 

offscreenPageLimit

이라는 값이 디폴트로 1로 설정되어있다.

 

이것은 보고 있는 페이지 기준으로  양 옆으로 페이지를 하나씩 더 만든다는 의미이다.

 

 A  B  C D 라는  4개의 페이지가 있을때.

 

offscreenPageLimit

 

1 인경우   A 를  만들면서  B까지 만들게 된다  B를 보고있는 경우  A 와 C 까지 만들게 된다.

 

그러다보니 문제는 D 를 불러올떄는 A 페이지는 제거 되어, 

 

흔한 문제로는 데이터를 두번 불러오는 문제가 발생하게 된다.

 

해결 방법으로는 여러가지 있지만

 

가장 간편한 방법으로는 offscreenPageLimit 의  수를 늘려준다.

 

 

 

friend_List_VP.adapter = main_adapter
friend_List_VP.offscreenPageLimit = 3