【Android】TabLayoutを横スクロール+タブ幅指定

# はじめに
`TabLayout`を横スクロールし、`TabLayout`内のタブ(Tab1,Tab2...)の横幅を指定する方法について解説。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694762/efeca3a0-0660-45d1-7e7e-6d6d46cce92f.gif" width=40%>

# 方法
* `TabLayout`で`app:tabMode="scrollable"`にすることで横スクロール設定
* 幅指定したタブビューを`TabLayout`の`customView`に指定

することで処理を実現できる。

## コード
各のタブに表示するタブビューの作成。`android:layout_width`でタブの横幅をdp指定。
```view_tab.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
	xmlns:android="http://schemas.android.com/apk/res/android"
	xmlns:app="http://schemas.android.com/apk/res-auto"
	xmlns:tools="http://schemas.android.com/tools"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content">

	<TextView
		android:id="@+id/text"
		android:layout_width="160dp"
		android:layout_height="40dp"
		android:gravity="center"
		android:textSize="20sp"
		app:layout_constraintBottom_toBottomOf="parent"
		app:layout_constraintEnd_toEndOf="parent"
		app:layout_constraintStart_toStartOf="parent"
		app:layout_constraintTop_toTopOf="parent"
		tools:text="Tab1"/>
</androidx.constraintlayout.widget.ConstraintLayout>
```

各々のViewPager作成。
```view_pager.xml
<?xml version="1.0" encoding="utf-8"?>
<TextView
	android:id="@+id/view"
	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"
	android:gravity="center"
	android:textSize="40sp"
	tools:text="View1"/>
```

アクティビティ用レイアウトの作成。`app:tabMode="scrollable"`にした`TabLayout`と`ViewPager2`を配置。
```activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
	xmlns:android="http://schemas.android.com/apk/res/android"
	xmlns:app="http://schemas.android.com/apk/res-auto"
	xmlns:tools="http://schemas.android.com/tools"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	tools:context=".MainActivity">

	<com.google.android.material.tabs.TabLayout
		android:id="@+id/tab_layout"
		android:layout_width="0dp"
		android:layout_height="wrap_content"
		app:layout_constraintEnd_toEndOf="parent"
		app:layout_constraintStart_toStartOf="parent"
		app:layout_constraintTop_toTopOf="parent"
		app:tabMode="scrollable"
		app:tabPaddingEnd="0dp"
		app:tabPaddingStart="0dp"/>

	<androidx.viewpager2.widget.ViewPager2
		android:id="@+id/view_pager"
		android:layout_width="0dp"
		android:layout_height="0dp"
		app:layout_constraintBottom_toBottomOf="parent"
		app:layout_constraintEnd_toEndOf="parent"
		app:layout_constraintStart_toStartOf="parent"
		app:layout_constraintTop_toBottomOf="@id/tab_layout"/>
</androidx.constraintlayout.widget.ConstraintLayout>
```

次に、処理部分。ViewPager用Adapter作成。
```ViewPagerAdapter.kt
class ViewPagerAdapter : RecyclerView.Adapter<ViewPagerAdapter.ViewHolder>() {
	inner class ViewHolder(val binding: ViewPagerBinding) : RecyclerView.ViewHolder(binding.root)

	override fun onCreateViewHolder(parent: ViewGroup, viewType: Int) = ViewHolder(ViewPagerBinding.inflate(LayoutInflater.from(parent.context), parent, false))
	override fun getItemCount() = 5
	override fun onBindViewHolder(holder: ViewHolder, position: Int) {
		holder.binding.view.text = "View${position + 1}"
	}
}
```

最後に、Activityの作成。`TabLayoutMediator`内の`tab.customView`で、先ほど作成したタブビューをカスタムビューに指定。
```MainActivity.kt
class MainActivity : AppCompatActivity() {
	private val binding by lazy { ActivityMainBinding.inflate(layoutInflater) }

	override fun onCreate(savedInstanceState: Bundle?) {
		super.onCreate(savedInstanceState)
		setContentView(binding.root)

		binding.viewPager.adapter = ViewPagerAdapter()
		TabLayoutMediator(binding.tabLayout, binding.viewPager) { tab, position ->
			val tabBinding = ViewTabBinding.inflate(layoutInflater)
			tab.customView = tabBinding.root
			tabBinding.text.text = "Tab${position + 1}"
		}.attach()
	}
}
```