52. 【Android教程】网页视图:WebView

简介: 52. 【Android教程】网页视图:WebView

在前面的章节我们所围绕的全部都是纯客户端开发,我们叫 Native 开发。这样的好处就是体验和性能会非常好,但是在实际的使用中我们会发现存在大量的 H5 页面。这样就可以结合 Native / H5 双端的优势完成一个混合开发,而在这种开发模式中首当其冲的就是今天要学的一个特殊的控件——WebView,它可以让我们在 App 中开启一个简易的浏览器去运行前端 HTML、JS、CSS 等代码,从而在 Android 应用中展示一个 H5 页面。

1. WebView 的基本定义

关于 WebView 的介绍,官方文档只留给我们一句话:

A View that displays web pages.


这一句相信各位都能看得懂,我就不使用我的塑料英语了。这一句言简意赅,但是如果真正想有一点了解,可以看看官方文档接下来的描述:


In most cases, we recommend using a standard web browser, like Chrome, to deliver content to the user. To learn more about web browsers, read the guide on invoking a browser with an intent.

WebView objects allow you to display web content as part of your activity layout, but lack some of the features of fully-developed browsers. A WebView is useful when you need increased control over the UI and advanced configuration options that will allow you to embed web pages in a specially-designed environment for your app.


相比介绍,这个可能更形象一点,大致的意思就是说 WebView 可以让我们在 Activity 的布局中展示一个网页,但是相比一个浏览器而言,它会缺少很多特性和功能,所以只是在我们希望增强 UI,或者配置选项等场景下使用。它可以实现在 App 中内嵌一个 H5,让我们的功能和交互方式更加丰富。

相信即使你没开发过 WebView,作为用户你也一定使用过。

2. WebView 的优势

其实在之前学过的 textView 中,就有一个fromHtml()方法,他可以解析 HTML 文本并将内容渲染到 TextView 之上,对于一些的简单的富文本场景,比如渲染各种不同不同的字体、表情、不同的颜色、连接等等用 TextView 的fromHtml()就足够了。但是对于一些复杂的 H5 页面,TextView 就会显得力不从心了。在这种情况下就是 WebView 大显身手的好时机,它可以用来渲染一个非常巨大完整的 HTML 工程,并且可以解析 CSS / JS,可以将它理解为一个轻量、简易的浏览器。

3. WebView 的使用示例

使用 WebView 可以很轻松的展示一个页面,在接下来的例子中,我们将放置一个全屏的 WebView 来加载一个纯 H5 的页面。

3.1 布局文件

放置一个占满父布局的 WebView 在 ContentView 当中:

<?xml version="1.0" encoding="utf-8"?>
 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
 
    <WebView
        android:id="@+id/webview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true" />
</RelativeLayout>

这样一来,后面整个页面都会是 H5 页面,就类似一个浏览器的效果。

3.2 WebView 加载页面

其实 WebView 加载页面的核心方法就是loadUrl(String),我们可以在 onCreate() 当中只写这一句试试:

setContentView(R.layout.activity_main);
WebView webView = (WebView) findViewById(R.id.webview);
webView.loadUrl("https://www.example.com/androidlesson");

运行之后你会发现我们的 App 会去打开本地浏览器,然后在浏览器中展示代码中“Android 教程”的首页,但是我们使用 WebView 的本意当然是希望在自己的 App 内部嵌入一个页面。

WebView 在 load 一个页面之前,会去检查有没有相应的 WebViewClient,如果没有则会向系统发起请求,进而打开本地的浏览器来加载页面。所以如果不希望跳转而在 App 内部打开页面,我们还需要创建一个 WebViewClient 对象,完整的 Activity 代码如下:

 
package com.emercy.myapplication;
 
import android.app.Activity;
import android.graphics.Bitmap;
import android.os.Bundle;
import android.webkit.WebView;
import android.webkit.WebViewClient;
 
public class MainActivity extends Activity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        WebView webView = (WebView) findViewById(R.id.webview);
 
        webView.setWebViewClient(webViewClient);
 
        webView.loadUrl("https://www.example.com/androidlesson");
    }
 
    private WebViewClient webViewClient = new WebViewClient() {
        @Override
        public void onPageFinished(WebView view, String url) {
                  //页面加载完成
        }
 
        @Override
        public void onPageStarted(WebView view, String url, Bitmap favicon) {
                //页面开始加载
        }
 
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
 
            return super.shouldOverrideUrlLoading(view, url);
        }
    };
}

因为 url 是网络资源,所以一定记得要在 Manifest 中加入网络权限申请:

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

编译运行之后,效果如下:

这样就可以在 App 内部打开一个 H5 页面了。

4. 小结

.本节介绍了一个全新的控件,它也是一种 View,但是和 TextView、EditText 等 View 不同。它用来在 Native 的 App 中展示一个网页,可以充分的发挥 H5 的优势:高效、动态化和跨平台,在一些需要灵活变化、且时效性强的运营等场景会大量使用 WebView,另一个好处就是这样 Android 开发就可以解放双手,因为大部分的工作都会是前端来完成。有一点要注意的是,在用 WebView loadUrl()之前,需要设置一个 WebViewClient 对象,这样就可以顺滑的在 Native 控件和 H5 控件之间来回切换了。


相关文章
|
3天前
|
移动开发 JavaScript 应用服务中间件
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
46 5
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
|
10天前
|
移动开发 前端开发 Android开发
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
176 12
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
|
11天前
|
移动开发 Rust JavaScript
【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
227 3
【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
|
8天前
|
移动开发 Android开发
【03】建立隐私关于等相关页面和内容-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【03】建立隐私关于等相关页面和内容-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
50 0
|
5月前
|
缓存 JavaScript 前端开发
Android WebView常见问题
本文主要介绍了在Android开发中WebView的使用方法,包括加载网址、设置相关属性(如JavaScript支持、缓存模式、屏幕适配等)、监听网页加载过程以及返回上一页面的功能实现。同时针对Android P版本限制明文流量的问题(ERR_CLEARTEXT_NOT_PERMITTED),提供了在`AndroidManifest.xml`中添加`android:usesCleartextTraffic=&quot;true&quot;`的解决办法。文章还附有完整代码示例,帮助开发者快速上手并解决常见问题。希望对您的开发工作有所帮助!
315 1
|
11月前
|
缓存 前端开发 Android开发
安卓开发中的自定义视图:从零到英雄
【10月更文挑战第42天】 在安卓的世界里,自定义视图是一块画布,让开发者能够绘制出独一无二的界面体验。本文将带你走进自定义视图的大门,通过深入浅出的方式,让你从零基础到能够独立设计并实现复杂的自定义组件。我们将探索自定义视图的核心概念、实现步骤,以及如何优化你的视图以提高性能和兼容性。准备好了吗?让我们开始这段创造性的旅程吧!
166 1
|
Android开发 开发者
安卓应用开发中的自定义视图
【9月更文挑战第37天】在安卓开发的海洋中,自定义视图犹如一座座小岛,等待着勇敢的探索者去发现其独特之处。本文将带领你踏上这段旅程,从浅滩走向深海,逐步揭开自定义视图的神秘面纱。
97 3
|
7月前
|
XML JavaScript Android开发
【Android】网络技术知识总结之WebView,HttpURLConnection,OKHttp,XML的pull解析方式
本文总结了Android中几种常用的网络技术,包括WebView、HttpURLConnection、OKHttp和XML的Pull解析方式。每种技术都有其独特的特点和适用场景。理解并熟练运用这些技术,可以帮助开发者构建高效、可靠的网络应用程序。通过示例代码和详细解释,本文为开发者提供了实用的参考和指导。
206 15
|
供应链 物联网 区块链
未来触手可及:探索新兴技术的趋势与应用安卓开发中的自定义视图:从基础到进阶
【8月更文挑战第30天】随着科技的飞速发展,新兴技术如区块链、物联网和虚拟现实正在重塑我们的世界。本文将深入探讨这些技术的发展趋势和应用场景,带你领略未来的可能性。
|
11月前
|
Android开发 数据安全/隐私保护 虚拟化
安卓手机远程连接登录Windows服务器教程
安卓手机远程连接登录Windows服务器教程
2234 5