Webviewアプリの立ち上げ時に下記のvisibilityを切り替える方法でスプラッシュ画面を実装していたのだけど、pullTorefresh機能を追加したくてSwipeRefreshLayoutを使ったらスプラッシュの表示に苦労した。
Splash screen while loading a url in a webview in android app
- レイアウトの変更ではどうにもうまくいかず
- assetsにスプラッシュ用HTMLを用意
- 簡易Javascriptで縦のセンタリング
SwipeRefreshLayoutの使用を前提にスプラッシュの実装を試みた。レイアウトの切り替えではスプラッシュが表示されなかったり上スクロールができなくなったりとうまくいかなかった。
そこで、assetsフォルダにスプラッシュ用のHTMLを用意しまずWebviewでそれを表示してからサイトをロードさせる方法をとるとうまくいった。
まず、assetsフォルダにicon.pngと下記のsplash.htmlを用意する
splash.html
<html>
<head>
<title>スプラッシュ画面</title>
</head>
<body style="text-align:center;">
<img src="file:///android_asset/icon.png" style="width:40px;" id="splash_title"/>
<h4 style="color:gray; margin-top:5px">アプリタイトル</h4>
<script type="text/javascript">
var half_height = window.innerHeight/2-40;
if(half_height==null || half_height<=0)
half_height = window.parent.screen.height/2-40;
var element = document.getElementById("splash_title");
element.style.paddingTop = half_height;
</script>
</body>
</html>
画像はおしゃれに小さく表示させる。if文の箇所は念のため。端末の画面サイズによらずタイトルと画像を中央に表示させることにこだわりHTMLにJavascriptを埋め込んで調整した。
プログラムでは用意したHTMLファイルをまずロードする。
MainActivity
webview.loadUrl("file:///android_asset/splash.html");
ローカルへのアクセスなので瞬時にonPageFinishedが呼び出される。そこで本家のサイトにアクセスしに行く。
MainActiviry
webview.setWebViewClient(new WebViewClient(){
@Override
public void onPageFinished(WebView view, String url) {
mSwipe.setRefreshing(false);
if(url.contains("splash")) webview.loadUrl("http://...");
}
いい感じ。