[Android]WRAP_CONTENTが指定されたViewのアニメーション

# やりたいこと
あるViewは高さにはWRAP_CONTENTが指定されていて
RelativeLayoutでそのViewの上下に制約がある場合に、その制約を維持しつつViewの高さを変えたり元に戻したりするアニメーションがしたい。
ここで問題になるのはWRAP_CONTENTなので高さを戻したい時に具体的な高さの値が分からないのでValueAnimatorで目的の値の指定に困るということ。

**画面のイメージ**
このImageViewに上下に挟まれたTextViewを縦方向縮めたり広げたりしてみます
![Screenshot_20221108-144327_WrapContentAnimationSample.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351880/a6785ebd-1606-b392-14e3-95a807928ea2.jpeg)

# 実装

## レイアウト

```xml: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">

    <ImageView
        android:id="@+id/image_view1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        android:src="@drawable/ic_launcher_background"/>

    <TextView
        android:id="@+id/text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!\nHello World!"
        app:layout_constraintTop_toBottomOf="@+id/image_view1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"/>

    <ImageView
        android:id="@+id/image_view2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/text_view"
        android:src="@drawable/ic_launcher_background"/>

    <Button
        android:id="@+id/toggle_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:text="アニメ"
        />
</androidx.constraintlayout.widget.ConstraintLayout>

```

## 縮小する

```kotlin:MainActivity.kt
private fun collapse() {
    val actualHeight = binding.textView.height
    ValueAnimator.ofInt(actualHeight, 1).apply {
        duration = 200
        addUpdateListener { animator ->
            val newValue = animator.animatedValue as Int
            val layoutParams = binding.textView.layoutParams.apply {
                height = newValue
            }
            binding.textView.layoutParams = layoutParams
        }
        doOnEnd {
            binding.textView.visibility = View.INVISIBLE
        }
        start()
    }
}
```
縮小するにはまず実際に表示されているViewの高さが必要で、これはViewのheightプロパティから取得できます。ではLayoutParams.WRAP_CONTENT(-2)はどこに入っているかというとView.layoutParams.heightになります。
アニメーション進行中はViewのlayoutParamsのheightを更新していきます。
この時、binding.textView.layoutParams.heightに直接newValueを代入してもViewは更新されません。更新したlayoutParamsを改めてbinding.textView.layoutParamsに代入することでViewが更新されます。

## 拡大する

```kotlin:MainActivity.kt
private fun expand() {
    // [POINT]WRAP_CONTENTを指定した時の高さを計算します。
    binding.textView.measure(WRAP_CONTENT, WRAP_CONTENT)
    val expectedHeight = binding.textView.measuredHeight
    ValueAnimator.ofInt(1, expectedHeight).apply {
        duration = 200
        addUpdateListener { animator ->
            val newValue = animator.animatedValue as Int
            val layoutParams = binding.textView.layoutParams.apply {
                height = newValue
            }
            binding.textView.layoutParams = layoutParams
        }
        doOnStart {
            binding.textView.visibility = View.VISIBLE
        }
        doOnEnd {
            val layoutParams = binding.textView.layoutParams.apply {
                height = WRAP_CONTENT
            }
            binding.textView.layoutParams = layoutParams
        }
        start()
    }
}
```
拡大するときは目的となる高さが必要になりますが、WRAP_CONTENTが指定されているため具体的な数値はわかりません。（縮小する時にメンバ変数に覚えておいても良いけど）
そこで、ViewのmeasureメソッドとmeasuredHeightプロパティを使ってWRAP_CONTENTが指定された時の具体的な数値を計算することができます。
アニメーション中は縮小の時と同じです。念のためアニメーションを終えたタイミングでWRAP_CONTENTに戻しておきます。

**最終的にはアニメボタンを押すとTextViewがアニメーションしながら消えたり表示されたりします。**

![Screenshot_20221108-144327_WrapContentAnimationSample.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351880/ea31c02b-357c-94d2-742e-5384cfe518f0.jpeg)　![Screenshot_20221108-144333_WrapContentAnimationSample.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351880/ef800399-847e-fd71-15d8-3af400f2539f.jpeg)

#### ソースコード

https://github.com/tokuyama-san/WrapContentAnimationSample