Androidプログラミングブログ

Androidプログラミングを勉強していく中でわかったことをメモする

【Androidプログラミング入門 #024】WebViewの表示待ち中にProgressDialogを表示する

はじめに

WebViewの表示待ち中に真っ白はいけてない。
すぐ表示されればいいけど、時間がかかると動作していないと思い、
アプリを終了されてしまうかもしれない。

なのでWebViewの表示待ち中にProgressDialogを表示します。

1. プロジェクト作成

f:id:fjswkun:20151106203713p:plain

f:id:fjswkun:20151106203722p:plain

f:id:fjswkun:20151106203732p:plain

f:id:fjswkun:20151106203742p:plain

2. 画面にWebViewを追加

content_main.xmlを開く。

プロジェクト作成時に追加されるTextViewを削除し、
WebViewを追加します。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent"
    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:showIn="@layout/activity_main" tools:context=".MainActivity">

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

3. WebViewの表示

MainActivity.javaを開き、onCreateメソッドにWebViewを表示する設定を追記します。

protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);

    FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
    fab.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                    .setAction("Action", null).show();
        }
    });

    // WebViewの表示
    WebView webView = (WebView)findViewById(R.id.webView);
    webView.getSettings().setJavaScriptEnabled(true);
    webView.loadUrl("http://android.swift-studying.com");
}

4. インターネットアクセス許可の設定

AndroidManifest.xmlを開きます。

applicationタグの上にインターネットアクセス許可設定の一行を追加します。
<uses-permission android:name="android.permission.INTERNET"></uses-permission>

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.swift_studying.samplewebviewwithprogressdialg" >

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

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme" >
        <activity
            android:name=".MainActivity"
            android:label="@string/app_name"
            android:theme="@style/AppTheme.NoActionBar" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

5. WebViewClientのサブクラスの作成

WebViewの読み込み中にProgressDialogを表示する場合、
WebViewClientのサブクラスを作成します。

ProgressDialgWebViewClientという名前でサブクラスを作成しました。

package com.swift_studying.samplewebviewwithprogressdialg;

import android.app.ProgressDialog;
import android.content.Context;
import android.graphics.Bitmap;
import android.webkit.WebView;
import android.webkit.WebViewClient;

/**
 * Created by com.swift_studying on 15/11/06.
 */
public class ProgressDialgWebViewClient extends WebViewClient{
    private ProgressDialog progressDialog;

    public ProgressDialgWebViewClient(Context context, String message){
        super();

        progressDialog = new ProgressDialog(context);
        progressDialog.setMessage(message);
    }

    @Override
    public void onPageStarted(WebView view, String url, Bitmap favicon) {
        super.onPageStarted(view, url, favicon);
        progressDialog.show();
    }

    @Override
    public void onPageFinished(WebView view, String url) {
        super.onPageFinished(view, url);
        progressDialog.dismiss();
    }
}

6. WebViewにWebViewClientのサブクラスをセット

MainActivity.javaを開きます。

WebViewの表示をする処理の部分に一行追加します。
手順5で作成したサブクラスをWebViewにセットします。

protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);

    FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
    fab.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                    .setAction("Action", null).show();
        }
    });

    // WebViewの表示
    WebView webView = (WebView)findViewById(R.id.webView);
    webView.getSettings().setJavaScriptEnabled(true);
    webView.setWebViewClient(new ProgressDialgWebViewClient(this, "データ取得中"));  // 追加
    webView.loadUrl("http://android.swift-studying.com");
}

7. 実行

実行します。

f:id:fjswkun:20151106210445p:plain

f:id:fjswkun:20151106210453p:plain

うまくいかない方はこちらからサンプルをダウンロード。

SampleWebViewWithProgressDialg.zip - Google ドライブ

参考情報

参考

Androidアプリ開発逆引きレシピ (PROGRAMMER’S RECiPE)

Androidアプリ開発逆引きレシピ (PROGRAMMER’S RECiPE)

開発用デバイス

Androidの勉強をはじめた人は知っているようにエミュレーターはちょー遅い。
開発用に安いAndroidを買えば、勉強がはかどります!
iPhoneと比較すると安いので買ったほうがいいと思います。

おすすめデバイス

勉強用に使うだけなので価格が高い最新デバイスは必要ないと思います。
最新のデバイスは一人前のAndroidプログラマーになったら購入を検討しましょう。

nexus5 16GBASUS Nexus7 ( 2013 ) TABLET

その他に探すなら↓から。
Android nexus5を勉強用に購入