君はそうだったのか?

21174 ワード

Android経験チュートリアル

Html 5の急速な発展に伴い、ますます多くのAppがWebViewの使用を頻繁にし、以前のようにwebview.loadurl(url)を呼び出すだけで基本的な使用を満たすことができなくなった.
1.WebViewって何?
Webインタフェースを表示するためのViewで、WebViewは自分のブラウザやActivityでコンテンツを表示することができ、WebKitレンダリングエンジンを採用してWebページを表示し、履歴ナビゲーション、前のページ、後のページ、拡大、縮小、検索テキストなどの機能を実行します.プロジェクトでWebViewを使用するには、ネットワークにアクセスする権限を追加する必要があります.
uses-permission android:name=”android.permission.INTERNET”
2.WebViewの基本使用
2.1 Intent呼び出しシステムブラウザを送信してロードページを開く
WebViewはデフォルトでは、widgetプラグインなどのブラウザをサポートしていません.デフォルトではJsインタラクションをオフにし、Webページを無視すると無視されます.1つのページだけを表示したいが、インタラクティブではない場合は、webviewを使用するのが適切です.もしあなたが全面的なwebページを実現したいならば、あなたはURLを開いてブラウザを使って現在のURLを開くことを意図することができますが、一般的にはユーザーの体験のために、このような使い方の使用はまだ少ないです.例は次のとおりです.

Uri uri = Uri.parse("http://www.baidu.com");
Intent intent = new Intent(Intent.ACTION_VIEW, uri);
startActivity(intent);

2.2 webviewを呼び出す.ロードする
2.2.1 webview.loadUrl(url)ネットワークアドレスのロード
もちろん、多くの場合、layoutファイルでwebviewコントロールを定義し、ActivityのonCreateに表示したいurlインタフェースをロードして、次のように使用します.

    //     ,    
    WebView webView = (WebView) findViewById(R.id.webview);
    webView.loadUrl("http://www.baidu.com");
    //  :                 ,       
    webView.setWebViewClient(new WebViewClient(){
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            view.loadUrl(url);
            //       
            return super.shouldOverrideUrlLoading(view,url);
        }
    });

    //     ,   setContentView   webview
    WebView webView = new WebView(this);
    webView.loadUrl("http://www.baidu.com");
    setContentView(webView);
    webView.setWebViewClient(new WebViewClient(){
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            view.loadUrl(url);
            //       
            return super.shouldOverrideUrlLoading(view,url);
        }
    });

注意:システムブラウザをポップアップしてインタフェースを表示したくない場合は、shouldOverrideUrlLoadingメソッドを書き換える必要があります.
2.2.2 webview.loadUrl(url)apkパッケージ内htmlファイルのロード
Webviewは、ネットワークページをロードするだけでなく、apkパッケージのhtmlファイルをロードしたり、プロジェクトassetsリソースディレクトリの下にhtmlファイルを置いたりして、次のコードを呼び出すことができます.

webView.loadUrl("file:///android_asset/test.html");

2.2.3 webview.loadUrl(url)SDカードのhtmlファイルをロードする
WebviewはSDカードルートディレクトリの下testをロードする.htmlファイルコードは次のとおりです.

webView.loadUrl("content://com.android.htmlfileprovider/sdcard/test.html");

2.3 webview HTML形式文字列のロード
Webページをロードできるほか、webviewはHTML形式の文字列をロードすることもできます.主に2つの方法で、1つのwebView.loadData(data,mimeType,encoding);が展示され、1つはwebView.loadDataWithBaseURL(baseUrl,data,mimeType,encoding,historyUrl);である.中国語のデータがある場合、デフォルトでは文字化けしが表示され、文字化けしを解決するには2つの方法があります.まず、英語のデータがすべてあればどのように表示すればいいかを見てみましょう.

String data = "<html><body>You scored <b>Egglishb> points.body>html>";
webView.loadData(summary, "text/html", null);

表示効果は図のようになります.
中国語が含まれている場合は、文字化けして表示されます.
1つ目の変更方法は、loadDataで2番目のパラメータを変更することができます.3番目のパラメータを「UTF-8」に変更すると、依然として文字化けになります.次のように正しく変更されます.

String data = "<html><body>You scored <b>    b> points.body>html>";
webView.loadData(data, "text/html; charset=UTF-8", null);

次のように表示されます.
理由は次のとおりです.loadDataWithBaseURLを使用する場合、URLが入力されない場合、リフレッシュは白画面になります.リフレッシュ時に呼び出されるのはreloadメソッドです.reloadは、入力されたURLに基づいて再ロードされると再びloadUrl(url)となり、URLが入力されない場合、デフォルトのURLはabout:blankです.loadDataを使用すると、リフレッシュはキャッシュから取るだけですが、4.0以上の場合、APIに書かれているloadData(data, “UTF-8”, null);に従って文字化けして、loadData(data, "text/html; charset=UTF-8", null);loadDataと書くと最終的なメカニズムは、入ってきた3つのパラメータをつなぎ合わせてからloadUrl操作を行い、パラメータはdata, "text/html; charset=UTF-8", nullの3つをつなぎ合わせ、text/html; charset=UTF-8を加えるとページを限定した文字に相当します
上の1つの修正方法は多くの機種に適していますが、依然として一部の機種では文字化けして表示されているため、システムの下部ファイルの修正と関係がある可能性があります.そのため、loadDataWithBase URL方法を呼び出し、以下のように変更する方法があります.

String data = "You scored      points.";
webView.loadDataWithBaseURL(null,summary,"text/html","UTF-8",null);

3.あなたのwebviewをカスタマイズする
WebViewは基本的な使い方のほか、匿名のWebChromeClientを作成してJavascriptを処理するダイアログボックス、サイトアイコン、サイトtitle、ロードの進捗など、ユーザーが望む効果を達成するためにカスタマイズすることもできます.匿名のWebViewClientを作成して、WebViewが各種の通知、要求イベントなどを処理するのを助けることもできます.もちろん、WebSettingsを有効にしたり、Jsインタラクションを開いたりすることもできますが、以下では一つ一つ紹介します.
3.1 WebChromeClient
メソッドのコードにはAndroid側が独自に処理しており、匿名の内部クラスを書くか、WebChromeClientクラスを書いてwebviewを呼び出すことができる.setWebChromeClient(mWebChromeClient);コードの例は次のとおりです.

webView.setWebChromeClient(new WebChromeClient() {
    //         ,             ,           1~100;   : 29~100;30~100;
    @Override
    public void onProgressChanged(WebView view, int progress) {
        Log.e(TAG,"progress="+progress);
    }

    //        Title        title
    //  :    ,    title=      
    //           onReceiveError    ,          title  
    @Override
    public void onReceivedTitle(WebView view, String title) {
        Log.e(TAG,"title="+title);
    }
    //       icon,   ,     Bitmap  ,       
    @Override
    public void onReceivedIcon(WebView view, Bitmap icon) {
        super.onReceivedIcon(view, icon);
    }

});

以上は簡単な使い方ですが、以下ではonJsAlert(),onJsPrompt(),onJsConfirm()を逐一分析します.WebChromeClientクラスでは、この3つのメソッドを書き換えることができます.この場合、WebViewにロードされているhtmlでalert("alert....");,confirm("confirm...");,prompt("prompt...", "defaultValue");の3つのメソッドが実行されると、対応する3つのメソッドが実行されます.この3つのメソッドの戻り値をtrue、すなわちこのメソッドをカスタマイズできます.自分で定義したDialogを書き込むと、htmlとActivityのインタラクションが実現します.
注意JsResultのような操作が必要な場合、操作が必要な場合はresult.cofirm(). キャンセルするとresult.cancel(); 各メソッドにdialogを書き込む必要があります.setOnkeyListener(); メソッドはBackキーをリスニングし、listenerにresultを書きます.cancel(); そうでなければ、システムがこの事件を消費していないので、エラーが発生します.
3.1.1カスタムonJsAlert
Javascript Alertとは?
Alertは、ユーザの前に表示すると、OKをクリックするだけで閉じることができる提示情報または警告情報のダイアログボックスである.
一般的な実装は次のようになります.

<html>
   <SCRIPT type="text/javascript">
       alert('This is alert dialog !')
   SCRIPT>
html>

効果図は以下の通りです.
onJsAlertAPIの紹介:
public boolean onJsAlert (WebView view, String url, String message, JsResult result)
Tell the client to display a javascript alert dialog. If the client returns true, WebView will assume that the client will handle the dialog. If the client returns false, it will continue execution.
クライアントにalert dialogが表示されることを通知します.メソッドがtrueを返すと、webviewはこのdialogを自分で処理します.falseが返されると、実行が続行され、webviewは処理されません.
Androidでは、onJsAlertメソッドを書き換えるのが一般的で、パラメータのmessage情報をToast形式でポップアップしてユーザーに通知します.コードは以下の通りです.

@Override
   public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
       Toast.makeText(getApplicationContext(), message, Toast.LENGTH_LONG).show();
       ////        ，    confirm,             。
       result.confirm();
       return true;
   }

あるいは、デフォルトの表示インタフェースを上書きするDialogを自分でポップアップすることができます.コードは次のとおりです.

@Override
   public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
       final AlertDialog.Builder builder = new AlertDialog.Builder(view
               .getContext());
       builder.setTitle("        ").setMessage(message)
               .setPositiveButton("  ", null);
       //           
       //     keycode  
       builder.setOnKeyListener(new DialogInterface.OnKeyListener() {
           @Override
           public boolean onKey(DialogInterface dialog, int keyCode,
                                KeyEvent event) {
               Log.e(TAG,"keyCode==" + keyCode + "event=" + event);
               return true;
           }
       });
       //     back    
       builder.setCancelable(false);
       AlertDialog dialog = builder.create();
       dialog.show();
       result.confirm();//        ，    confirm,             。
       return true;
   }

3.1.2カスタムonJsConfirm
使い方はonJsAlertと基本的に同じで、直接コードをつけます.

@Override
   public boolean onJsConfirm(WebView view, String url, String message,
                              final JsResult result) {
       final AlertDialog.Builder builder = new AlertDialog.Builder(view
               .getContext());
       builder.setTitle("webview  confirm   ")
               .setMessage(message)
               .setPositiveButton("  ", new DialogInterface.OnClickListener() {
                   @Override
                   public void onClick(DialogInterface dialog, int which) {
                       result.confirm();
                   }
               })
               .setNeutralButton("  ", new DialogInterface.OnClickListener() {
                   @Override
                   public void onClick(DialogInterface dialog, int which) {
                       result.cancel();
                   }
       });
       builder.setOnCancelListener(new DialogInterface.OnCancelListener() {
           @Override
           public void onCancel(DialogInterface dialog) {
               result.cancel();
           }
       });

       //  keycode   ，                          
       builder.setOnKeyListener(new DialogInterface.OnKeyListener() {
           @Override
           public boolean onKey(DialogInterface dialog, int keyCode,
                                KeyEvent event) {
               Log.e(TAG, "keyCode==" + keyCode + "event=" + event);
               return true;
           }
       });
       //     back    
       builder.setCancelable(false);
       AlertDialog dialog = builder.create();
       dialog.show();
       return true;
   }

3.1.3カスタムonJsPrompt
直接コードをつけるのは、大体同じ使い方ですが、個別のパラメータが異なるだけです.

@Override
   public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, final JsPromptResult result) {
       final AlertDialog.Builder builder = new AlertDialog.Builder(view
               .getContext());
       builder.setTitle("webview  prompt   ").setMessage(message);

       final EditText et = new EditText(view.getContext());
       et.setSingleLine();
       et.setText(defaultValue);
       builder.setView(et);
       builder.setPositiveButton("  ", new DialogInterface.OnClickListener() {
           @Override
           public void onClick(DialogInterface dialog, int which) {
               result.confirm(et.getText().toString());
           }
       }).setNeutralButton("  ", new DialogInterface.OnClickListener() {
           @Override
           public void onClick(DialogInterface dialog, int which) {
               result.cancel();
           }
       });

       //  keycode  ，                          
       builder.setOnKeyListener(new DialogInterface.OnKeyListener() {
           @Override
           public boolean onKey(DialogInterface dialog, int keyCode,
                                KeyEvent event) {
               Log.e(TAG, "keyCode==" + keyCode + "event=" + event);
               return true;
           }
       });

       //     back    
       builder.setCancelable(false);
       AlertDialog dialog = builder.create();
       dialog.show();
       return true;
   }

4.websettingsを使って、あなたのwebviewをもっと強くします.
Webviewはwebsettingsを取得した後、現在のwebviewに対して各種の設定を行うことができて、例えばJsインタラクティブオン、スケール、サポートプラグインなど、私達は直接コードを例にして、コードの中で各機能点に対してすべて詳しく説明して、小さい仲間は参照してください;

WebSettings webSettings = webView.getSettings();

   //        ，     、     
   webView.requestFocusFromTouch();
   //  js  
   webSettings.setJavaScriptEnabled(true);
   webSettings.setJavaScriptCanOpenWindowsAutomatically(true); //    JS     

   //       ，   setLoadWithOverviewMode  
   webSettings.setUseWideViewPort(true);  //          webview   
   webSettings.setLoadWithOverviewMode(true); //         

   //    ，   true。 setBuiltInZoomControls   。
   // setSupportZoom false，  WebView    ，    setBuiltInZoomControls         。
   webSettings.setSupportZoom(true);
   webSettings.setBuiltInZoomControls(true); //         

   webSettings.setDisplayZoomControls(false); //         

   //        
   webSettings.setRenderPriority(WebSettings.RenderPriority.HIGH);

   webSettings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN); //        
   webSettings.supportMultipleWindows();  //     
   webSettings.setAllowFileAccess(true);  //        
   webSettings.setLoadsImagesAutomatically(true);  //        
   webSettings.setDefaultTextEncodingName("utf-8");//

はい、上はwebviewのいくつかの简単な使い方で、后で私达はwebviewのキャッシュメカニズムに対して、前进して後退して操作して、jsと互いに调和して、webviewのメモリの漏洩などの问题を避けて1つ1つ分析して、私の文字があなたの必要な时にあなたを助けることができることを望んで、みんなが美しい1日があることを望みます.....

history apiでブラウザ履歴を「すり替え」

PhoneGap開発対策:アップルの監査をどのように通過するか