TabLayout の使い方 - kotlin

できるもの

やること

1. ライブラリを読込
2. TabLayout を追加
3. TabLayout で表示するレイアウトを追加
4. Fragment を追加
5. Adapter を追加
6. Activity から呼び出し

1. ライブラリを読込

build.gradle

implementation 'com.google.android.material:material:1.0.0'

2. TabLayout を追加

activity_tab_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.LinearLayoutCompat
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent" xmlns:app="http://schemas.android.com/apk/res-auto"
        tools:context=".TabLayoutActivity">

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

        <com.google.android.material.tabs.TabLayout
                android:id="@+id/tab_layout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:tabIndicatorColor="@color/colorAccent"
                app:tabTextColor="#000000"
                app:tabSelectedTextColor="@color/colorAccent">

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

        </com.google.android.material.tabs.TabLayout>

    </androidx.viewpager.widget.ViewPager>

</androidx.appcompat.widget.LinearLayoutCompat>

3. TabLayout で表示するレイアウトを追加

タブをタップ、スライドした時にそれぞれ表示するレイアウトを用意する。

fragment_tab_01.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.LinearLayoutCompat
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center">

    <androidx.appcompat.widget.AppCompatTextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="20sp"
            android:textStyle="bold"
            android:text="fragment_tab_01 を表示"/>

</androidx.appcompat.widget.LinearLayoutCompat>

fragment_tab_02.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.LinearLayoutCompat
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center">

    <androidx.appcompat.widget.AppCompatTextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="20sp"
            android:textStyle="bold"
            android:text="fragment_tab_02 を表示"/>

</androidx.appcompat.widget.LinearLayoutCompat>

4. Fragment を追加

3 で作成した xml を Fragment として生成

TabFragment.kt

class Tab01Fragment: Fragment(){
    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        return inflater.inflate(R.layout.fragment_tab_01,container,false)
    }
}

class Tab02Fragment: Fragment(){
    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        return inflater.inflate(R.layout.fragment_tab_02,container,false)
    }
}

5. Adapter を追加

Pager と Fragment を紐づけ

TabAdapter.kt

class TabAdapter(fm:FragmentManager, private val context: Context): FragmentPagerAdapter(fm){

    override fun getItem(position: Int): Fragment {
        when(position){
            0 -> { return Tab01Fragment() }
            else ->  { return Tab02Fragment() }
        }
    }

    override fun getPageTitle(position: Int): CharSequence? {
        when(position){
            0 -> { return "tab_01" }
            else ->  { return "tab_02" }
        }
    }

    override fun getCount(): Int {
        return 2
    }
}

6. Activity から呼び出し

タブを表示する Activity に追加
Pager、tab_layout はそれぞれ手順 1 で作成したレイアウトで指定した id

TabLayoutActivity.kt

class TabLayoutActivity : AppCompatActivity() {

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

        pager.adapter = TabAdapter(supportFragmentManager,this)
        tab_layout.setupWithViewPager(pager)
    }
}

おわり