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 控件之间来回切换了。


相关文章
|
1月前
|
Android开发 开发者
安卓应用开发中的自定义视图
【9月更文挑战第37天】在安卓开发的海洋中,自定义视图犹如一座座小岛,等待着勇敢的探索者去发现其独特之处。本文将带领你踏上这段旅程,从浅滩走向深海,逐步揭开自定义视图的神秘面纱。
35 3
|
3月前
|
供应链 物联网 区块链
未来触手可及:探索新兴技术的趋势与应用安卓开发中的自定义视图:从基础到进阶
【8月更文挑战第30天】随着科技的飞速发展,新兴技术如区块链、物联网和虚拟现实正在重塑我们的世界。本文将深入探讨这些技术的发展趋势和应用场景,带你领略未来的可能性。
|
3月前
|
测试技术 Android开发 Python
探索软件测试的艺术:从基础到高级安卓应用开发中的自定义视图
【8月更文挑战第29天】在软件开发的世界中,测试是不可或缺的一环。它如同艺术一般,需要精细的技巧和深厚的知识。本文旨在通过浅显易懂的语言,引领读者从软件测试的基础出发,逐步深入到更复杂的测试策略和工具的使用,最终达到能够独立进行高效测试的水平。我们将一起探索如何通过不同的测试方法来确保软件的质量和性能,就像艺术家通过不同的色彩和笔触来完成一幅画作一样。
|
5天前
|
搜索推荐 前端开发 Android开发
安卓应用开发中的自定义视图实现
【10月更文挑战第30天】在安卓开发的海洋中,自定义视图是那抹不可或缺的亮色,它为应用界面的个性化和交互体验的提升提供了无限可能。本文将深入探讨如何在安卓平台创建自定义视图,并展示如何通过代码实现这一过程。我们将从基础出发,逐步引导你理解自定义视图的核心概念,然后通过一个实际的代码示例,详细讲解如何将理论应用于实践,最终实现一个美观且具有良好用户体验的自定义控件。无论你是想提高自己的开发技能,还是仅仅出于对安卓开发的兴趣,这篇文章都将为你提供价值。
|
14天前
|
程序员 开发工具 Android开发
Android|WebView 禁止长按,限制非白名单域名的跳转层级
如何限制 WebView 仅域名白名单网址能随意跳转,并禁用长按选择文字。
27 2
|
2月前
|
Android开发 开发者
安卓开发中的自定义视图:从入门到精通
【9月更文挑战第19天】在安卓开发的广阔天地中,自定义视图是一块充满魔力的土地。它不仅仅是代码的堆砌,更是艺术与科技的完美结合。通过掌握自定义视图,开发者能够打破常规,创造出独一无二的用户界面。本文将带你走进自定义视图的世界,从基础概念到实战应用,一步步展示如何用代码绘出心中的蓝图。无论你是初学者还是有经验的开发者,这篇文章都将为你打开一扇通往创意和效率的大门。让我们一起探索自定义视图的秘密,将你的应用打造成一件艺术品吧!
58 10
|
1月前
|
安全 网络安全 Android开发
深度解析:利用Universal Links与Android App Links实现无缝网页至应用跳转的安全考量
【10月更文挑战第2天】在移动互联网时代,用户经常需要从网页无缝跳转到移动应用中。这种跳转不仅需要提供流畅的用户体验,还要确保安全性。本文将深入探讨如何利用Universal Links(仅限于iOS)和Android App Links技术实现这一目标,并分析其安全性。
181 0
|
2月前
|
XML 编解码 Android开发
安卓开发中的自定义视图控件
【9月更文挑战第14天】在安卓开发中,自定义视图控件是一种高级技巧,它可以让开发者根据项目需求创建出独特的用户界面元素。本文将通过一个简单示例,引导你了解如何在安卓项目中实现自定义视图控件,包括创建自定义控件类、处理绘制逻辑以及响应用户交互。无论你是初学者还是有经验的开发者,这篇文章都会为你提供有价值的见解和技巧。
43 3
|
2月前
|
前端开发 Android开发 开发者
安卓应用开发中的自定义视图基础
【9月更文挑战第13天】在安卓开发的广阔天地中,自定义视图是一块神奇的画布,它允许开发者将想象力转化为用户界面的创新元素。本文将带你一探究竟,了解如何从零开始构建自定义视图,包括绘图基础、触摸事件处理,以及性能优化的实用技巧。无论你是想提升应用的视觉吸引力,还是追求更流畅的交互体验,这里都有你需要的金钥匙。
|
2月前
|
前端开发 搜索推荐 Android开发
探索安卓开发中的自定义视图##
【9月更文挑战第6天】 在安卓应用开发的世界里,自定义视图如同绘画艺术中的色彩,它们为界面设计增添了无限可能。通过掌握自定义视图的绘制技巧,开发者能够创造出既符合品牌形象又提升用户体验的独特界面元素。本文将深入浅出地介绍如何从零开始构建一个自定义视图,包括基础框架搭建、关键绘图方法实现、事件处理机制以及性能优化策略。准备好让你的安卓应用与众不同了吗?让我们开始吧! ##