Genta Hirauchi

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

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

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

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

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

本記事では、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="タブ1"/>

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

       <com.google.android.material.tabs.TabItem
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:text="タブ3"/>
   </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("タブ1")

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

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

           // 各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="タブ1"/>

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

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

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

OnTabSelectedListenerを実装したら、onTabSelectedonTabUnselectedonTabReselectedというコールバックメソッドを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が呼ばれる