WebViewとProgressBarと…

おことわり

このブログは個人的なプログラミング学習の備忘録を綴ったものです。この実装で動作することは確認済みですが、もっと簡単でいい方法があったり 、あるいはセキュリティや保守の面からあまり好ましい実装ではない可能性があります。また、コードに関する言い回し等も不正確なことが多々あると思われますので、参考にされる場合は十分に検証の上、自己責任でお願いします。
※尚、このブログは適宜加筆修正いたします。

WebViewとProgressBarと…わたし？

唐突ですが、アプリ内でWebViewを用いてウェブサイトを表示することが間々あると思うのですが、読み込みに時間がかかるとフリーズしているのかと思われてしまうのでプログレスバーの表示が必須ですよね。

プログレスバーは#setWebChromeClient()で出すことが出来ますが、これだけだとプログレスバーが出たままになってしまいます。（私がやり方を知らないだけかもしれませんが…）

読み込み中だけ表示して完了したら非表示にするには#setWebViewClient() を使えば簡単なのですが、これだとサイト内のリンクをクリックしたときにWebViewの中でページ遷移するようになってしまい、端末の標準ブラウザ等は起動しません。（そのほうが都合がいい時もありますが…）

例えばHidepro7のアプリでは他のアプリを紹介するためにWebViewで当サイトのAppsを表示しているのですが、上記の方法だと各アプリのリンクからGooglePlayのアプリを開いてインストールすることが出来ません。

もちろんwebView内でGoogle Playのサイトには遷移するのですが、それだと「アプリをインストールするにはGoogleアカウントにログインしてください。」などとアプリ内でGoogleアカウントのパスワードを入力させるような怪しいことになってしまいます。(^^;)ｱﾔｼｸﾊﾅｲ?

ここは普通に GooglePlayのアプリを起動してサクッとインストールして欲しいところですよね。

そんなわけで！

今回はWebViewで読み込みが完了したらプログレスバーを非表示にし、サイト内のリンクをクリックすると端末の標準ブラウザやアプリが起動するような実装にする方法を綴ってみようと思います。

では早速ですが、先ずは忘れないようにマニフェストにパーミッションを追加します。

AndroidManifest.xml

<uses-permission android:name="android.permission.INTERNET" />

次にレイアウトです。
LinearLayoutではプログレスバーをセンターに表示できなかった(出来るかもしれませんが…)のでFrameLayoutにしています。

activity_my_web_view.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
   <!-- 略 -->
    tools:context=".mywebView">

   <!-- 略 (バナー広告等) -->

<!--Buttonなど各Viewを上下に配置した残りスペース全てをWebViewに-->
　　<FrameLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

        <WebView android:id="@+id/webView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>

        <ProgressBar android:id="@+id/progressBar"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"/>

    </FrameLayout>

   <!-- 略 (戻るボタンなど)-->

</LinearLayout>

全体をLinearLayoutで括って上下に広告やボタンを配置し、残りがWebViewになるようにしています。

上記ではグルグル回るタイプのプログレスバーが真ん中に表示されます。
進捗に合わせて表示する横ライン型のプログレスバーをWebViewの上部に表示したい時は<ProgressBar>にstyleを追加して以下のようにします。

<ProgressBar android:id="@+id/progressBar"
    style="?android:attr/progressBarStyleHorizontal"
    android:max="100"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="top"/>

そしてActivity です。

MyWebView.java

/* 省略 */

public class MyWebView extends AppCompatActivity{

    private ProgressBar mProgressBar;

    protected void onCreate(Bundle savedInstanceState){
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_my_web_view);

        final WebView webView = findViewById(R.id.webView);
        mProgressBar = findViewById(R.id.progressBar);


        webView.setWebChromeClient( new WebChromeClient(){

            /* 読み込み状況を取得してプログレスバーにセット、表示 */
            @Override
            public void onProgressChanged(WebView wv, int progress){
                super.onProgressChanged(wv, progress);

                mProgressBar.setProgress(progress);
            }
        });

        webView.setWebViewClient(new WebViewClient(){

            /* 読み込みを開始すると呼ばれるメソッド */
            @Override
            public void onPageStarted(WebView wb, String url, Bitmap bm){
                super.onPageStarted(wb, url, bm);

                /* プログレスバーを表示 */
                mProgressBar.setVisibility(View.VISIBLE);
            }

            /* 読み込みが完了すると呼ばれるメソッド */
            @Override
            public void onPageFinished(WebView wb, String url){
                super.onPageFinished(wb, url);

                /* プログレスバーを非表示 */
                mProgressBar.setVisibility(View.GONE);

　　　　　　　　　/* setWebViewClient()にnullを渡して破棄 */
                webView.setWebViewClient(null);
            }
        });

        /* java Scriptを有効にする */
        webView.getSettings().setJavaScriptEnabled(true);
    }
}

以上、
正直、setWebViewClientにnullを渡すとかはどうなのかな～と思います…
裏方ではsetWebViewClientさんが
「引数nullじゃねーか！(# ﾟДﾟ) 」って怒ってるかもしれません (￣▽￣;)

まぁでも想定通りの挙動になってエラーはなかったので、とりあえずこれでいいかな…と。(＾＾;)

そんなわけで今回はこのあたりで締めたいと思います。

次回あたりは広告まわりの備忘録を綴りたいと…現時点では思っています。
ネイティブ広告のテンプレートの実装ではじめちょっと戸惑ったところとか（出来ちゃうとすごく簡単なんだけどね）、あと、いたずらクリック防止策で連続でクリックできないようにするとか…広告まわりって意外とやることあるんですよね。

それでは、
最後までご拝読いただきありがとうございました。