【Android】高さがwrap_contentのViewPager2を作成

# はじめに
高さがwrap_contentのViewPager2を作成する方法について解説。
例えば、ScrollView内にViewPager2を入れて高さをmatch_parentにできないことがある。
高さが決まっている場合は数値で指定すればいいが、ページ毎にビューの高さが変わっても対応できるプログラムを作成。

# コード
例として、ScrollView内にViewPager2を入れたコードを作ってみる。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694762/f7597428-04fb-8186-0226-f7d19713f6ba.gif" width="40%">

ポイントは、ViewPagerのページ切り替え時(`onPageSelected`)、`binding.viewPager.layoutParams`によりViewPagerの高さを動的に変更している。

## レイアウト
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">

	<TextView
		android:id="@+id/view"
		android:layout_width="match_parent"
		android:layout_height="match_parent"
		android:gravity="center"
		android:textColor="@color/white"
		android:textSize="28sp"/>
</androidx.constraintlayout.widget.ConstraintLayout>
```

メインレイアウト。ScrollView内の上部に動画の赤のビュー部分、下部にViewPagerを配置。
```activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
	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">

	<androidx.constraintlayout.widget.ConstraintLayout
		android:layout_width="match_parent"
		android:layout_height="wrap_content">

		<TextView
			android:id="@+id/view1"
			android:layout_width="0dp"
			android:layout_height="600dp"
			android:background="#FF6363"
			android:gravity="center"
			android:text="Height : 600dp"
			android:textColor="@color/white"
			android:textSize="28sp"
			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="wrap_content"
			app:layout_constraintEnd_toEndOf="parent"
			app:layout_constraintStart_toStartOf="parent"
			app:layout_constraintTop_toBottomOf="@id/view1"/>
	</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
```

## 内部処理
Adapterの作成。ここでは`holder.binding.view.layoutParams.height`でプログラムでの高さ変更を行なっている。

```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() = 2
	override fun onBindViewHolder(holder: ViewHolder, position: Int) {
		val height = 300 * (position + 1)
		holder.binding.view.text = "Height: ${height}dp"
		holder.binding.view.setBackgroundColor(Color.parseColor(if (position == 0) "#6200EE" else "#03DAC6"))

		val density = holder.binding.root.context.resources.displayMetrics.density
		holder.binding.view.layoutParams.height = (height * density).toInt()
	}
}
```

最後に、メインレイアウト内の処理。`onPageSelected`メソッド内で`binding.viewPager.layoutParams`の値を変更してViewPager2の高さを変更しているのがポイント。
また、`findViewByPosition`の戻り値がnullにならないように、`doOnPreDraw`内で処理を行う。
```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()
		binding.viewPager.registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() {
			override fun onPageSelected(position: Int) {
				binding.viewPager.doOnPreDraw {
					val view = (binding.viewPager[0] as RecyclerView).layoutManager?.findViewByPosition(position)
					view?.post {
						val wMeasureSpec = MeasureSpec.makeMeasureSpec(view.width, MeasureSpec.EXACTLY)
						val hMeasureSpec = MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED)
						view.measure(wMeasureSpec, hMeasureSpec)

						if (binding.viewPager.layoutParams.height != view.measuredHeight) {
							binding.viewPager.layoutParams = binding.viewPager.layoutParams.apply { height = view.measuredHeight }
						}
					}
				}
			}
		})
	}
}
```

# 参考
https://stackoverflow.com/questions/58492796/viewpager2-with-differing-item-heights-and-wrap-content

https://stackoverflow.com/questions/46326681/linearlayoutmanager-findviewbyposition-is-returning-null