WebView（Webページビュー）の基本的な使い方

WebSettings: JS スクリプトの実行を許可するかどうかの setJavaScriptEnabled() 設定など、WebView 関連の構成設定 いくつかのメソッドは次のとおりです:

ここで 3 つのロード メソッドの違いを区別することが重要です:

loadUrl(): Web ページのコンテンツを直接表示します (ネットワーク画像のみを表示します)。通常、文字化けは表示されません。 loadData(data, "text/html", "UTF-8"): URI 形式でデータをロードするために使用されます。コンテンツはネットワーク経由でロードできません。 画像が読み込めなかったり、文字化けが発生したりすることがよくありますが、String 型のデータは主に Unicode でエンコードされていることがわかっています。 WebView は通常、リソースを節約するために UTF-8 エンコードを使用しますが、WebView 用に設定する必要があります。 webview.getSettings().setDefaultTextEncodingName("UTF -8");loadDataWithBaseURL(baseUrl, string, "text/html", "utf-8", null):loadData クラスの 1 つ 拡張クラス。画像をロードできます。baseUrl は保存された画像パスです。文字化けしたコードを解決するには、ここで utf-8 を設定するだけです。 問題！

これは一部の属性のリストにすぎません。その他については、公式ドキュメントをご自身で確認する必要があります:

WebChromeClient Documentation

WebSettings Documentation

3.いくつかの一般的な要件

runrendernings：

2) レイアウト コードで WebView を設定します

皆さんもよくニュース アプリやポータル情報アプリを見たことがあると思いますが、その構造は次のとおりです。

左上隅に、現在のアクティビティを閉じるボタンが中央にあり、右側に更新ボタンがあります。 右下隅にこのようなフローティングボタンがある場合がありますが、画面の幅を超えてスライドすると表示されます。 ユーザーがクリックすると、Web ページの上部にスクロールして戻ります。簡単に実装してみましょう！

:

:

:

public class MainActivity extends AppCompatActivity {

    private WebView webView;
    private long exitTime = 0;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        webView = new WebView(this);
        webView.setWebViewClient(new WebViewClient() {
            //设置在webView点击打开的新网页在当前界面显示,而不跳转到新的浏览器中
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                view.loadUrl(url);
                return true;
            }
        });
        webView.getSettings().setJavaScriptEnabled(true);  //设置WebView属性,运行执行js脚本
        webView.loadUrl("http://www.baidu.com/");          //调用loadView方法为WebView加入链接
        setContentView(webView);                           //调用Activity提供的setContentView将webView显示出来
    }


    //我们需要重写回退按钮的时间,当用户点击回退按钮：
    //1.webView.canGoBack()判断网页是否能后退,可以则goback()
    //2.如果不可以连续点击两次退出App,否则弹出提示Toast
    @Override
    public void onBackPressed() {
        if (webView.canGoBack()) {
            webView.goBack();
        } else {
            if ((System.currentTimeMillis() - exitTime) > 2000) {
                Toast.makeText(getApplicationContext(), "再按一次退出程序",
                        Toast.LENGTH_SHORT).show();
                exitTime = System.currentTimeMillis();
            } else {
                super.onBackPressed();
            }

        }
    }
}

質問と回答:

回答: 実際、この理由は次のとおりです: URL のリダイレクトの問題です。実際、Baidu にアクセスしたとき:

www.baidu.com をロードしたにもかかわらず、Baidu はリダイレクトを実行し、Baidu のモバイル バージョンにジャンプしました。 Webサイト： つまり、実際のプロセスは次のとおりです。 www.baidu.com -> Baidu のモバイル版 -> 他のリンクを開きます。

上記の shouldOverrideUrlLoading() メソッドは次のように記述されていることがわかります:

view.loadUrl(url); return true; ユーザーが [戻る] ボタンを 1 回クリックすると、WebView が goback メソッドを呼び出すことがわかります。 ) 一旦、上位 3 つを載せます A、B、C の 3 つのサイトがあるとします。C で戻ると、B - > A をクリックすると問題が発生します。 B が A に来たのに、リダイレクトにより再び B に飛んでしまう…これが原因です。 「戻る」ボタンをクリックしても WebView が起動しない原因: 手の速度、Web ページが WebView に読み込まれない。 「戻る」ボタンを連続してダブルクリックすると、手の速度が十分に速くなるはずです (笑)。冗談ですが、この問題を解決するには、次のことだけを行う必要があります。 shouldOverrideUrlLoading 内の内容を削除し、 return false と書きます。 リダイレクトではないと思われる場合は、URL を自分で変更してみてください~

要件 2: WebView スクロール イベントの監視

残念ながら、スクロール イベントの監視には通常 setOnScrollChangedListener の設定が必要であることは誰もが知っています。 WebView はそのようなメソッドを提供しませんが、WebView を書き換えてそのメソッドの 1 つをオーバーライドできます。 protected void onScrollChanged(final int l,final int t,final int oldl,final int oldt){} 次に、外部へのインターフェイスを提供します。サンプル コードは次のとおりです。スクロールするには「へへ」ボタン、「へへ」ボタンをクリックしてトップに戻ります。 そうすれば、へへボタンが非表示になります~

要件 3: スクロール バーの問題

使用できる属性は次のとおりです:

setVerticalScrollBarEnabled(false); //縦は表示されません Display

setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY)//WebViewの外側にスクロールバーが表示されます

要件4: スケーリングとアダプティブ画面を設定します

Web ページを開くときの一般的な習慣によれば、WebView がはっきりと見えない場合は、2 本の指で Web ページをズームインまたはズームアウトすることが好きです。 スケーリングをサポートするかどうかを手動で設定する必要があります。

次のコードを追加するだけです:

public class MainActivity extends AppCompatActivity implements View.OnClickListener {


    private Button btn_back;
    private TextView txt_title;
    private Button btn_top;
    private Button btn_refresh;
    private WebView wView;
    private long exitTime = 0;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        bindViews();
    }


    private void bindViews() {
        btn_back = (Button) findViewById(R.id.btn_back);
        txt_title = (TextView) findViewById(R.id.txt_title);
        btn_top = (Button) findViewById(R.id.btn_top);
        btn_refresh = (Button) findViewById(R.id.btn_refresh);
        wView = (WebView) findViewById(R.id.wView);

        btn_back.setOnClickListener(this);
        btn_refresh.setOnClickListener(this);
        btn_top.setOnClickListener(this);

        wView.loadUrl("http://www.baidu.com");
        wView.setWebChromeClient(new WebChromeClient() {
            //这里设置获取到的网站title
            @Override
            public void onReceivedTitle(WebView view, String title) {
                super.onReceivedTitle(view, title);
                txt_title.setText(title);
            }
        });


        wView.setWebViewClient(new WebViewClient() {
            //在webview里打开新链接
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                view.loadUrl(url);
                return true;
            }
        });
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.btn_back:
                finish();          //关闭当前Activity
                break;
            case R.id.btn_refresh:
                wView.reload();    //刷新当前页面
                break;
            case R.id.btn_top:
                wView.setScrollY(0);   //滚动到顶部
                break;
        }
    }
    
    @Override
    public void onBackPressed() {
        if (wView.canGoBack()) {
            wView.goBack();
        } else {
            if ((System.currentTimeMillis() - exitTime) > 2000) {
                Toast.makeText(getApplicationContext(), "再按一次退出程序",
                        Toast.LENGTH_SHORT).show();
                exitTime = System.currentTimeMillis();
            } else {
                finish();
            }

        }
    }
}

• 上記のコードを使用すると、ページは次のようになります:

• ズームすると、非常に一般的なズーム制御である嫌な問題が発生します。 次に、次のコードを追加してズーム コントロールを非表示にします。

  /**
   * Created by Jay on 2015/9/11 0011.
   */
  public class MyWebView extends WebView {
  
      private OnScrollChangedCallback mOnScrollChangedCallback;
  
      public MyWebView(Context context) {
          super(context);
      }
  
      public MyWebView(Context context, AttributeSet attrs) {
          super(context, attrs);
      }
  
      public MyWebView(Context context, AttributeSet attrs, int defStyleAttr) {
          super(context, attrs, defStyleAttr);
      }
  
      @Override
      protected void onScrollChanged(int l, int t, int oldl, int oldt) {
          super.onScrollChanged(l, t, oldl, oldt);
          if (mOnScrollChangedCallback != null) {
              mOnScrollChangedCallback.onScroll(l - oldl, t - oldt);
          }
      }
  
      public OnScrollChangedCallback getOnScrollChangedCallback() {
          return mOnScrollChangedCallback;
      }
  
      public void setOnScrollChangedCallback(
              final OnScrollChangedCallback onScrollChangedCallback) {
          mOnScrollChangedCallback = onScrollChangedCallback;
      }
  
      public static interface OnScrollChangedCallback {
          //这里的dx和dy代表的是x轴和y轴上的偏移量，你也可以自己把l, t, oldl, oldt四个参数暴露出来
          public void onScroll(int dx, int dy);
      }
  
  }

  webView だけのために、初期のズーム率を自分で設定することもできます:

  public class MainActivity extends AppCompatActivity {
  
      private MyWebView wView;
      private Button btn_icon;
      private long exitTime = 0;
  
      @Override
      protected void onCreate(Bundle savedInstanceState) {
          super.onCreate(savedInstanceState);
          setContentView(R.layout.activity_main);
          btn_icon = (Button) findViewById(R.id.btn_icon);
          wView = (MyWebView) findViewById(R.id.wView);
          wView.loadUrl("http://www.hao123.com");
          wView.setWebViewClient(new WebViewClient() {
              //在webview里打开新链接
              @Override
              public boolean shouldOverrideUrlLoading(WebView view, String url) {
                  view.loadUrl(url);
                  return true;
              }
          });
  
          //比如这里做一个简单的判断，当页面发生滚动，显示那个Button
          wView.setOnScrollChangedCallback(new MyWebView.OnScrollChangedCallback() {
              @Override
              public void onScroll(int dx, int dy) {
                  if (dy > 0) {
                      btn_icon.setVisibility(View.VISIBLE);
                  } else {
                      btn_icon.setVisibility(View.GONE);
                  }
              }
          });
  
          btn_icon.setOnClickListener(new View.OnClickListener() {
              @Override
              public void onClick(View v) {
                  wView.setScrollY(0);
                  btn_icon.setVisibility(View.GONE);
              }
          });
  
      }
  
      @Override
      public void onBackPressed() {
          if (wView.canGoBack()) {
              wView.goBack();
          } else {
              if ((System.currentTimeMillis() - exitTime) > 2000) {
                  Toast.makeText(getApplicationContext(), "再按一次退出程序",
                          Toast.LENGTH_SHORT).show();
                  exitTime = System.currentTimeMillis();
              } else {
                  finish();
              }
  
          }
      }
  }

  ねえ、上記は Web ページ全体をズームしたものですが、場合によってはフォントを拡大縮小するだけで済みます。 これを実行します:

  WebSettings settings = wView.getSettings();
  settings.setUseWideViewPort(true);//设定支持viewport
  settings.setLoadWithOverviewMode(true);   //自适应屏幕
  settings.setBuiltInZoomControls(true);
  settings.setDisplayZoomControls(false);
  settings.setSupportZoom(true);//设定支持缩放

  settings.setDisplayZoomControls(false);

  を使用してサイズを直接設定することもできます。

  Android には、5 つのオプションのフォント サイズ値があります: SMALLEST (50%)、SMALLER (75%)、NORMAL (100%)、LARGER (150%)、LARGEST (200%)。

  ---

  要件 5. WebView の Cookie データを取得する

  Cookie が実際にはユーザーの一意の識別子を表す単なる文字列であることは誰もが知っています。一般的なシナリオは次のとおりです。 ユーザーがアカウントのパスワードを入力し、クリックしてログインした後、サーバーが提供する関連サービスにアクセスするには、この Cookie を使用する必要があります。 onPageFinsihed メソッドに Cookie の取得を書き込むことができます。

  wView.setInitialScale(25);//为25%，最小缩放等级

  ---

  要件 6. WebView の Cookie データを設定します。 WebView の Cookie の設定についてはどうすればよいでしょうか? Cookie を設定する必要がある場合は、次のコードを追加します:

  settings.setTextZoom(int)；

  ちなみに、上記のコードは、loadUrl() よりも前に記述する必要があります。Cookie が設定されている場合は、他の設定は行わないようにします。 そうしないと無効になる可能性がありますので、webView 関連の設定の最後〜loadUrl() の前に設定することをお勧めします。

  WebViewDemo1:

  WebViewDemo1.zip をダウンロードします。 :

  ---

  WebViewDemo2 をダウンロードします

  このセクションの概要:

  このセクションでは、WebView の基本的な使用方法、Web ページの読み込み、スケーリング、フォント スケーリングの設定、 アダプティブスクリーンやCookieの取得や設定など、日々の開発では様々なニーズがあると思いますが、 スペースの都合上、ここまでしか書きませんが、アイデアを歓迎するメッセージがあれば、次のセクションで HTML5 側で JavaScript を使用する方法を学びます。 WebView を操作して、携帯電話の関連データを取得してください。乞うご期待~ありがとう~

  ← Android が WebService を呼び出す

  WebView と JavaScript の対話の基本 →
  提出する

  PHP中国語ウェブサイト

  ホームページコース記事に質問辞書マニュアルダウンロード検索 APPダウンロード