[Android/Kotlin] 기본 TabLayout 만들어보기

위 사진과 같이 상단에 Tab바가 존재하여 스크롤 시 Tab에 맞는 화면이 보여지는 화면 구성을 많이 보셨을 거라고 생각해요.

이번 포스팅에서는 상단에 TabLayout이 존재하는 기본 TabLayout을 만들어 보도록 하겠습니다.

 

Fragment 3개를 이용하여 ViewPager 만드는 방법과 동일합니다 : )

 

Gradle에 implementation 'com.google.android.material:material:1.0.0' 추가하기

TabLayout과 ViewPager를 이용하려면 com.google.android.material:material:1.0.0을 추가해줘야합니다.

dependencies {
    ...
    
    implementation 'com.google.android.material:material:1.0.0'
    
    ...
}

 

 

Activity_Main.xml에 TabLayout 과 ViewPage 추가하기

아래와 같이 TabLayout과 ViewPager를 xml에 추가합니다.

 <com.google.android.material.tabs.TabLayout
        android:id="@+id/tab"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:background="#ffffff"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>

    <androidx.viewpager.widget.ViewPager
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/viewPager"
        app:layout_constraintTop_toBottomOf="@id/tab"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>

 

 

이제 각 Tab마다의 화면을 구성할 즉, ViewPager안에 들어갈 Fragment를 추가해주면 됩니다.

(저는 3개의 Tab을 만들거기 때문에 Fragment를 3개 만들어 주었습니다.)

 

 

Fragment 추가해주기 

마우스 오른쪽 클릭을 통해 Fragment(Blank)를 만들어주시면 됩니다. (Fragment 3개 모두 동일)

Fragment 를 생성하시면 아래와 같이 생성되는 것을 보실 수 있습니다.

package com.example.~~~

import android.os.Bundle
import androidx.fragment.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup

// TODO: Rename parameter arguments, choose names that match
// the fragment initialization parameters, e.g. ARG_ITEM_NUMBER
private const val ARG_PARAM1 = "param1"
private const val ARG_PARAM2 = "param2"

/**
 * A simple [Fragment] subclass.
 * Use the [BlankFragment.newInstance] factory method to
 * create an instance of this fragment.
 */
class BlankFragment : Fragment() {
    // TODO: Rename and change types of parameters
    private var param1: String? = null
    private var param2: String? = null

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        arguments?.let {
            param1 = it.getString(ARG_PARAM1)
            param2 = it.getString(ARG_PARAM2)
        }
    }

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_blank, container, false)
    }

    companion object {
        /**
         * Use this factory method to create a new instance of
         * this fragment using the provided parameters.
         *
         * @param param1 Parameter 1.
         * @param param2 Parameter 2.
         * @return A new instance of fragment BlankFragment.
         */
        // TODO: Rename and change types and number of parameters
        @JvmStatic
        fun newInstance(param1: String, param2: String) =
            BlankFragment().apply {
                arguments = Bundle().apply {
                    putString(ARG_PARAM1, param1)
                    putString(ARG_PARAM2, param2)
                }
            }
    }
}

 

이때 저는 onCreateView를 제외한 나머지를 지워서 정리해주도록 하겠습니다.

onCreateView 만 남기게 되면 아래와 같이 Fragment.kt 가 바뀌게 됩니다 : )

package com.example.taplayout1

import android.os.Bundle
import android.util.Log
import androidx.fragment.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup

/**
 * A simple [Fragment] subclass.
 */
class tab1Fragment : Fragment() {
    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        // Inflate the layout for this fragment

        return inflater.inflate(R.layout.fragment_tab1, container, false)
    }

}

 

 

Fragment.kt 마다 newInstance() 함수 만들어주기

newInstance( ) 함수는 각 Fragment 1,2,3 에 모두 넣어주세요!

private fun newInstant() : tab1Fragment
    {
        val args = Bundle()
        val frag = tab1Fragment()
        frag.arguments = args
        return frag
    }

 

 

 

FragmentAdapter Class 만들기

position에 따라 Fragment가 변화하도록 만들어주는 FragmentAdapter를 만들어보도록 하겠습니다.

FragmentAdapter는 FragmentPagerAdater ( FragmentManager ) 를 상속받습니다.

 

class FragmentAdapter (fm : FragmentManager): FragmentPagerAdapter(fm) {
  //position 에 따라 원하는 Fragment로 이동시키기  
  override fun getItem(position: Int): Fragment {
       val fragment =  when(position)
       {
           0->tab1Fragment().newInstant()
           1-> tab2Fragment().newInstant()
           2-> tab3Fragment().newInstant()
           else -> tab1Fragment().newInstant()
       }
        return fragment
    }

  //tab의 개수만큼 return
    override fun getCount(): Int = 3

  //tab의 이름 fragment마다 바꾸게 하기
    override fun getPageTitle(position: Int): CharSequence? {
        val title = when(position)
        {
            0->"0ne"
            1->"Two"
            2->"Three"
            else -> "main"
        }
        return title     }
}

 

• getCount(int) : 총 몇 개의 화면을 구성할 지 지정

• getItem(int) : 순서(position)에 따른 화면 지정

• getPageTitle(int) : Tab의 제목 지정

 

✔️Kotlin 문법 ( Switch ~ Case 문 )

위 FragmentAdpater에서 쓰였던 Java와 Kotlin의 Switch Case 문에 대해 소개해드리고자 합니다!

자바에서의 'Switch Case'문은 Kotlin에서 'When'을 이용하여 만들 수 있습니다.

 

Java (Switch ~ Case 문) 

switch(i)
{
  case 1 : "1"; 
  case 2 : "2";
  case 3 : "3";
  default : "else";
  
}

Kotlin (When 문)

when(i)
{
  0->"1"
  1->"2"
  2->"3"
  else -> "else"
}

 

 

MainActivity.kt에 Pager와 Tab 연결해주기

val pagerAdapter = FragmentAdapter(supportFragmentManager)

val pager = findViewById<ViewPager>(R.id.viewPager)
pager.adapter = pagerAdapter

val tab = findViewById<TabLayout>(R.id.tab)
tab.setupWithViewPager(pager)

위에서 만들었던 FragmentAdatper 객체인 pageAdapter를 ViewPager의 Adpater로 연결해주고, 

ViewPager와 Tab을 setupWithViewPager로 연결해주면 끝입니다 : )

 

 

아래는 MainActivity.kt의 코드 전체입니다.

package com.example.taplayout

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.viewpager.widget.PagerAdapter
import androidx.viewpager.widget.ViewPager
import com.google.android.material.tabs.TabLayout

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        
        val pagerAdapter = FragmentAdapter(supportFragmentManager)
        val pager = findViewById<ViewPager>(R.id.viewPager)
        pager.adapter = pagerAdapter
        val tab = findViewById<TabLayout>(R.id.tab)
        tab.setupWithViewPager(pager)
    }
}

 

이번 포스팅에서 TabLayout을 만드는 기본적인 방법에 대해 소개해드렸는데요.

다음 포스팅에서는 TabLayout을 응용한 Round TabLayout 만드는 방법에 대해 소개해드리도록 하겠습니다!