[Android] TabLayout - Viewpager 연계 라이브러리

https://dkan9634.tistory.com/93

[Android] ViewPager

위 코드 이어서 작업

 

---

TabLayout이란?

• 플레이스토어처럼, 지금 사용자가 어느 Fragment를 보고있는지 알려주고 싶을 때 사용
• 원하는 탭을 누르면 해당 페이지로 이동 기능.
• 안드로이드의 기본 기능 아님. => 라이브러리 설치 작업 필요.(웬만하면 깔려 있음)

 

---

사용법

1. xml에서 탭레이아웃 배치 + 아이디 부여
=> <com.google.~.TabLayout> 배치
=> 라이브러리 설치가 안되었다면 자동완성되지 않는다.
=> app: 으로 시작하는 속성들 (ex. tabMode, tabIndicatorColor 등) 을 편집해서 원하는 모양으로 커스터마이징 가능.
(다음 글에서  다뤄보겠다.)

<?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=".MainActivity">


    <com.google.android.material.tabs.TabLayout
        android:id="@+id/myTablayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/mainViewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</LinearLayout>

=> activity_main.xml에 TabLayout 부분 추가

 

2. 코틀린에서 ViewPager와 연결
=> 탭레이아웃변수.setupWithViewPager(뷰페이저변수)

// 탭레이아웃을 => 뷰페이저와 연결
myTablayout.setupWithViewPager(mainViewPager)

전체 MainActivity.kt 코드

package com.eunjeong.viewpager

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import com.eunjeong.viewpager.adapters.MainViewPagerAdapter
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

    lateinit var mViewPagerAdapter : MainViewPagerAdapter

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        mViewPagerAdapter = MainViewPagerAdapter(supportFragmentManager)
        mainViewPager.adapter = mViewPagerAdapter

        // 페이지가 많아지면 간단하게 부드럽도록 지원하는 기능
        mainViewPager.offscreenPageLimit = 3

        // 탭레이아웃을 => 뷰페이저와 연결
        myTablayout.setupWithViewPager(mainViewPager)

    }
}

3. 페이지별 제목 => ViewPagerAdapter 클래스 내부 수정
=> getPageTitle 함수를 오버라이딩 => 포지션별 제목 리턴

=> Adapter에서 작업

//페이지별 제목 설정
override fun getPageTitle(position: Int): CharSequence? {
    return when(position){
            0 -> "첫번째"
            1->"두번째"
            else -> "세번째"
        }
}

전체 Adapter Code

package com.eunjeong.viewpager.adapters

import androidx.fragment.app.Fragment
import androidx.fragment.app.FragmentManager
import androidx.fragment.app.FragmentPagerAdapter
import com.eunjeong.viewpager.fragments.FirstFragment
import com.eunjeong.viewpager.fragments.SecondFragment
import com.eunjeong.viewpager.fragments.ThirdFragment

class MainViewPagerAdapter(fm: FragmentManager) : FragmentPagerAdapter(fm) {
    //페이지별 제목 설정
    override fun getPageTitle(position: Int): CharSequence? {
//        if (position == 0){
//            return "첫번째"
//        }
//        else if (position == 1){
//            return "두번쨰"
//        }
//        else{
//            return "세번째"
//        }
        return when(position){
            0 -> "첫번째"
            1->"두번째"
            else "세번째"
        }
    }

    override fun getCount(): Int {
        return 3 // 몇장짜리인지
    }

    override fun getItem(position: Int): Fragment {
//        if (position == 0){
//            return FirstFragment()
//        }
//        else if (position == 1){
//            return SecondFragment()
//        }
//        else{
//            return ThirdFragment()
//        }
        return when(position){
            0 -> FirstFragment()
            1 -> SecondFragment()
            else -> ThirdFragment()
        }
    }

}

https://github.com/Eundding/android_study/tree/master/ViewPager

GitHub - Eundding/android_study

---

참고 : class101+ 코딩티처 지니 강의