【Android】TabLayoutの各々のタブ内にViewを追加

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694762/97d95516-cea8-00c6-3ca7-32f1014733f7.png" width="30%">

# 概要
TabLayoutに新たなViewを追加する方法について解説。
ここでは例として、タブの右上にバッジを付与するプログラムについて記載。

# 方法
ざっくり説明すると、TabLayoutから`getChildAt`メソッドを用いて各々のタブビューを取得し、Viewを`inflate`メソッドで追加すればよい。

### レイアウト
バッジレイアウトを作成
```drawable/badge.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
	   android:shape="oval">
	<solid android:color="@android:color/holo_red_light"/>
</shape>
```

```layout/badge.xml
<?xml version="1.0" encoding="utf-8"?>
<View
	xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="6dp"
	android:layout_height="6dp"
	android:layout_marginStart="4dp"
	android:layout_marginBottom="6dp"
	android:background="@drawable/badge"/>
```

ViewPagerを作成
```view_pager.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
	xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="match_parent"
	android:layout_height="match_parent"/>
```

メインレイアウト内に、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"
	android:layout_width="match_parent"
	android:layout_height="match_parent">

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

	<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用アダプタークラスの作成
```ViewPagerAdapter.kt
class ViewPagerAdapter : RecyclerView.Adapter<ViewPagerAdapter.ViewHolder>() {

	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 onBindViewHolder(holder: ViewHolder, position: Int) {
	}

	override fun getItemCount() = 3
}
```

メインレイアウトクラスの作成
`onCreate`メソッド内で、`TabLayout`内の`LinearLayout`の向きを`HORIZONTAL`にするのと、バッジレイアウトの`inflate`を行うことで、バッジが表示されるようになる。

```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 ->
			tab.text = "タブ$position"
		}.attach()

		(binding.tabLayout.getChildAt(0) as LinearLayout).forEach {
			val linearLayout = it as LinearLayout
			linearLayout.orientation = LinearLayout.HORIZONTAL
			layoutInflater.inflate(R.layout.badge, linearLayout)
		}
	}
}
```