Webの表示-02(WebView,requestWindowFeature(Window.FEATURE_INDETERMINATE_PROGRESS);, )

WeViewをもう少し使いやすくしたソースを紹介します。

サンプルソースで紹介しています。

タイトルバーにページを読み込む時のクルクル回る”あれ”を表示させる方法は

requestWindowFeature(Window.FEATURE_INDETERMINATE_PROGRESS);

ページの読み込みの進捗を表すプログレスバーの表示は
requestWindowFeature(Window.FEATURE_PROGRESS);

いづれも、タイトルバーを非表示にすると、
表示されないので、気を付けてください。



サンプルソースでは、urlの読み込み時に
urlを分析して、GooglePlayの画面に遷移させたり、
メーラーのスキームを検知した時の処理を記述しています。
また、WebViewのプラグインも何個か入れているので、
よかったら、サンプルソースのコメントアウトを確認してください。



■サンプルソース

package com.example.webview;

import android.net.Uri;
import android.os.Bundle;
import android.app.Activity;
import android.content.Intent;
import android.graphics.Bitmap;
import android.view.Window;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings.PluginState;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.LinearLayout;
import android.widget.Toast;

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        //レイアウトの作成
        LinearLayout oLayout = new LinearLayout(getApplicationContext());

        //ページ読み込み中にぐるぐる回す
        requestWindowFeature(Window.FEATURE_INDETERMINATE_PROGRESS);
        //ページ読み込みの進捗を棒で表示
        requestWindowFeature(Window.FEATURE_PROGRESS);
        //WebVIewの生成・設定
        WebView oWebview = Create_WebView();
        //WebViewをレイアウトに追加
        oLayout.addView(oWebview);
        //レイアウトの設定
        setContentView(oLayout);
        //最初に読み込むページの設定
        oWebview.loadUrl("http://google.co.jp");
    }

    private WebView Create_WebView(){
        WebView view = new WebView(this);
        //JSに対応
        view.getSettings().setJavaScriptEnabled(true);
        //拡大できるようにする
        view.getSettings().setBuiltInZoomControls(true);
        //Web Storageを使う。Fcebookで使われている
        view.getSettings().setDomStorageEnabled(true);
        //FLASH対応
        view.getSettings().setPluginsEnabled(true);
        view.getSettings().setPluginState(PluginState.ON);
  
        setProgressBarIndeterminateVisibility(true);
        setProgressBarVisibility(true);
        try {
            view.setWebViewClient(new WebViewClient() {
                //ページの読み込み完了時に呼ばれる
                @Override
                public void onPageFinished(WebView view, String url) {
                    super.onPageFinished(view, url);
                    //プロセスバーの表示終了
                    setProgressBarIndeterminateVisibility(false);
                }
            
                //ページの読み込み時に呼ばれる
                @Override
                public void onPageStarted(WebView view, String url, Bitmap favicon) {
                    super.onPageStarted(view, url, favicon);
                    //プロセスバーの表示開始
                    setProgressBarIndeterminateVisibility(true);
                }

                //ページの読み込み前に呼ばれる。urlごとの処理はここで記述
                @Override
                public boolean shouldOverrideUrlLoading(WebView view,String url){
                    Toast.makeText(getApplicationContext(), url, Toast.LENGTH_SHORT).show();
                    //メーラーの立ち上げスキームを検知
                    if(url.substring(0, 7).equals("mailto:")) {
                        view.stopLoading();
                        Uri uri = Uri.parse(url);
                        //メーラーを立ち上げる
                        Intent intent = new Intent(Intent.ACTION_SENDTO, uri);
                        startActivity(intent);
                        finish();

                    //Google Playのスキームを検知
                    }else if (url.startsWith("market://")){
                        //Google Playに飛ばす
                        Intent i = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
                        startActivity(i);
                        return true;
                    //他は全部読み込む
                    }else{
                        view.loadUrl(url);
                    }
                    return true;
                }
            });
      
            // インジケータの表示
            view.setWebChromeClient(new WebChromeClient() {
                @Override
                public void onProgressChanged(WebView view, int progress) {
                    setProgress(progress * 100);
                    if(progress == 100) {
                        setProgressBarIndeterminateVisibility(false);
                        setProgressBarVisibility(false);
                    }
                }
            });
        } catch (Exception e) {
            Toast.makeText(this, e.getMessage(), Toast.LENGTH_LONG).show();
        }
        return view;
    }
}

■実行結果

Webの表示-01(WebView )

アプリ内でWebページを開くすごい簡単な方法を説明します。

アプリでブラウザーを開くのではなく、
AndroidのWebViewを使う方法を説明します。

生成

WebView oWebview = new WebView(this);

注意点は引数のthisです。
Context型を渡せばいいかと思いきや、アクティビティを
渡さないと怒られます。

URLの読み込み
WebView型.loadUrl(開くURL);

こんな感じで、urlをロードします。

他にも
たくさんのメソッドが用意されています。

WebView型..goBack();              ページを１つ戻る
WebView型..goForward();        ページを１つ進める
WebView型..canGoBack();        ページを１つ戻れるかの判定
WebView型..canGoForward();   ページを１つ進められるかの判定
WebView型..reload();              ページを再読み込みする

あと、ネットワークに接続するので、
Manifest.xmlの許可の追加

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

が必要です。


■サンプルソース

package com.example.webview;

import android.os.Bundle;
import android.app.Activity;

import android.webkit.WebView;
import android.widget.LinearLayout;

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        //レイアウトの作成
        LinearLayout oLayout = new LinearLayout(getApplicationContext());

        //WebVIewの生成
        WebView oWebview     = new WebView(this);
        //WebViewをレイアウトに追加
        oLayout.addView(oWebview);
        //レイアウトの設定
        setContentView(oLayout);
        //最初に読み込むページの設定
        oWebview.loadUrl("http://google.co.jp");

    }
}

■実行結果

とりあえず、WebViewを使う方法を紹介しましたが、
このままだとFlashページが表示できなかったり、スキーマの検知が
できなかったりと、あんまり便利でないです。
次にもう少し使い勝手のいいWebViewを紹介します。

タッチを検出(onTouchEvent, MotionEvent)

画面をお触りされたかの検出方法について、

Activityを継承 (extends)していれば、簡単に使えます。

方法

@Override
public boolean onTouchEvent(MotionEvent event) {
}

を作成すれば、
画面をタッチされる度に作成したメソッド(onTouchEvent)が呼ばれます。


■サンプルソース

package com.example.touch;

import android.os.Bundle;
import android.app.Activity;
import android.view.MotionEvent;
import android.widget.LinearLayout;
import android.widget.Toast;

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        LinearLayout oLayout = new LinearLayout(getApplicationContext());
        setContentView(oLayout);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        String sEvent = "";
        switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            sEvent = "タッチ";
            break;
        case MotionEvent.ACTION_UP:
            sEvent = "離した";
            break;
        case MotionEvent.ACTION_MOVE:
            sEvent = "動かしている";
            break;
        }
        String x = String.valueOf(event.getX());
        String y = String.valueOf(event.getY());

        String sTime =String.valueOf( event.getDownTime() );

        Toast.makeText(getApplicationContext(), sEvent + " 時間:" + sTime + "横:" + x + "縦:" + y, Toast.LENGTH_SHORT).show();

        return super.onTouchEvent(event);
    }
}

■実行結果

座標の数字の単位はpxです。何px目を押されたかを返されます。
画面の幅もpxで取得できるので、相対的にどこを押されたかの計算も簡単にできます。


MotionEvent.getActionの
リアクション判定は他にもたくさんあるのですが、
よく利用するのが上の３つです。

今回は
MotionEvent.getX()
                 .getY()
                 .getAction()
                 .getDownTime()

を使いましたが
                 getPressure()
をつかうと、どれくらいの強さでタッチされたかが、
返ってくるらしいっすよ！！

詳しくはこちらで

http://developer.android.com/reference/android/view/MotionEvent.html

サーバーに格納している画像を表示させる(ImageView, URL)

URLから、画像を表示する方法です。

作り方はbitmapファイルをURLから、作成して、
BitmapをImageViewで表示しています。

Http通信して、画像を持ってくる方法もありますが、
個人的には画像を表示するだけなら、こちらの方法がお勧めです。

■サンプルソース

package com.example.imageview;

import java.io.IOException;
import java.io.InputStream;
import java.net.URL;

import android.os.Bundle;
import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
   
        //レイアウトパラム定数(縦横の長さの定数)の格納
        final int WC = ViewGroup.LayoutParams.WRAP_CONTENT;
        final int MP = ViewGroup.LayoutParams.MATCH_PARENT;
     
        super.onCreate(savedInstanceState);
        //基礎画面の作成
        LinearLayout oLayout = new LinearLayout(getApplicationContext());
        oLayout.setOrientation(LinearLayout.VERTICAL);
        setContentView(oLayout);
       
        //普通のviewの生成
        ImageView oImg = new ImageView(getApplicationContext());
        //横MAXの縦幅は画像と同じ高さ
        oImg.setLayoutParams(new LinearLayout.LayoutParams(MP, WC));
       
        URL url;
        InputStream istream;
        try {
            //画像のURLを直うち
            url = new URL("https://www.gstatic.com/android/market_images/web/play_logo_x2.png");
            //インプットストリームで画像を読み込む
            istream = url.openStream();
            //読み込んだファイルをビットマップに変換
            Bitmap oBmp = BitmapFactory.decodeStream(istream);
            //ビットマップをImageViewに設定
            oImg.setImageBitmap(oBmp);
            //インプットストリームを閉じる
            istream.close();
        } catch (IOException e) {
            // TODO 自動生成された catch ブロック
            e.printStackTrace();
        }
        oLayout.addView(oImg);
    }
}

■実行結果

こんな感じになります。

サーバーの画像を読みこむので、
通信が遮断されてる時や、サーバ自体の故障時には
エラーになります。
try catcchの中をちゃん考慮して、
記述してください。

どんな、エラー処理をすればいいかというと、
画像を読み込む前に電波があるのかの確認とか、
エラー時の画像を用意するとか必要になります。

エラー (you must specify a way to create the tab)

you must specify a way to create the tab

TabHost
TabSpec

でViewを作る際に出現したエラー


。。。。。


いろいろと調べたら、
TabSpecにタブ名とタブの画像の指定がなかったために発生したようでした。