公開日: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/>タグで実装します。
- 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の詳細については、以下の記事に詳しくまとめておりますので、そちらをご覧ください。
最後に、TabLayoutをLinearLayoutの子Viewとして追加します。
- コードで動的に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を実装したら、onTabSelected、onTabUnselected、onTabReselectedというコールバックメソッドをOverrideする必要があります。
onTabSelectedは、タブが選択された際に呼ばれるコールバックメソッドです。引数から、選択されたタブを取得することができます。
onTabUnselectedは、タブが未選択になった際に呼ばれるコールバックメソッドです。引数から、未選択になったタブを取得することができます。
onTabReselectedは、同じタブが選択された際に呼ばれるコールバックメソッドです。引数から、選択されたタブを取得することができます。
- タブ選択イベントを受け取るには、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が呼ばれる
関連記事