Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
4
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

@ymkwt

AndroidのWebviewでSwipeRefreshLayoutを使用した際のスプラッシュ画面の実装方法

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://...");
  }

いい感じ。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
4
Help us understand the problem. What are the problem?