【Jetpack Compose】ボタンがキーボードの背後に隠されるのを防ぐ方法

ホーム

MOBILE

この記事にはプロモーションが含まれています。

投稿：2024・04・20

更新：2024・04・20

一般的に、スマートフォンでは文字を入力できるパーツやエリアをタップすると、キーボードが自動的に画面上に現れる仕組みになっていますよね。

これにより、ユーザーはキーボードの表示・非表示状態の切り替えを特に意識することなく、自然に文字入力を行うことができます。

そしてアプリ開発者にとっても、わざわざキーボードを表示するためのロジックを実装する必要がなく、単に入力フォームを設置するだけで良いというメリットがあります。

しかし、このキーボード表示には注意が必要となるケースもあります。

キーボードがスマホの画面を覆ってしまう範囲はかなり大きく、機種やキーボードの設定にもよりますが、少なくとも画面の下3/1、場合によっては下半分ぐらいはキーボードによって隠されてしまいます。

それにより、『OK』や『キャンセル』といった大事なボタンが、キーボードの後ろ側に隠されてしまう…といった問題が発生し得ます。

ユーザーが文字を入力し終えた後、OKボタンをタップしようと思っても、そのボタンがキーボードで隠れてタップできなくなってしまったら面倒ですよね。

というわけで、今回は大事なUIパーツがキーボードによって隠されないようにする方法をご紹介します！

この記事を読むことで分かること

・ボタンなどのUIパーツがキーボードで隠されないようにする方法
・コンテンツの移動をアニメーションにする方法

– 目次 –

▼キーボードでコンテンツが隠されないようにする
調整前の状態確認
1: AndroidManifest.xmlの編集
2: MainActivityクラスの編集

▼動画解説は下のサムネイルから（YouTubeに飛びます）

Jetpack Composeにおいて、キーボードでコンテンツが隠されないようにする方法の解説動画リンク

調整前の状態確認

まずは、文字入力エリアをタップすると、その下に配置している『OK』ボタンがキーボードによって隠されてしまう例を確認しておきましょう。

誤タップを防ぐために入力エリアとボタンの距離を離したいケースは多いかと思いますが、だからと言って次のようにボタンを画面の下部あたりに配置すると、ボタンがキーボード表示によって隠されてしまいます。

InputView.kt

@Composable
fun InputView() {
   Box(
       modifier = Modifier
           .fillMaxSize(),
       contentAlignment = Alignment.Center
   ) {
       TextField(value = "", onValueChange = { TODO() })
       Button(
           onClick = { /*TODO*/ },
           modifier = Modifier
               .align(Alignment.BottomCenter)
               .offset(y = (-72).dp)
               .width(250.dp)
       ) {
           Text(text = "OK")
       }
   }
}

『キーボード表示エリアと重ならない位置にボタンを配置する』…といったアプローチも解決策の一つではありますが、今回はボタンの配置を変更せずにこの問題を解決してみようと思います。

次のステップでは、キーボード表示時にボタンがキーボードで隠されない位置まで自動で移動するように設定を変更してみましょう。

POINT!

・画面下部にボタンを配置してしまうと、キーボードの表示によってボタンが隠されてしまう場合がある！
・そもそも、ボタンを画面下部に配置しないというのも一つの解決策ではある！
・配置を変えずに、ボタンが隠されないようにする方法もある（次のステップで紹介）！

1: AndroidManifest.xmlの編集

キーボードの出現によってボタンなどのパーツが隠されないようにするには、AndroidManifest.xmlファイルのactivity要素に、android:windowSoftInputMode="adjustResize" を追加します。

AndroidManifest.xml

<!-- AndroidManifest.xml file: -->
<activity
  android:name="..."
  android:label="..."
  android:exported="true"
  android:windowSoftInputMode="adjustResize"
  android:theme="...">

adjustResize オプションを設定することにより、ソフトウェアキーボードの表示によって隠れてしまう可能性のあるコンテンツを自動的にリサイズし、スクリーン上で見えるように調整されます。

なので、この設定だけでもキーボード表示でボタンが隠されてしまう問題を解決できます。

しかしこの設定だけでは、瞬間的にコンテンツが移動する（=アニメーションにならない）ので、やや違和感のある挙動になってしまいます。

下の動画は、サンプルアプリに adjustResize の設定を加えただけの状態で、入力エリアをタップしてキーボードを表示させた様子を録画したものですが、コンテンツが瞬間的に移動していることが確認できます。

ボタンがキーボードで隠されなくなったのは良いのですが、コンテンツの移動をアニメーション化して、より自然に感じられるようにしたいですね。次のステップではそのための調整を加えていきましょう。

POINT!

・キーボードの表示でコンテンツが隠れないようにするには、activity要素に adjustResize を設定する！
・ただし、これだけではコンテンツの移動が瞬間的になってしまう（アニメーションにならない）！
・コンテンツの移動をアニメーション化するには、もうひと手間必要！

2: MainActivityクラスの編集

まず、アプリケーションのレイアウトをデバイスのエッジ（端）まで拡張して表示する設定を有効にするために、Activity.onCreate の中で enableEdgeToEdge() を呼び出します。

この設定により、ステータスバーやナビゲーションバーの背後にコンテンツが表示されるようになり、画面全体を有効に活用することができます。

キーボードの表示・非表示の切り替え時に、コンテンツの移動を滑らか（アニメーション）にするためには欠かせない設定になります。

MainActivity.kt

class MainActivity : ComponentActivity() {
   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
      
       enableEdgeToEdge()
       …
}

次に、アプリケーションにインセットを適用するため、アプリのコンテンツ（ビュー）をSurfaceやBoxなどでラップし、Modifire.safeDrawingPadding() を指定します。

MainActivity.kt

setContent {
   KeyboardAvoidingTheme {
       Surface(
           modifier = Modifier
               .fillMaxSize()
               .safeDrawingPadding(),
           color = MaterialTheme.colorScheme.background
       ) {
           InputView()
       }
   }
}

これらの設定により、キーボードによってボタンが隠されないだけでなく、キーボードの出現に合わせてアニメーションと共に移動するようになります。（下の動画を参照）