首页 > 学院 > 开发设计 > 正文

仿微信加载网页的WebView的实现

2019-11-09 14:53:55
字体:
来源:转载
供稿:网友

一.概览:

          Android WebView在Android平台上是一个特殊的View, 他能用来显示网页,这个类可以被用来在你的app中仅仅显示一张在线的网页,还可以用来开发浏览器。WebView内部实现是采用渲染引擎来展示view的内容,提供网页前进后退,网页放大,缩小,搜索,在Android 4.3系统及其已下WebView内部采用Webkit渲染引擎,在Android 4.4采用chromium 渲染引擎来渲染View的内容。

二.WebView的基本使用(创建 webview 大致可以分为一下两种方式)

(1)创建WebView的实例加入到Activity view tree中   WebView webview = new WebView(this);  setContentView(webview); (2)在xml中配置WebView

(2)在xml中配置WebView 

<Webview 

 android:layout_width="match_parent"  

 android:layout_height="match_parent" > 

</Webview> 

三.注意事项

打开网页时不调用系统浏览器, 而是在本WebView中显示:      mWebView.setWebViewClient(new WebViewClient(){      @Override      public boolean shouldOverrideUrlLoading(WebView view, String url) {          view.loadUrl(url);          return true;      }  });

 按返回键时, 不退出程序而是返回上一浏览页面:     public boolean onKeyDown(int keyCode, KeyEvent event) {               if ((keyCode == KeyEvent.KEYCODE_BACK) && mWebView.canGoBack()) {                   mWebView.goBack();                   return true;               }               return super.onKeyDown(keyCode, event);           }打开页面时, 自适应屏幕:
  WebSettings webSettings =   mWebView .getSettings();         webSettings.setUseWideViewPort(true);//设置此属性,可任意比例缩放  webSettings.setLoadWithOverviewMode(true);页面支持缩放:
  WebSettings webSettings =   mWebView .getSettings();         webSettings.setjavaScriptEnabled(true);    webSettings.setBuiltInZoomControls(true);  webSettings.setSupportZoom(true);
如果webView中需要用户手动输入用户名、密码或其他,则webview必须设置支持获取手势焦点。
  webview.requestFocusFromTouch();
WebView 加载界面主要调用三个方法:LoadUrl、LoadData、LoadDataWithBaseURL. 
    1、LoadUrl            直接加载网页、图片并显示.(本地或是网络上的网页、图片、gif)      2、LoadData            显示文字与图片内容    3、LoadDataWithBase             显示文字与图片内容WebSettings 的常用方法介绍        setJavascriptEnabled(true);  //支持js       setPluginsEnabled(true);  //支持插件        setUseWideViewPort(false);  //将图片调整到适合webview的大小        setSupportZoom(true);  //支持缩放        setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN); //支持内容重新布局         supportMultipleWindows();  //多窗口        setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);  //关闭webview中缓存         setAllowFileaccess(true);  //设置可以访问文件        setNeedInitialFocus(true); //当webview调用requestFocus时为webview设置节点       webview webSettings.setBuiltInZoomControls(true); //设置支持缩放        setJavaScriptCanOpenWindowsAutomatically(true); //支持通过JS打开新窗口         setLoadWithOverviewMode(true); // 缩放至屏幕的大小       setLoadsImagesAutomatically(true);  //支持自动加载图片WebViewClient 的方法全解      doUpdateVisitedHistory(WebView view, String url, boolean isReload)  //(更新历史记录)       onFormResubmission(WebView view, Message dontResend, Message resend) //(应用程序重新请求网页数据)       onLoadResource(WebView view, String url) // 在加载页面资源时会调用,每一个资源(比如图片)的加载都会调用一次。       onPageStarted(WebView view, String url, Bitmap favicon) //这个事件就是开始载入页面调用的,通常我们可以在这设定一个loading的页面,告诉用户程序在等待网络响应。       onPageFinished(WebView view, String url) //在页面加载结束时调用。同样道理,我们知道一个页面载入完成,于是我们可以关闭loading 条,切换程序动作。       onReceivedError(WebView view, int errorCode, String description, String failingUrl)// (报告错误信息)       onReceivedHttpAuthRequest(WebView view, HttpAuthHandler handler, String host,String realm)//(获取返回信息授权请求)      onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) //重写此方法可以让webview处理https请求。      onScaleChanged(WebView view, float oldScale, float newScale) // (WebView发生改变时调用)      onUnhandledKeyEvent(WebView view, KeyEvent event) //(Key事件未被加载时调用)      shouldOverrideKeyEvent(WebView view, KeyEvent event)//重写此方法才能够处理在浏览器中的按键事件。     shouldOverrideUrlLoading(WebView view, String url) //在点击请求的是链接是才会调用,重写此方法返回true表明点击网页里面的链接还是在当前的webview里跳转,不跳到浏览器那边。这个函数我们可以做很多操作,比如我们读取到某些特殊的URL,于是就可以不打开地址,取消这个操作,进行预先定义的其他操作,这对一个程序是非常必要的。

四.具体操作

   预览如下图所示:

首先我们来自定义一个带进度条的WebView,名字为PRogressWebView:
public class ProgressWebView extends WebView {    private ProgressBar progressbar;    public ProgressWebView(Context context, AttributeSet attrs) {        super(context, attrs);        progressbar = new ProgressBar(context, null,                android.R.attr.progressBarStyleHorizontal);        progressbar.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT,                10, 0, 0));        Drawable drawable = context.getResources().getDrawable(R.drawable.progress_bar_states);        progressbar.setProgressDrawable(drawable);        addView(progressbar);        setWebViewClient(new MyWebViewClient());        setWebChromeClient(new MyWebChromeClient());        //是否可以缩放        getSettings().setSupportZoom(true);        getSettings().setBuiltInZoomControls(true);        getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);        getSettings().setSupportMultipleWindows(true);        getSettings().setJavaScriptCanOpenWindowsAutomatically(true);        getSettings().setDomStorageEnabled(true);        getSettings().setPluginState(WebSettings.PluginState.ON);        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {            getSettings().setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);        }    }    public class MyWebChromeClient extends WebChromeClient {        @Override        public void onProgressChanged(WebView view, int newProgress) {            if (newProgress == 100) {                progressbar.setVisibility(GONE);            } else {                if (progressbar.getVisibility() == GONE)                    progressbar.setVisibility(VISIBLE);                progressbar.setProgress(newProgress);            }            super.onProgressChanged(view, newProgress);        }        @Override        public boolean onCreateWindow(WebView view, boolean isDialog, boolean isUserGesture, Message resultMsg) {            WebView mWebView = new WebView(view.getContext());            WebView.WebViewTransport transport = (WebView.WebViewTransport) resultMsg.obj;            transport.setWebView(mWebView);            resultMsg.sendToTarget();            return true;        }    }    public class MyWebViewClient extends WebViewClient {        @Override        public boolean shouldOverrideUrlLoading(WebView view, String url) {            view.loadUrl(url);            return true;        }        @Override        public void onReceivedSslError(WebView view, SslErrorHandler handler, android.net.http.SslError error) {            handler.proceed();        }        @Override        public boolean shouldOverrideKeyEvent(WebView view, KeyEvent event) {            return super.shouldOverrideKeyEvent(view, event);        }    }    @Override    protected void onScrollChanged(int l, int t, int oldl, int oldt) {        LayoutParams lp = (LayoutParams) progressbar.getLayoutParams();        lp.x = l;        lp.y = t;        progressbar.setLayoutParams(lp);        super.onScrollChanged(l, t, oldl, oldt);    }}下面我们来看一下drawable目录下的progress_bar_states.xml是如何写的:
<?xml version="1.0" encoding="utf-8"?><!-- 层叠 --><layer-list xmlns:android="http://schemas.android.com/apk/res/android" >    <item android:id="@android:id/background">        <shape>            <corners android:radius="2dp" />            <gradient                android:angle="270"                android:centerColor="#E3E3E3"                android:endColor="#E6E6E6"                android:startColor="#C8C8C8" />        </shape>    </item>    <item android:id="@android:id/progress">        <clip>            <shape>                <corners android:radius="2dp" />                <gradient                    android:centerColor="#4AEA2F"                    android:endColor="#31CE15"                    android:startColor="#5FEC46" />            </shape>        </clip>    </item></layer-list><layer-list>这个标签可能我们不是很熟悉,因为我们一般常用的就是<shape>和<selector>这两个,layer-list是将多个图片或上面两种效果按照顺序层叠起来,layer就像photoshop中的图层一样。其中有个<clip>标签,是可以用来剪载图片显示,例如,可以通过它来做进度度。你可以选择是从水平或垂直方向剪载。自定义好ProgressWebView之后,我们只需要在xml布局文件中声明就可以使用了:
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical">    <RelativeLayout        android:id="@+id/title"        android:layout_width="match_parent"        android:layout_height="48dp"        android:background="#22292c">        <ImageView            android:id="@+id/iv_back"            android:layout_width="40dp"            android:layout_height="match_parent"            android:layout_alignParentLeft="true"            android:layout_centerVertical="true"            android:paddingBottom="5dp"            android:paddingLeft="5dp"            android:paddingRight="5dp"            android:paddingTop="5dp"            android:scaleType="centerInside"            android:src="@drawable/top_bar_back" />        <View            android:id="@+id/view_temp"            android:layout_width="1dp"            android:layout_height="match_parent"            android:layout_marginBottom="8dp"            android:layout_marginTop="8dp"            android:layout_toRightOf="@id/iv_back"            android:background="#14191A" />        <TextView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_centerVertical="true"            android:layout_marginLeft="10dp"            android:layout_toRightOf="@id/view_temp"            android:text="具体名称"            android:textColor="#ffffff"            android:textSize="18sp" />        <ImageView            android:layout_width="40dp"            android:layout_height="match_parent"            android:layout_alignParentRight="true"            android:layout_centerVertical="true"            android:paddingBottom="5dp"            android:paddingLeft="5dp"            android:paddingRight="5dp"            android:paddingTop="5dp"            android:scaleType="centerInside"            android:src="@drawable/icon_wallet_more" />    </RelativeLayout>    <com.xxx.xxx.module.setting.ProgressWebView        android:id="@+id/baseweb_webview"        android:layout_width="match_parent"        android:layout_height="match_parent" /></LinearLayout>

预览如下

接着我们定义一个BaseWebActivity来显示我们自定义的WebView
public class BaseWebActivity extends Activity {    protected ProgressWebView mWebView;    @Override    protected void onCreate(Bundle savedInstanceState) {        // TODO Auto-generated method stub        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_baseweb);        mWebView = (ProgressWebView) findViewById(R.id.baseweb_webview);        mWebView.getSettings().setJavaScriptEnabled(true);        mWebView.getSettings().setSupportZoom(true);        mWebView.getSettings().setBuiltInZoomControls(true);        mWebView.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);        mWebView.getSettings().setSupportMultipleWindows(true);        mWebView.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);        initData();    }    private void initData() {        Intent intent = getIntent();        String url = intent.getStringExtra("url");        if (url != null) {            mWebView.loadUrl(url);        }    }    @Override    public boolean onKeyDown(int keyCode, KeyEvent event) {        if ((keyCode == KeyEvent.KEYCODE_BACK) && mWebView.canGoBack()) {            mWebView.goBack();            return true;        }        return super.onKeyDown(keyCode, event);    }} 然后调用这个Activity即可,例如:
public class AboutUsActivity extends BaseSubActivity {    @Override    protected void onCreate(@Nullable Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_setting_about);        findViewById(R.id.html_app).setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                String url = "http://xxxxx.html";                Intent intent = new Intent(AboutUsActivity.this, BaseWebActivity.class);                intent.putExtra("url", url);                startActivity(intent);            }        });    }    @Override    public boolean onKeyDown(int keyCode, KeyEvent event) {        if (keyCode == KeyEvent.KEYCODE_BACK) {            new AlertDialog.Builder(this).setTitle("退出").setMessage("确认要退出吗?").setPositiveButton("OK", new DialogInterface.OnClickListener() {                @Override                public void onClick(DialogInterface dialog, int which) {                    TOAST.showShort("确认退出");                }            }).setNegativeButton("CANCLE", new DialogInterface.OnClickListener() {                @Override                public void onClick(DialogInterface dialog, int which) {                    TOAST.showShort("取消退出");                }            }).create().show();            return false;        }        return super.onKeyDown(keyCode, event);    }}


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表