公開日：2020/03/18
更新日：2020/08/03

【Kotlin基礎】TabLayoutでタブを実装する方法を解説

タブを実装する方法が知りたい
TabLayoutを動的に実装する方法が知りたい
タブが切り替わった際に、何らかの処理を行いたい

KotlinでTabLayoutというViewを使用することで、タブを実装することができます。

TabLayoutは、基本的にはViewPagerとセットで使用され、タブが切り替えられると、画面も合わせて切り替わるように実装されることが多いです。

本記事では、TabLayoutにのみ焦点を当て、基本的な実装方法や、タブ切り替えのイベントを受け取る方法について、サンプルコードを交え解説致します。

１．TabLayoutでタブを実装する方法
２．イベントの実装
３．まとめ

TabLayoutでタブを実装する方法

Kotlinでタブを実装するには、TabLayoutというViewを使用します。

【公式ドキュメント】： TabLayout | Android Developers

TabLayoutを実装するには、xmlで実装する方法と、コードで動的に実装する方法の、2通りの方法があります。

ライブラリの追加

まずは、TabLayoutを使用できるようにするために、build.gradleにmaterial-componentsライブラリを追加します。

build.gradle

dependencies {
   (省略)
   implementation 'com.google.android.material:material:1.1.0'
}

material-componentsの最新のバージョンは、こちらからご確認頂けます。

xmlでTabLayoutを実装する

xmlで実装するには、以下のように実装します。

MainActivity.kt
activity_main.xml

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

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/container"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="vertical">

   <com.google.android.material.tabs.TabLayout
           android:layout_width="match_parent"
           android:layout_height="wrap_content">

       <com.google.android.material.tabs.TabItem
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:text="タブ１"/>

       <com.google.android.material.tabs.TabItem
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:text="タブ２"/>

       <com.google.android.material.tabs.TabItem
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:text="タブ３"/>
   </com.google.android.material.tabs.TabLayout>
</LinearLayout>

TabLayoutを実装するには、<TabLayout/>タグを使用します。

各タブ項目は、<TabItem/>タグで実装します。

Point

xmlでTabLayoutを実装するには、<TabLayout/>タグを使用する
各タブ項目は、TabItemで実装する

コードで動的にTabLayoutを実装する

続いて、コードで動的に実装する方法を紹介致します。コードで動的に実装するには、以下のように実装します。

MainActivity.kt
activity_main.xml

class MainActivity : AppCompatActivity() {

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

       // TabLayoutの生成
       val tabLayout = TabLayout(this).also {
           // 各Tabの生成
           val tab1 = it.newTab()
           tab1.setText("タブ１")

           val tab2 = it.newTab()
           tab2.setText("タブ２")

           val tab3 = it.newTab()
           tab3.setText("タブ３")

           // 各TabをTabLayoutに追加
           it.addTab(tab1)
           it.addTab(tab2)
           it.addTab(tab3)
       }

       // TabLayoutをLinearLayoutに追加
       val container = findViewById<LinearLayout>(R.id.container)
       container.addView(tabLayout)
   }
}

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/container"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="vertical">

</LinearLayout>

TabLayout()で、TabLayoutのインスタンスを生成しております。

そして、生成したTabLayoutのインスタンスに対し、スコープ関数alsoを使用し、Tabを子Viewとして追加しております。Tabの生成は、Tablayout.newTab()で行います。

ここで注目していただきたいのは、xmlではTabItemを使用していたのに対し、コードで実装する場合は、Tabを使用しております。コードでもTabItemの生成はできますが、TabItemにはTextを設定する関数がないため、Tabを使用致しました。

なお、スコープ関数alsoの詳細については、以下の記事に詳しくまとめておりますので、そちらをご覧ください。

【Kotlin基礎】スコープ関数alsoの実装方法と用途を解説

Kotlinにはスコープ関数という覚えておくと便利な関数があります。スコープ関数にはいくつか種類があるのですが、本記事では、スコープ関数alsoに焦点を当て解説致します。他のスコープ関数(let, run, apply等)につきましては、簡単な解説と、各記事へのリンクがありますので、そちらをご覧頂けたらと思います。

最後に、TabLayoutをLinearLayoutの子Viewとして追加します。

Point

コードで動的にTabLayoutを実装するには、TabLayout()でインスタンスを生成し、addView()でレイアウトに追加する
コードで実装する場合は、TabItemではなく、Tabを使用する。Tabは、TabLayout.newTab()で生成する

イベントの実装

最後に、タブが選択された際に、何らかの処理を行う方法を紹介致します。

タブの選択のイベントを受け取るには、OnTabSelectedListenerというイベントリスナーを実装する必要があります。

以下は、タブが選択されると、選択されたタブのTextがToastで表示されるサンプルコードです。

MainActivity.kt
activity_main.xml

class MainActivity : AppCompatActivity() {

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

       // TabLayoutの取得
       val tabLayout = findViewById<TabLayout>(R.id.tab_layout)

       // OnTabSelectedListenerの実装
       tabLayout.addOnTabSelectedListener(object: TabLayout.OnTabSelectedListener {

           // タブが選択された際に呼ばれる
           override fun onTabSelected(tab: TabLayout.Tab) {
               Toast.makeText(this@MainActivity, tab.text, Toast.LENGTH_SHORT).show()
           }

           // タブが未選択になった際に呼ばれる
           override fun onTabUnselected(tab: TabLayout.Tab) {

           }

           // 同じタブが選択された際に呼ばれる
           override fun onTabReselected(tab: TabLayout.Tab) {

           }
       })
   }
}

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/container"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="vertical">

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

       <com.google.android.material.tabs.TabItem
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:text="タブ１"/>

       <com.google.android.material.tabs.TabItem
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:text="タブ２"/>

       <com.google.android.material.tabs.TabItem
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:text="タブ３"/>
   </com.google.android.material.tabs.TabLayout>
</LinearLayout>

TabLayout.addOnTabSelectedListenerで、OnTabSelectedListenerの実装を行います。

OnTabSelectedListenerを実装したら、onTabSelected、onTabUnselected、onTabReselectedというコールバックメソッドをOverrideする必要があります。

onTabSelectedは、タブが選択された際に呼ばれるコールバックメソッドです。引数から、選択されたタブを取得することができます。

onTabUnselectedは、タブが未選択になった際に呼ばれるコールバックメソッドです。引数から、未選択になったタブを取得することができます。

onTabReselectedは、同じタブが選択された際に呼ばれるコールバックメソッドです。引数から、選択されたタブを取得することができます。

Point

タブ選択イベントを受け取るには、OnTabSelectedListenerを実装する。OnTabSelectedListenerの実装は、addOnTabSelectedListenerで行う
タブが選択されると、onTabSelectedが呼ばれる
タブが未選択になると、onTabUnselectedが呼ばれる
同じタブが選択されると、onTabReselectedが呼ばれる

以上、TabLayoutの基本的な実装方法の解説でした。

まとめ

xmlでTabLayoutを実装するには、<TabLayout/>タグを使用する
各タブ項目は、TabItemで実装する
コードで動的にTabLayoutを実装するには、TabLayout()でインスタンスを生成し、addView()でレイアウトに追加する
コードで実装する場合は、TabItemではなく、Tabを使用する。Tabは、TabLayout.newTab()で生成する
タブ選択イベントを受け取るには、OnTabSelectedListenerを実装する。OnTabSelectedListenerの実装は、addOnTabSelectedListenerで行う
タブが選択されると、onTabSelectedが呼ばれる
タブが未選択になると、onTabUnselectedが呼ばれる
同じタブが選択されると、onTabReselectedが呼ばれる