webView的简单实现-EW帮帮网

文章目录

1、使用xml实现webView
2、在compose中加载WebView

1、使用xml实现webView

1.1 xml文件

创建一个xml文件，并命名为web_view.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
<WebView
    android:id="@+id/wev_view_id"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    />
</LinearLayout>

1.2 在module的build.gradle中添加binding的依赖

添加依赖，用于使用viewbind

android {
...
 viewBinding {
        enable = true
    }
 buildFeatures {
        
        viewBinding = true
    }
...
}
dependencies {
...
    implementation("com.github.DylanCaiCoding.ViewBindingKTX:viewbinding-ktx:2.1.0")
   
...
}

1.3 在settings.gradle中添加

如果没有添加的话，上一个步骤中添加的依赖不起作用加粗样式

dependencyResolutionManagement {
...
repositories {
...
 maven { url = uri("https://jitpack.io") }
...
}
}

1.4 使用webView加载url

绑定xml页面中的WebView，并对其进行设置，加载需要的xml文件

 val binding:WebViewBinding  by binding()
 
    private fun loadWebViewUrl(loadUrl:String) {

        val webView = binding.webViewId

        webView.reload()
        // 禁用缓存
        webView.getSettings().cacheMode = WebSettings.LOAD_NO_CACHE; // 不使用缓存，强制重新加载
        // 清除缓存
        webView.clearCache(true)
        webView.clearHistory()
        webView.isVerticalScrollBarEnabled = true;  // 启用垂直滚动条
        webView.isHorizontalScrollBarEnabled = true;  // 启用水平滚动条
        webView.setOverScrollMode(WebView.OVER_SCROLL_IF_CONTENT_SCROLLS);
        webView.setOverScrollMode(WebView.OVER_SCROLL_IF_CONTENT_SCROLLS);  // 启用滚动
        webView.setScrollbarFadingEnabled(false);  // 启用滚动条隐藏
        webView.requestFocus();
        webView.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);

        val webSettings: WebSettings = webView.settings
        //设置为可调用js方法
        webSettings.javaScriptEnabled = true
        webSettings.layoutAlgorithm = WebSettings.LayoutAlgorithm.NARROW_COLUMNS
        webSettings.useWideViewPort = true
        webSettings.loadWithOverviewMode = true
        webSettings.setSupportZoom(true);  // 启用缩放

        webSettings.domStorageEnabled = true


        webView.webViewClient = object : WebViewClient() {
            override fun onPageFinished(view: WebView, url: String) {
                super.onPageFinished(view, url)
                // 页面加载完成后可以执行的代码

                Log.d("lucky", "onPageFinished: 页面加载完成")
            }

            override fun onReceivedError(
                view: WebView,
                errorCode: Int,
                description: String,
                failingUrl: String
            ) {
                Log.d("lucky", "onReceivedError: $description 加载失败 $failingUrl")
                // 处理错误
            }
        }
        webView.loadUrl(
            loadUrl
        )
    }

2、在compose中加载WebView

使用Compose中实现WebView发现对于一些网页出现页面和浏览器中页面不一致或者显示不完整的情况，先使用第三方库的形式进行实现

2.1 使用第三方库的形式进行加载

2.1.1 添加依赖

添加accompanist的依赖，但是在0.32.0版本之后，WebView的实现被废弃了，在最新的版本中，其api也会被移除，需要使用之前的版本才可以用

implementation("com.google.accompanist:accompanist-webview:0.32.0")

2.1.2 实际使用

使用WebView，下面举例一个最简单的用法，直接展示一个网页

@Composable
fun WebViewSample(url: String) {
    val state = rememberWebViewState(url)

    WebView(
        state = state,
        modifier = Modifier.fillMaxSize(),
        onCreated = { webView ->
            webView.settings.javaScriptEnabled = true
        }
    )
}

2.2 使用AndroidView的形式实现WebView

2.2.1 自定义代码

在compose中，没有一个直接的控件等同于xml中的WebView，只能通过AndroidView中设置WebView的形式进行实现


@SuppressLint("SetJavaScriptEnabled")
@Composable
fun ComposableWebView(
    url: String,
    modifier: Modifier = Modifier,
    onWebViewReady: (WebView) -> Unit = {}
) {
    val context = LocalContext.current

    Box(modifier) {

        val webView = remember { WebView(context) }
        webView.settings.javaScriptEnabled = true
        webView.settings.cacheMode = LOAD_DEFAULT

        webView.reload()
        // 禁用缓存
        webView.getSettings().cacheMode = WebSettings.LOAD_NO_CACHE; // 不使用缓存，强制重新加载
        // 清除缓存
        webView.clearCache(true)
        webView.clearHistory()
        webView.isVerticalScrollBarEnabled = true;  // 启用垂直滚动条
        webView.isHorizontalScrollBarEnabled = true;  // 启用水平滚动条
        webView.setOverScrollMode(WebView.OVER_SCROLL_IF_CONTENT_SCROLLS);
        webView.setOverScrollMode(WebView.OVER_SCROLL_IF_CONTENT_SCROLLS);  // 启用滚动
        webView.setScrollbarFadingEnabled(false);  // 启用滚动条隐藏
        webView.requestFocus();
        webView.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);

        val webSettings: WebSettings = webView.settings
        //设置为可调用js方法
        webSettings.javaScriptEnabled = true
        webSettings.layoutAlgorithm = WebSettings.LayoutAlgorithm.NARROW_COLUMNS
        webSettings.useWideViewPort = true
        webSettings.loadWithOverviewMode = true
        webSettings.setSupportZoom(true);  // 启用缩放
        webSettings.domStorageEnabled = true

        webView.webViewClient = object : WebViewClient() {
            override fun onPageFinished(view: WebView?, url: String?) {
                super.onPageFinished(view, url)

                // WebView 加载完成后的回调
                onWebViewReady(webView)
            }
        }

        // 加载URL
        webView.loadUrl(url)
        // 将 WebView 嵌入到 Compose 中
        AndroidView(
            {
                webView.layoutParams = FrameLayout.LayoutParams(
                    ViewGroup.LayoutParams.MATCH_PARENT,
                    ViewGroup.LayoutParams.MATCH_PARENT
                )
                webView
            })
    }

}

2.2.2 关键点

 webView.layoutParams = FrameLayout.LayoutParams(
                    ViewGroup.LayoutParams.MATCH_PARENT,
                    ViewGroup.LayoutParams.MATCH_PARENT
                )

在设置WebView的时候，需要设置它的layoutParams 参数，不然会出现网页显示不全或者无法查看网页的情况，特别针对自定义的网页来说。我遇到了一种情况，就是使用baidu.com的网页是正常的，但是嵌套自己公司开发的网页就出现了显示不全的问题，单纯使用modifier控制网页的显示范围还不够，需要设置layoutParams 。

webView的简单实现