AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

WebView二次封装，使用简单

2023-07-02 407
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： WebView二次封装，使用简单

抓住人生中的一分一秒，胜过虚度中的一月一年!

背景

项目开发中会经常用到webview，当我们每次写webview时候，都会写一堆重复的代码，这样对于高效开发来说成了累赘，今天给大家分享一个通用的webview，目的是为了使用简单化，本文章实现了webview通用的功能，如果构建复杂的交互功能，可选择扩展或者用GitHub一些开源的第三方类库

实现目标

1、webview基本功能实现

2、进度条实现

说明

为了扩展性高一些，封装的WebViewWrapper选择不继承WebView，而是继承RelativeLayout，在父控件中重新构造webview

1、新建Xml布局，创建webview和ProgressBar

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
 <FrameLayout
        android:id="@+id/frameLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    <WebView
        android:id="@+id/webView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
    <ProgressBar
        android:id="@+id/progressBar"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="match_parent"
        android:layout_height="2dp"
        android:progressDrawable="@drawable/progressbar_orange_selector"/>
</RelativeLayout>

2、新建WebViewWrapper类，继承RelativeLayout

public class WebViewWrapper extends RelativeLayout

3、在WebViewWrapper类中创建webview并对其配置属性

WebSettings settings = webView.getSettings();
settings.setJavaScriptEnabled(true); // 默认false，设置true后我们才能在WebView里与我们的JS代码进行交互
settings.setJavaScriptCanOpenWindowsAutomatically(true); // 设置JS是否可以打开WebView新窗口
settings.setSupportZoom(true); // 支持缩放
settings.setBuiltInZoomControls(true); // 支持手势缩放
settings.setDisplayZoomControls(false); // 不显示缩放按钮
settings.setDatabaseEnabled(true);//数据库存储API是否可用，默认值false。
settings.setSaveFormData(true);//WebView是否保存表单数据，默认值true。
settings.setDomStorageEnabled(true);//DOM存储API是否可用，默认false。
settings.setGeolocationEnabled(true);//定位是否可用，默认为true。
settings.setAppCacheEnabled(true);//应用缓存API是否可用，默认值false, 结合setAppCachePath(String)使用。
settings.setUseWideViewPort(true); // 将图片调整到适合WebView的大小
settings.setLoadWithOverviewMode(true); // 自适应屏幕
webView.setHorizontalScrollBarEnabled(false);//去掉webview的滚动条,水平不显示
webView.setScrollbarFadingEnabled(true);
webView.setScrollBarStyle(View.SCROLLBARS_OUTSIDE_OVERLAY);
webView.setOverScrollMode(View.OVER_SCROLL_NEVER); // 取消WebView中滚动或拖动到顶部、底部时的阴影

4、重新webView方法，对进度条进行监听

private void initListener() {
        webView.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
                return super.shouldOverrideUrlLoading(view, request);
            }
            @Override
            public void onPageStarted(WebView view, String url, Bitmap favicon) {
                super.onPageStarted(view, url, favicon);
                progressBar.setVisibility(View.VISIBLE);
            }
            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
                progressBar.setVisibility(View.GONE);
            }
            @Override
            public void onReceivedError(WebView view, WebResourceRequest request, WebResourceError error) {
                super.onReceivedError(view, request, error);
                progressBar.setVisibility(View.GONE);
            }
        });
        webView.setWebChromeClient(new WebChromeClient() {
            @Override
            public void onProgressChanged(WebView view, int newProgress) {
                if (newProgress >= 100) {
                    progressBar.setVisibility(View.GONE);
                } else {
                    if (progressBar.getVisibility() == View.GONE) {
                        progressBar.setVisibility(View.VISIBLE);
                    }
                    progressBar.setProgress(newProgress);
                }
                super.onProgressChanged(view, newProgress);
            }
        });
    }

5、对外开放一些常用的属性和方法

public void loadUrl(String url) {
        mUrl = url;
        webView.loadUrl(url);
    }
    public void setProgressDrawable(@DrawableRes int id) {
        progressBar.setProgressDrawable(progressBar.getContext().getResources().getDrawable(id));
    }
    public WebView getWebView() {
        return webView;
    }
    public String getUrl() {
        return mUrl;
    }
    public boolean goBack() {
        if (webView.canGoBack()) {
            webView.goBack();
            return true;
        }
        return false;
    }
    public void onResume() {
        webView.getSettings().setJavaScriptEnabled(true);
        webView.onResume();
    }
    public void onPause() {
        webView.getSettings().setJavaScriptEnabled(false);
        webView.onPause();
    }
    public void onDestroy() {
        webView.setVisibility(GONE);
        webView.destroy();
    }

下边介绍下如何使用

<com.yuyaofang.customview.WebViewWrapper
        android:id="@+id/webViewWrapper"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
  @BindView(R.id.webViewWrapper)
    WebViewWrapper mWebViewWrapper;
    public void getData(String s) {
        mWebViewWrapper.loadUrl(s);
    }
    @Override
    public void onResume() {
        super.onResume();
        mWebViewWrapper.onResume();
    }
    @Override
    public void onPause() {
        super.onPause();
        mWebViewWrapper.onPause();
    }
    @Override
    public void onDestroy() {
        mWebViewWrapper.onDestroy();
        super.onDestroy();
    }
有网友提出视频全屏怎么设置，封装类只配置最基本的，用到了在当前页面扩展，下边演示下视频全屏配置
public class EswVideoActivity extends Activity {
    @BindView(R.id.back)
    LinearLayout mBack;
    @BindView(R.id.tv_title)
    TextView mTvTitle;
    @BindView(R.id.tv_right)
    TextView mTvRight;
    @BindView(R.id.rlt_base)
    RelativeLayout mRltBase;
    @BindView(R.id.webview)
    WebViewWrapper mWebview;
    private CustomViewCallback customViewCallback;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_esw_video);
        ButterKnife.bind(this);
        mWebview.getWebView().setWebChromeClient(new DefaultWebChromeClient()); // 播放视频
        mWebview.getWebView().loadUrl("http://www.iqiyi.com/fun/20130304/8d2c9f0e9505369e.html");
    }
    private class DefaultWebChromeClient extends WebChromeClient {
        // 进入全屏的时候
        @Override
        public void onShowCustomView(View view, CustomViewCallback callback) {
            // 赋值给callback
            customViewCallback = callback;
            // 设置webView隐藏
            mWebview.getWebView().setVisibility(View.GONE);
            // 将video放到当前视图中
            mWebview.getFragment().addView(view);
            // 横屏显示
            setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);
            // 设置全屏
            setFullScreen();
        }
        // 退出全屏的时候
        @Override
        public void onHideCustomView() {
            if (customViewCallback != null) {
                // 隐藏掉
                customViewCallback.onCustomViewHidden();
            }
            // 用户当前的首选方向
            setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
            // 退出全屏
            quitFullScreen();
            // 设置WebView可见
            mWebview.getWebView().setVisibility(View.VISIBLE);
        }
    }
    /**
     * 设置全屏
     */
    private void setFullScreen() {
        mRltBase.setVisibility(View.GONE);
        // 设置全屏的相关属性，获取当前的屏幕状态，然后设置全屏
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
                WindowManager.LayoutParams.FLAG_FULLSCREEN);
        // 全屏下的状态码：1098974464
        // 窗口下的状态吗：1098973440
    }
    /**
     * 退出全屏
     */
    private void quitFullScreen() {
        mRltBase.setVisibility(View.VISIBLE);
        // 声明当前屏幕状态的参数并获取
        final WindowManager.LayoutParams attrs = getWindow().getAttributes();
        attrs.flags &= (~WindowManager.LayoutParams.FLAG_FULLSCREEN);
        getWindow().setAttributes(attrs);
        getWindow()
                .clearFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);
    }
    // 手机返回键监听
    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        // TODO Auto-generated method stub
        switch (keyCode) {
            case KeyEvent.KEYCODE_BACK:
                // 如果是全屏状态 按返回键则变成非全屏状态，否则执行返回操作
                if (getRequestedOrientation() == ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE) {
                    setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
                    quitFullScreen();
                } else {
                    if (mWebview.getWebView().canGoBack()) {
                        mWebview.getWebView().goBack();
                    } else {
                        finish();
                    }
                }
                return true;
            default:
                break;
        }
        return false;
    }
    @Override
    public void onResume() {
        super.onResume();
        mWebview.onResume();
    }
    @Override
    public void onPause() {
        super.onPause();
        mWebview.onPause();
    }
    @Override
    public void onDestroy() {
        mWebview.onDestroy();
        super.onDestroy();
    }
}
全部代码如下
import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Bitmap;
import android.support.annotation.DrawableRes;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.webkit.WebChromeClient;
import android.webkit.WebResourceError;
import android.webkit.WebResourceRequest;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.FrameLayout;
import android.widget.ProgressBar;
import android.widget.RelativeLayout;
import com.yuyaofang.R;
/**
 * Created by lp on 2017/2/15.
 */
@SuppressLint("SetJavaScriptEnabled")
public class WebViewWrapper extends RelativeLayout {
    private WebView webView;
    private ProgressBar progressBar;
    private FrameLayout frameLayout;
    private String mUrl;
    public WebViewWrapper(Context context) {
        this(context, null);
    }
    public WebViewWrapper(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }
    public WebViewWrapper(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initView(context);
        initWebViewSettings();
        initListener();
    }
    private void initView(Context context) {
        LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        View view = inflater.inflate(R.layout.layout_webview, this);
        webView = (WebView) view.findViewById(R.id.webView);
        progressBar = (ProgressBar) view.findViewById(R.id.progressBar);
        frameLayout = (FrameLayout) view.findViewById(R.id.frameLayout);
    }
    private void initWebViewSettings() {
        WebSettings settings = webView.getSettings();
        settings.setJavaScriptEnabled(true); // 默认false，设置true后我们才能在WebView里与我们的JS代码进行交互
        settings.setJavaScriptCanOpenWindowsAutomatically(true); // 设置JS是否可以打开WebView新窗口
        settings.setSupportZoom(true); // 支持缩放
        settings.setBuiltInZoomControls(true); // 支持手势缩放
        settings.setDisplayZoomControls(false); // 不显示缩放按钮
        settings.setDatabaseEnabled(true);//数据库存储API是否可用，默认值false。
        settings.setSaveFormData(true);//WebView是否保存表单数据，默认值true。
        settings.setDomStorageEnabled(true);//DOM存储API是否可用，默认false。
        settings.setGeolocationEnabled(true);//定位是否可用，默认为true。
        settings.setAppCacheEnabled(true);//应用缓存API是否可用，默认值false, 结合setAppCachePath(String)使用。
        settings.setUseWideViewPort(true); // 将图片调整到适合WebView的大小
        settings.setLoadWithOverviewMode(true); // 自适应屏幕
        webView.setHorizontalScrollBarEnabled(false);//去掉webview的滚动条,水平不显示
        webView.setScrollbarFadingEnabled(true);
        webView.setScrollBarStyle(View.SCROLLBARS_OUTSIDE_OVERLAY);
        webView.setOverScrollMode(View.OVER_SCROLL_NEVER); // 取消WebView中滚动或拖动到顶部、底部时的阴影
    }
    private void initListener() {
        webView.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
                return super.shouldOverrideUrlLoading(view, request);
            }
            @Override
            public void onPageStarted(WebView view, String url, Bitmap favicon) {
                super.onPageStarted(view, url, favicon);
                progressBar.setVisibility(View.VISIBLE);
            }
            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
                progressBar.setVisibility(View.GONE);
            }
            @Override
            public void onReceivedError(WebView view, WebResourceRequest request, WebResourceError error) {
                super.onReceivedError(view, request, error);
                progressBar.setVisibility(View.GONE);
            }
        });
        webView.setWebChromeClient(new WebChromeClient() {
            @Override
            public void onProgressChanged(WebView view, int newProgress) {
                if (newProgress >= 100) {
                    progressBar.setVisibility(View.GONE);
                } else {
                    if (progressBar.getVisibility() == View.GONE) {
                        progressBar.setVisibility(View.VISIBLE);
                    }
                    progressBar.setProgress(newProgress);
                }
                super.onProgressChanged(view, newProgress);
            }
        });
    }
    public void loadUrl(String url) {
        mUrl = url;
        webView.loadUrl(url);
    }
    public void setProgressDrawable(@DrawableRes int id) {
        progressBar.setProgressDrawable(progressBar.getContext().getResources().getDrawable(id));
    }
    public WebView getWebView() {
        return webView;
    }
    public FrameLayout getFragment() {
        return frameLayout;
    }
    public String getUrl() {
        return mUrl;
    }
    public boolean goBack() {
        if (webView.canGoBack()) {
            webView.goBack();
            return true;
        }
        return false;
    }
    public void onResume() {
        webView.getSettings().setJavaScriptEnabled(true);
        webView.onResume();
    }
    public void onPause() {
        webView.getSettings().setJavaScriptEnabled(false);
        webView.onPause();
    }
    public void onDestroy() {
        webView.setVisibility(GONE);
        webView.destroy();
    }
}
进度条样式如下
<?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>
            <gradient
                android:endColor="@color/colorTransparent"
                android:startColor="@color/colorTransparent"/>
        </shape>
    </item>
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <gradient
                    android:endColor="@color/colorAccent"
                    android:startColor="@color/colorPrimary"/>
            </shape>
        </clip>
    </item>
</layer-list>

最后，祝大家开发顺利!

文章标签：
Android开发
数据格式
XML
关键词：
WebView封装
GameProgramer
目录
相关文章
kind-tester
|
7月前
|
小程序 Android开发
Appium微信小程序自动化之开启webview调试功能方法封装
Appium微信小程序自动化之开启webview调试功能方法封装
kind-tester
219 0
WhatsXie
|
JavaScript 前端开发 Android开发
iOS 自动适配的 WebView 封装 （下）
iOS 自动适配的 WebView 封装 （下）
WhatsXie
196 0
iOS 自动适配的 WebView 封装 （下）
WhatsXie
|
缓存 JavaScript 前端开发
iOS 自动适配的 WebView 封装 （上）
iOS 自动适配的 WebView 封装 （上）
WhatsXie
854 0
iOS 自动适配的 WebView 封装 （上）
w风雨无阻w
|
API Android开发 数据安全/隐私保护
解决android webview 加载http url 失败 net::ERR_CLEARTEXT_NOT_PERMITTED 错误
解决android webview 加载http url 失败 net::ERR_CLEARTEXT_NOT_PERMITTED 错误
w风雨无阻w
1093 0
艾尼麻麻
|
6月前
|
Web App开发 移动开发 前端开发
52. 【Android教程】网页视图：WebView
52. 【Android教程】网页视图：WebView
艾尼麻麻
103 1
保山hh
|
5月前
|
Web App开发 JavaScript 前端开发
Android端使用WebView注入一段js代码实现js调用android
Android端使用WebView注入一段js代码实现js调用android
保山hh
142 0
小陆要努力
|
Android开发 iOS开发 UED
Android webView 实现阻尼回弹效果
iOS webView默认滑动到顶部或者底部的时候，还可以继续通过手指拉扯滑动，松手后回弹；而Android webView默认是不行的，要实现跟iOS一样的效果，就需要自定义webView。
小陆要努力
604 0
Hdnw
|
7月前
|
JavaScript 前端开发 Android开发
android开发，使用kotlin学习WebView（详细）
android开发，使用kotlin学习WebView（详细）
Hdnw
547 0
xu_yanfeng
|
定位技术 Android开发
[√]Android webview的url scheme
[√]Android webview的url scheme
xu_yanfeng
549 0
w风雨无阻w
|
JavaScript 前端开发 Android开发
Android AgentWeb WebView 与js交互总结
Android AgentWeb WebView 与js交互总结
w风雨无阻w
364 0