2011年1月31日

Android開発簡単なWEBブラウザを作ってみるその2

こんにちは熊谷です。

前回は簡単なWEBブラウザを作ってみようということで、URLを入力してそのページを表示するだけのものを作成しました。今回はそれをベースにしてページのリロード機能とプログレスバーの表示、ファイルのダウンロード機能を付け加えたいと思います。

まずはページのリロード機能です。これはとっても簡単でreload()を使うだけです。

MyApp.javaにリロードボタンを押したときのメソッドを追加して


public void onClickReloadBtn(View v) {
  mWebView.reload();
}

res/layout/main.xmlにリロードボタンを追加します。


<Button android:text="reload"
    android:id="@+id/reload_btn"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:onClick="onClickReloadBtn">
</Button>

これで実行すると、「go」ボタンの隣に「reload」ボタンが表示され、それをクリックしたときには現在のURLを再読み込みします。

せっかくリロードボタンを付けたのに読み込んでいるかわからないですよね。そこで今度はプログレスバーです。
MyApp.javaに以下のようなコードを追加します


mWebView.setWebChromeClient(new WebChromeClient() {
  @Override
  public void onProgressChanged(WebView view, int newProgress) {
    View pBarWrapper = findViewById(R.id.progress_bar_wrapper);
    ProgressBar pBar = (ProgressBar) findViewById(R.id.progress_bar);
    pBar.setProgress(newProgress);
    if (newProgress == 100) {
      pBarWrapper.setVisibility(View.GONE);
    } else {
     pBarWrapper.setVisibility(View.VISIBLE);
    }
  }
});

そして、res/layout/main.xmlにプログレスバーを追加し、適切に表示されるようWebView付近のレイアウトを少し変更します。


<RelativeLayout
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <WebView
        android:id="@+id/webview"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        />
    <FrameLayout 
        android:id="@+id/progress_bar_wrapper"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:visibility="gone"
        android:paddingLeft="1dip"
        android:paddingRight="1dip">
        <ProgressBar
          android:id="@+id/progress_bar"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content">
        </ProgressBar>
    </FrameLayout>
</RelativeLayout>

これで実行すると、読み込み中の場合は画面の真ん中にプログレスバーが表示されるようになります。

そして、ついでに普通のブラウザであればリンクをクリック時にファイルをダウンロードすることができますが、前回作ったこのブラウザにはその機能がありません。ということで、実装してみます。実装といってもそんな大変な作業ではなくWebViewのsetDownloadListenerを使います。


mWebView.setDownloadListener(new DownloadListener() {
  @Override
  public void onDownloadStart(String url, String userAgent,
          String contentDisposition, String mimetype, long contentLength) {
      // TODO Auto-generated method stub
     
    Intent intent = new Intent(Intent.ACTION_VIEW);
    intent.setType(mimetype);
    intent.setData(Uri.parse(url));
    startActivity(intent);
  }
});

こんな感じでMyApp.javaに追加します。これで実行するとファイルをダウンロードできるリンクをクリックした場合、ファイルのダウンロードが開始されます。

ということで、今回の最終的なソースコードは以下のようになります。試してみてください。
MyApp.java


package com.example.myapp;
import android.app.Activity;
import android.content.Intent;
import android.net.Uri;
import android.os.Bundle;
import android.view.View;
import android.webkit.DownloadListener;
import android.webkit.WebSettings;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.EditText;
import android.widget.ProgressBar;
public class MyApp extends Activity {
  private WebView mWebView;
  /** Called when the activity is first created. */
  @Override
    public void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.main);
      // Webビューの作成
      mWebView = (WebView) findViewById(R.id.webview);
      mWebView.setVerticalScrollbarOverlay(true);
      mWebView.setWebViewClient(new WebViewClient());
      // プログレスバーの表示
      mWebView.setWebChromeClient(new WebChromeClient() {
        @Override
        public void onProgressChanged(WebView view, int newProgress) {
          View pBarWrapper = findViewById(R.id.progress_bar_wrapper);
          ProgressBar pBar = (ProgressBar) findViewById(R.id.progress_bar);
          pBar.setProgress(newProgress);
          if (newProgress == 100) {
            pBarWrapper.setVisibility(View.GONE);
          } else {
            pBarWrapper.setVisibility(View.VISIBLE);
          }
        }
      });
      // ファイルのダウンロード
      mWebView.setDownloadListener(new DownloadListener() {
        @Override
        public void onDownloadStart(String url, String userAgent,
          String contentDisposition, String mimetype, long contentLength) {
          // TODO Auto-generated method stub
          Intent intent = new Intent(Intent.ACTION_VIEW);
          intent.setType(mimetype);
          intent.setData(Uri.parse(url));
          startActivity(intent);
        }
      });
      WebSettings settings = mWebView.getSettings();
      settings.setSupportMultipleWindows(true);
      settings.setLoadsImagesAutomatically(true);
      settings.setBuiltInZoomControls(true);
      settings.setSupportZoom(true);
      settings.setLightTouchEnabled(true);
    }
  public void onClickGoBtn(View v) {
    EditText editText = (EditText) findViewById(R.id.urlbar);
    String urlString = editText.getText().toString();
    mWebView.loadUrl(urlString);
  }
  public void onClickReloadBtn(View v) {
    mWebView.reload();
  }
}

main.xml
>>HTML

android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
android:singleLine="true"
android:layout_weight="1"
android:text="http://s1.asial.co.jp/~hiroshi/test.html"
android:layout_width="wrap_content"
android:layout_height="wrap_content">

android:id="@+id/go_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="onClickGoBtn">

android:id="@+id/reload_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="onClickReloadBtn">

<RelativeLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<WebView
android:id="@+id/webview"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
android:id="@+id/progress_bar_wrapper"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:visibility="gone"
android:paddingLeft="1dip"
android:paddingRight="1dip">
<ProgressBar
android:id="@+id/progress_bar"
android:layout_width="wrap_content"
android:layout_height="wrap_content">