前回、Javascript の alert や confirm 関数を使って WebView から AlertDialog を呼び出した際に全画面表示を止めてしまう問題について取り組んでいた時に、入力フィールドへフォーカスした際に Immersive モードが解除されるのは仕方がないとしても、その扱いについて考えていたところ、こちらも一癖ある挙動だったので紹介します。
通常 Immersive モードではない場合、WebView にキーボードが被るという問題を解決すべく、AndroidManifest.xml の activity ノード属性として android:windowSoftInputMode="adjustResize" と書くのですが、Immersive モードの場合はこの方法がうまくいきません。そこで試してみたのが、入力フィールドがフォーカスした時に Immersive モードを解除する、という方法です。
まず、MainActivity クラスの中に次のような JavaScript インターフェースを用意し、
public class WebViewJavaScriptInterface{
private Context context;
public WebViewJavaScriptInterface(Context context){
this.context = context;
}
@JavascriptInterface
public void disableFullScreen() {
getWindow().getDecorView().setSystemUiVisibility(0);
}
} |
public class WebViewJavaScriptInterface{
private Context context;
public WebViewJavaScriptInterface(Context context){
this.context = context;
}
@JavascriptInterface
public void disableFullScreen() {
getWindow().getDecorView().setSystemUiVisibility(0);
}
}
WebView について色々と書いてある onCreate の中で JavaScript から呼び出せるように設定しました。
webView.addJavascriptInterface(new WebViewJavaScriptInterface(this), "app"); |
webView.addJavascriptInterface(new WebViewJavaScriptInterface(this), "app");
そしてテキスト入力フィールドを１つ持っている HTML ではこのように JavaScript から Immersive モードを解除するようにしました。
document.querySelector('input[type=text]').ontouchend = function(){
app.disableFullScreen();
}; |
document.querySelector('input[type=text]').ontouchend = function(){
app.disableFullScreen();
};
ところが、Logcat に “Uncaught Error: Java exception was raised during method invocation” というエラーを出力しうまく動かなかったので、MainActivity で Handler を呼び出し、JavaScript インターフェース内の関数を次のようにすると期待通りの動作をエミュレータで確認しました。
@JavascriptInterface
public void disableFullScreen() {
handler.postDelayed(new Runnable() {
@Override
public void run() {
getWindow().getDecorView().setSystemUiVisibility(0);
}
}, 0);
} |
@JavascriptInterface
public void disableFullScreen() {
handler.postDelayed(new Runnable() {
@Override
public void run() {
getWindow().getDecorView().setSystemUiVisibility(0);
}
}, 0);
}
また、JavaScript インターフェース内にもう一つ次のようなものを用意して（前回不要だと思った enableImmersiveMode 関数を再度用意）、
@JavascriptInterface
public void enableFullScreen() {
handler.postDelayed(new Runnable() {
@Override
public void run() {
enableImmersiveMode();
}
}, 0);
} |
@JavascriptInterface
public void enableFullScreen() {
handler.postDelayed(new Runnable() {
@Override
public void run() {
enableImmersiveMode();
}
}, 0);
}
送信ボタンを押した時に Immersive モードとなるようにしました。
document.querySelector('#submit').ontouchend = function(){
app.enableFullScreen();
}; |
document.querySelector('#submit').ontouchend = function(){
app.enableFullScreen();
};
実際にこのような挙動で動くようになったのですが、
ソフトウェアキーボード以外の場所で画面を押すと入力フィールドからフォーカスが外れてキーボードが隠れるという OS の設計上、このように加えておくと更に安心です。
document.querySelector('input[type=text]').onblur = function(){
app.disableFullScreen();
}; |
document.querySelector('input[type=text]').onblur = function(){
app.disableFullScreen();
};
実機で検証してみると、処理能力が劣る古い機種ではフルスクリーンになる際にステータスバーが途中で止まってしまったりということが確認できたので、postDelayed で遅延を750〜1000と与えると（動作的にはギクシャクする感は否めないのですが）解決しました。そして、最初に書いていた android:windowSoftInputMode="adjustResize" を外してみると…なんと入力フィールドが隠れずにキーボードに合わせて移動するという世にも奇妙な…。
参考：
