WebView控件的使用

好久没有更新了！今天我们来学习WebView控件。废话不多说，先看下我的运行结果吧！

接下来看下如何实现代码逻辑！

第一步：在主布局中写

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

第二步：对主JAVA代码进行编写

public class MainActivity extends AppCompatActivity {
   
   //定义控件
    private WebView webView;
    private ProgressDialog pDialog
;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);//加载布局
        init();//方法调用

    }

    private void init() {

        //寻找控件的ID
        webView= (WebView) findViewById(R.id.webView);
       //webView加载web资源,打开方式是默认的浏览器
        webView.loadUrl("http://www.imooc.com/course/programdetail/pid/33");
        //覆盖WebView默认通过第三方或者是系统浏览器打开的行为，使得网页可以在WebView中打开
        webView.setWebViewClient(new WebViewClient(){
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {

                webView.loadUrl(url);
           //返回值为true的时候控制网页在WebView中打开，为false时调用系统浏览器呀第三方浏览器
                return false;
            }
        });
        //启用支持JavaScript
        WebSettings settings=webView.getSettings();
        settings.setJavaScriptEnabled(true);
        //WebView加载页面优先使用缓存加载
        settings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);
        //页面加载的进度
        webView.setWebChromeClient(new WebChromeClient(){
            @Override
            public void onProgressChanged(WebView view, int newProgress) {
                //newProgress为1~100之间的整数
                if(newProgress==100){
                    //网页加载完毕，关闭ProgressDialog
                    closeDialog();
                }else{
                    //网页正在加载，打开ProgressDialog
                    openDialog(newProgress);
                }
            }

            private void closeDialog() {
                //进度条不为空并且显示有进度条时
                if(pDialog!=null&&pDialog.isShowing()){
                    pDialog.dismiss();//进度条取消显示
                    pDialog=null;//并且进度条设置为空
                }
            }

            private void openDialog(int newProgress) {
                //进度条为空时
                if (pDialog==null){
                    pDialog=new ProgressDialog(MainActivity.this);
                    pDialog.setTitle("正在加载...");
                    //进度条的样式
                    pDialog.setProgressStyle(ProgressDialog.STYLE_HORIZONTAL);
                    pDialog.setProgress(newProgress);//显示进度条的进度
                    pDialog.show();//显示进度条
                }else {
                    pDialog.setProgress(newProgress);//显示最新（刷新）的进度
                }
            }
        });
    }

    //改写物理按键--返回的逻辑
    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if(keyCode==KeyEvent.KEYCODE_BACK){
            if (webView.canGoBack()){
                webView.goBack();//返回上一页面
                return true;
            }else{
                System.exit(0);//退出
            }
        }
        return super.onKeyDown(keyCode, event);
    }
}

哼哼，是不是感觉太多了虽然有备注可是还是觉得看不懂！没事没事！下面我们来看下如何一步一步的完成成这个Demon

1.对控件进行实例化

 private WebView webView;
  private ProgressDialog pDialog;

 webView= (WebView) findViewById(R.id.webView);

2.来进行网页的加载！这里有两种加载方式

1）是在你的手机默认的浏览器中打开

2）还有一个是通过第三方的浏览器来打开

  //webView加载web资源,打开方式是默认的浏览器
        webView.loadUrl("http://www.imooc.com/course/programdetail/pid/33");
        //覆盖WebView默认通过第三方或者是系统浏览器打开的行为，使得网页可以在WebView中打开
        webView.setWebViewClient(new WebViewClient(){
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {

                webView.loadUrl(url);
           //返回值为true的时候控制网页在WebView中打开，为false时调用系统浏览器呀第三方浏览器
                return false;
            }
        }); 

温馨提示：如果要访问网络，需在配置清单中加载权限

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

做完以上步骤之后来进行运行一下！它是可以实现的

当你点击按钮时会进入到另一个界面！但当你按返回时它会直接退出程序界面！！！

此时想一想这是为什么呢？下面来看下我们的实现方式！

 //改写物理按键--返回的逻辑
    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if(keyCode==KeyEvent.KEYCODE_BACK){
            if (webView.canGoBack()){
                webView.goBack();//返回上一页面
                return true;
            }else{
                System.exit(0);//退出
            }
        }
        return super.onKeyDown(keyCode, event);
    }

加入这个代码之后再运行一下！再当你按返回键时它就可以返回到上一页了！！！

4.好了！实现以上功能之后再来看看如何实现对话框的!就是ProgressDialog

      webView.setWebChromeClient(new WebChromeClient(){
            @Override
            public void onProgressChanged(WebView view, int newProgress) {
                //newProgress为1~100之间的整数
                if(newProgress==100){
                    //网页加载完毕，关闭ProgressDialog
                    closeDialog();//调用该方法
                }else{
                    //网页正在加载，打开ProgressDialog
                    openDialog(newProgress);
                }
            }

            private void closeDialog() {
                //进度条不为空并且显示有进度条时
                if(pDialog!=null&&pDialog.isShowing()){
                    pDialog.dismiss();//进度条取消显示
                    pDialog=null;//并且进度条设置为空
                }
            }

            private void openDialog(int newProgress) {
                //进度条为空时
                if (pDialog==null){
                    pDialog=new ProgressDialog(MainActivity.this);
                    pDialog.setTitle("正在加载...");
                    //进度条的样式
                    pDialog.setProgressStyle(ProgressDialog.STYLE_HORIZONTAL);
                    pDialog.setProgress(newProgress);//显示进度条的进度
                    pDialog.show();//显示进度条
                }else {
                    pDialog.setProgress(newProgress);//显示最新（刷新）的进度
                }
            }
        });
    }

写完之后再来运行一下，按返回键时便会有Dialog!那么问题来了！运行时虽然有Dialog但你运行时有没有发现出现的Dialog它没有一个过程就跳到另一个界面来所以下面我们来实现该功能

 //启用支持JavaScript
        WebSettings settings=webView.getSettings();
        settings.setJavaScriptEnabled(true);
        //WebView加载页面优先使用缓存加载
        settings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);
        //页面加载的进度

就是说对Dialog来写一个缓存机制！再来运行一下就会出现和我一样的效果图了...好了！到这里你学会WebView的使用了吗？

如果觉得对你有帮助的话给个赞呗！