ソフトウェア キーボードを制御してアニメーション化する

アプリは WindowInsetsCompat を使用して、システムバーを操作する場合と同様に、画面キーボード（IME とも呼ばれます）をクエリして制御できます。また、アプリで WindowInsetsAnimationCompat を使用して、ソフトウェア キーボードの開閉時にシームレスな遷移を作成することもできます。

前提条件

ソフトウェア キーボードの制御とアニメーションを設定する前に、エッジ ツー エッジで表示するようにアプリを構成します。これにより、システムバーや画面キーボードなどのシステム ウィンドウ インセットを処理できます。

キーボード ソフトウェアの表示を確認する

WindowInsets を使用して、ソフトウェア キーボードの表示を確認します。

val insets = ViewCompat.getRootWindowInsets(view) ?: return
val imeVisible = insets.isVisible(WindowInsetsCompat.Type.ime())
val imeHeight = insets.getInsets(WindowInsetsCompat.Type.ime()).bottom

WindowInsetsCompat insets = ViewCompat.getRootWindowInsets(view);
boolean imeVisible = insets.isVisible(WindowInsetsCompat.Type.ime());
int imeHeight = insets.getInsets(WindowInsetsCompat.Type.ime()).bottom;

また、ViewCompat.setOnApplyWindowInsetsListener を使用して、ソフトウェア キーボードの表示の変化を監視することもできます。

ViewCompat.setOnApplyWindowInsetsListener(view) { _, insets ->
  val imeVisible = insets.isVisible(WindowInsetsCompat.Type.ime())
  val imeHeight = insets.getInsets(WindowInsetsCompat.Type.ime()).bottom
  insets
}

ViewCompat.setOnApplyWindowInsetsListener(view, (v, insets) -> {
  boolean imeVisible = insets.isVisible(WindowInsetsCompat.Type.ime());
  int imeHeight = insets.getInsets(WindowInsetsCompat.Type.ime()).bottom;
  return insets;
});

アニメーションをソフトウェア キーボードと同期させる

ユーザーがテキスト入力フィールドをタップすると、次の例に示すように、キーボードが画面の下部から所定の位置にスライドします。

• 図 2 の「Unsynchronized」というラベルの例は、Android 10（API レベル 29）のデフォルトの動作を示しています。この動作では、キーボードのアニメーションと同期されるのではなく、アプリのテキスト フィールドとコンテンツが所定の位置にスナップして、見た目が不快になることがあります。

• Android 11（API レベル 30）以降では、WindowInsetsAnimationCompat を使用して、画面の下から上下にスライドするキーボードとアプリの遷移を同期できます。図 2 の「Synchronized」とラベル付けされた例に示すように、これはより滑らかに見えます。

ビューをキーボード アニメーションと同期するように WindowInsetsAnimationCompat.Callback を設定します。

ViewCompat.setWindowInsetsAnimationCallback(
  view,
  object : WindowInsetsAnimationCompat.Callback(DISPATCH_MODE_STOP) {
    // Override methods.
  }
)

ViewCompat.setWindowInsetsAnimationCallback(
    view,
    new WindowInsetsAnimationCompat.Callback(
        WindowInsetsAnimationCompat.Callback.DISPATCH_MODE_STOP
    ) {
      // Override methods.
    });

WindowInsetsAnimationCompat.Callback でオーバーライドするメソッドには、onPrepare()、onStart()、onProgress()、onEnd() のものがあります。まず、レイアウトが変更される前に onPrepare() を呼び出します。

onPrepare は、インセット アニメーションの開始時と、アニメーションによってビューが再レイアウトされる前に呼び出されます。これを使用して開始状態（この場合はビューの下部座標）を保存できます。

次のスニペットは、onPrepare の呼び出し例を示しています。

var startBottom = 0f

override fun onPrepare(
  animation: WindowInsetsAnimationCompat
) {
  startBottom = view.bottom.toFloat()
}

float startBottom;

@Override
public void onPrepare(
    @NonNull WindowInsetsAnimationCompat animation
) {
  startBottom = view.getBottom();
}

onStart は、インセット アニメーションが開始されると呼び出されます。これを使用して、すべてのビュー プロパティをレイアウト変更の最終状態に設定できます。いずれかのビューに OnApplyWindowInsetsListener コールバックを設定してある場合は、この時点ですでに呼び出されます。ここで、ビュー プロパティの最終状態を保存することをおすすめします。

次のスニペットは、onStart の呼び出し例を示しています。

var endBottom = 0f

override fun onStart(
  animation: WindowInsetsAnimationCompat,
  bounds: WindowInsetsAnimationCompat.BoundsCompat
): WindowInsetsAnimationCompat.BoundsCompat {
  // Record the position of the view after the IME transition.
  endBottom = view.bottom.toFloat()

  return bounds
}

float endBottom;

@NonNull
@Override
public WindowInsetsAnimationCompat.BoundsCompat onStart(
    @NonNull WindowInsetsAnimationCompat animation,
    @NonNull WindowInsetsAnimationCompat.BoundsCompat bounds
) {
  endBottom = view.getBottom();
  return bounds;
}

onProgress は、アニメーションの実行中にインセットが変更されると呼び出されるため、これをオーバーライドして、キーボード アニメーション中にすべてのフレームで通知を受け取ることができます。キーボードと同期してビューがアニメーション化されるように、ビュー プロパティを更新します。

この時点で、レイアウトの変更はすべて完了しています。たとえば、View.translationY を使用してビューを移動すると、このメソッドが呼び出されるたびに値が徐々に減少し、最終的には元のレイアウト位置まで 0 になります。

次のスニペットは、onProgress の呼び出し例を示しています。

override fun onProgress(
  insets: WindowInsetsCompat,
  runningAnimations: MutableList<WindowInsetsAnimationCompat>
): WindowInsetsCompat {
  // Find an IME animation.
  val imeAnimation = runningAnimations.find {
    it.typeMask and WindowInsetsCompat.Type.ime() != 0
  } ?: return insets

  // Offset the view based on the interpolated fraction of the IME animation.
  view.translationY =
    (startBottom - endBottom) * (1 - imeAnimation.interpolatedFraction)

  return insets
}

@NonNull
@Override
public WindowInsetsCompat onProgress(
    @NonNull WindowInsetsCompat insets,
    @NonNull List<WindowInsetsAnimationCompat> runningAnimations
) {
  // Find an IME animation.
  WindowInsetsAnimationCompat imeAnimation = null;
  for (WindowInsetsAnimationCompat animation : runningAnimations) {
    if ((animation.getTypeMask() & WindowInsetsCompat.Type.ime()) != 0) {
      imeAnimation = animation;
      break;
    }
  }
  if (imeAnimation != null) {
    // Offset the view based on the interpolated fraction of the IME animation.
    view.setTranslationY((startBottom - endBottom)

        *   (1 - imeAnimation.getInterpolatedFraction()));
  }
  return insets;
}

必要に応じて、onEnd をオーバーライドできます。このメソッドは、アニメーションが終了した後に呼び出されます。ここで一時的な変更をクリーンアップします。

参考情報

• WindowInsetsAnimation（GitHub）