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"><WebViewandroid: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 {@Overrideprotected 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() {@Overridepublic void onPageFinished(WebView view, String url) {//页面加载完成}@Overridepublic void onPageStarted(WebView view, String url, Bitmap favicon) {//页面开始加载}@Overridepublic 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 控件之间来回切换了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/8926.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

windows 环境下安装《车辆动态监控系统》支持JT808、JT1078、苏标主动安全设备接入

《车辆动态监控系统》下载安装部署包 开放端口 80/443/8800&#xff0c;web后台端口&#xff0c;nginx代理服务&#xff0c;nginx默认为8800端口8808&#xff0c;JT808专用端口6802&#xff0c;视频播放推流端口6891-6898&#xff0c;FTP端口6821&#xff0c;苏标主动安全附件…

msvcp110.dll是什么东西?关于msvcp110.dll丢失修复的问题分享

msvcp110.dll是什么东西&#xff1f;如果有人问出这个问题&#xff0c;那么百分之一百就是他遇到了丢失msvcp110.dll文件的问题了&#xff0c;不然别人是不可能问出这个问题的&#xff01;这个文件名字一般只有在你的电脑系统出现问题的时候&#xff0c;它才会弹出提示。今天来…

SpringCloud 集成consul,消费者报I/O error on GET request for...

创建消费者微服务&#xff0c;去调用生产者微服务的请求过程中&#xff0c;出现以下错误&#xff1a; 报错原因 因为在使用SpringCloudAlibaba中的Nacos框架时&#xff0c;自动整合了SpringCloud中的Ribbon框架中的负载均衡&#xff0c;因为微服务提供者有两个&#xff0c;在消…

OpenGL入门第二步:颜色、纹理设置(解析)

OpenGL入门第一步:创建窗口、重写虚函数-CSDN博客 1、设置颜色 添加QColor变量,如果需要颜色随时间变化,那就再添加一个定时器QElapsedTimer以及重写虚函数timerEvent。 initializeGL()函数设置片段着色器中颜色变量 如果需要设置时间别忘了开启计时器 timerEvent函数里写…

【Java orm 框架比较】十 新增hammer_sql_db 框架对比

迁移到&#xff08;https://gitee.com/wujiawei1207537021/spring-orm-integration-compare&#xff09; orm框架使用性能比较 比较mybatis-plus、lazy、sqltoy、mybatis-flex、easy-query、mybatis-mp、jpa、dbvisitor、beetlsql、dream_orm、wood、hammer_sql_db 操作数据 …

利用大语言模型(KIMI)生成OPC UA 信息模型

在大语言模型没有出现之前&#xff0c;人们更倾向使用图形化工具或者基于窗口的软件来构建信息模型&#xff0c;图形化工具能够直观地表达信息模型中各元素之间的相互关系。但是图形化工具也有缺点&#xff0c;当描述一个复杂的信息模型时&#xff0c;图形会变得非常复杂和庞大…

Agent AI智能体的未来:无限可能

文章目录 终结者智能体正反影响自我意识开放心态 终结者 还记得那场人类与天网之间的史诗般的战斗吗&#xff1f;-- 《终结者》系列电影。 《终结者》系列电影是一部标志性的科幻动作系列&#xff0c;以紧张刺激的情节、令人难忘的角色和开创性的视觉效果而闻名。 电影探讨了…

丰田生产方式的四大误解:揭示真相,打造高效生产新篇章

丰田生产方式作为世界知名的制造业管理模式&#xff0c;一直备受关注。然而&#xff0c;在其广泛传播和实践过程中&#xff0c;也产生了不少误解。本文将揭示丰田生产方式的四大代表性误解&#xff0c;带大家领略其真正的魅力。 误解一&#xff1a;丰田生产方式只适用于汽车行业…

Python版Spark core详解

文章目录 第一章 SparkCore1.1. Spark环境部署1.1.1. Spark介绍1.1.1.1. 什么是Spark1.1.1.2. Spark与MapReduce的对比框架对比运行流程对比 1.1.1.3. Spark的组件1.1.1.4. Spark的特点 1.1.2. Spark的安装部署1.1.2.1. Spark安装包下载1.1.2.2. Spark部署模式介绍1.1.2.3. Loc…

怎么组织和筹备一场大型活动?

从业10年&#xff0c;组织和筹备过的活动大大小小几十次&#xff0c;其中包括公司的各种年中/终会议、客户答谢会、论坛沙龙、双11和618大型直播爆破活动等等。 虽然每次活动或者会议的主题有所不懂&#xff0c;但是只要掌握了方法&#xff0c;就能够非常高效且全面地做好准备…

3d中如何对模型粉碎处理?---模大狮模型网

在3D建模和动画设计中&#xff0c;模型粉碎处理是一种引人注目的效果&#xff0c;可以为场景增添动态和震撼的视觉效果。无论是用于电影特效、游戏设计还是虚拟现实项目&#xff0c;都可以通过模型粉碎处理来创造出引人入胜的场景。本文将介绍如何在3D中轻松实现模型粉碎处理&a…

NDK c++ so库崩溃定位

搜崩溃 Fatal 看到 F libc : Fatal signal 11 (SIGSEGV), code 2 (SEGV_ACCERR), fault addr 0x70dd700460 in tid 5955 (Thread-177), pid 2413 但是没有具体的堆栈 搜下message 关键字 backtrace 或者 switch to crash 或者tag DEBUG 过滤能看到 再没有就从墓碑文件 …

软件工程复习之软件定义时期

1.什么是软件&#xff1f; 答&#xff1a;软件是程序&#xff0c;数据和文档的集合。 程序是完成指定功能的计算机可执行的指令序列。 数据是程序进行信息处理的数据结构。 文档是开发&#xff0c;使用&#xff0c;维护的图文资料。 2.软件有何特点&#xff1f; 答&#…

MybatisPlus 构造器wrapper的使用与原理

系列文章目录 MyBatis缓存原理 Mybatis plugin 的使用及原理 MyBatisSpringboot 启动到SQL执行全流程 数据库操作不再困难&#xff0c;MyBatis动态Sql标签解析 Mybatis的CachingExecutor与二级缓存 使用MybatisPlus还是MyBaits &#xff0c;开发者应该如何选择&#xff1f; My…

第二证券午评:沪指涨近1%,地产、半导体等板块拉升,锂电池概念活跃

9日早盘&#xff0c;两市股指全线走高&#xff0c;沪指涨近1%&#xff0c;创业板指大涨近2%&#xff1b;北向资金大举出场扫货&#xff0c;半日净买入超100亿元。 到午间收盘&#xff0c;沪指涨0.91%报3156.96点&#xff0c;深成指涨1.63%&#xff0c;创业板指涨1.85%&#xf…

MySQL变量的浮点数问题处理

新建连接&#xff0c;自带world数据库&#xff0c;里面自带city表格。 #MySQL变量的浮点数问题处理set dx3.14,dy3.25; select dxdy;# MySQL浮点数计算显示异常&#xff0c;会有很多00000的提示set resultdxdy;select result;结果&#xff1a;

c 双向链表

图片 #include <stdio.h> #include <stdlib.h> #include <string.h>int main(void){ struct film{char name[20];int id;struct film *pre; //前向指针struct film *next; //后向指针 };struct film *headNULL;struct film *ls,*lspre,*work;in…

springboot045新闻推荐系统

推荐使用&#xff1a;谷歌浏览器 后台地址 http://localhost:8080/springboot49j18/admin/dist/index.html 管理员 abo 密码 abo 前台地址&#xff1a;http://localhost:8080/springboot49j18/front/index.html 在src\main\resources\application.yml中编辑 …

TC8002D(3W音频功放IC)是一颗带关断模式的音频功放IC

一、概述 TC8002D是一颗带关断模式的音频功放IC。在5V输入电压下工作时&#xff0c;负载(3Ω)上的平均功率为3W&#xff0c;且失真度不超过10%。而对于手提设备而言&#xff0c;当VDD作用于关断端时&#xff0c;TC8002D将会进入关断模式&#xff0c;此时的功耗极低&…

Leetcode—2079. 给植物浇水【中等】

2024每日刷题&#xff08;130&#xff09; Leetcode—2079. 给植物浇水 实现代码 class Solution { public:int wateringPlants(vector<int>& plants, int capacity) {int ans 0;int step 0;int cap capacity;bool flag false;for(int i 0; i < plants.siz…