简介
Material Design 是 Google 推出的一种设计语言，旨在提供一种简单、直观、流畅的用户体验，无论是在移动设备还是在桌面浏览器上，都能获得良好的显示效果。其中 WebView 是 Android 平台上的一项关键技术，用于展示网页、HTML5 应用、Hybrid 应用等。
本文将介绍如何在 Android 天下制作一个基于 Material Design 的 WebView，希望能够帮助初学者入门 Material Design，了解 WebView 的使用方式，以及如何打造一个精美的 WebView 应用。
WebView 的基本用法
在 Android 平台上使用 WebView，需要通过布局文件定义 WebView 控件的位置和大小，并在代码中创建对应的 WebView 对象，将其与布局文件的控件关联起来，最后设置 WebView 的属性（加载 URL、响应按键事件、监听页面加载进度等）。下面是一个简单的示例代码：
-- -------------------- ---- -------
------ ----- ------------ ------- ----------------- -
------- ------- --------
---------
--------- ---- --------------- ------------------- -
-----------------------------------
---------------------------------------
------- - ---------------------------
------------------------------------------
---------------------------- --------------- -
---------
------ ------- -------------------------------- ----- ------ ---- -
------------------
------ -----
-
---
-
-在这个例子中，我们首先在布局文件 activity_main.xml 中定义了一个 WebView 控件，并设置其大小和位置等属性。接着在代码中通过 findViewById() 方法找到这个控件，并创建 webView 对象，将其与控件关联起来。最后调用 loadUrl() 方法加载指定的 URL，设置 WebViewClient 实例，监听 URL 加载事件。这样就完成了 WebView 的基本配置。
Material Design 风格的 WebView
在 Material Design 的设计风格中，有许多与 WebView 相关的设计元素，如显示加载进度条、显示返回按钮、显示网页标题、支持滚动等。下面我们来一个一个介绍如何在 WebView 中实现这些功能。
显示加载进度条
在 Material Design 中，常常会以进度条的形式展示页面加载进度，通过 ProgressBar 控件来实现。要在 WebView 中显示进度条，我们可以在布局文件中定义一个 ProgressBar 控件，并在代码中实现一个 WebViewChromeClient 对象，重写 onProgressChanged() 方法，监控页面加载进度，随着进度的变化，动态改变 ProgressBar 的值，使其显示出加载进度的效果。示例代码如下：
-- -------------------- ---- -------
---------------
-----------------------------------
-------------------------------------
--------
-------------------------
-----------------------------------
------------------------------------ --
------------
------------------------------
----------------------------------------------------
-----------------------------------
---------------------------
------------------------------------
------------------------------------------
-----------------------------------------------------------
------------------------------ --
------------------- -------------------- ---- -------
------ ----- ------------ ------- ----------------- -
------- ------- --------
------- ----------- ------------
---------
--------- ---- --------------- ------------------- -
-----------------------------------
---------------------------------------
------- - ---------------------------
----------- - --------------------------------
------------------------------------------
------------------------------ ----------------- -
---------
------ ---- ------------------------- ----- --- ------------ -
-------------------------------------
------------------------------------- -- --- - --------- - --------------
-
---
-
-在这个例子中，我们首先在布局文件中定义了一个 RelativeLayout 布局，包含了一个 WebView 和一个 ProgressBar 控件。WebView 与 ProgressBar 控件并不是平齐排列的，而是嵌套在 RelativeLayout 中，使其在不同位置显示。ProgressBar 的颜色使用了 Material Design 中的官方颜色，视觉效果更加优美。
在代码中，我们通过 findViewById() 方法找到了 WebView 和 ProgressBar，将其关联起来，并使用 loadUrl() 方法加载了指定的 URL。接着实例化了一个 WebChromeClient，并重写了 onProgressChanged() 方法，在页面加载时实时更新 ProgressBar 的进度值，并根据进度值的百分比动态改变 ProgressBar 的可见性，达到 Material Design 的进度条效果。
显示返回按钮
在 Material Design 中，常常以一个带有箭头的按钮来表示返回操作，这也被称为 Up 操作。WebView 也可以支持这样的操作，通过在布局文件中定义一个 ImageButton 控件，并与 WebView 管理 Activity 的 ActionBar 关联起来，即可实现返回按钮的效果。示例代码如下：
-- -------------------- ---- -------
---------------
-----------------------------------
-------------------------------------
--------
-------------------------
-----------------------------------
------------------------------------ --
------------
------------------------------------------------
-----------------------------------
------------------------------------
-----------------------------------------------
---------------------------
--------------------------------------
------------------------------------
-----------------------------------------
----------------------------- --
------------------- -------------------- ---- -------
------ ----- ------------ ------- ----------------- -
------- ------- --------
------- ----------- -----------
---------
--------- ---- --------------- ------------------- -
-----------------------------------
---------------------------------------
------- - ---------------------------
---------- - -------------------------------
------------------------------------------
---------------------------- --------------- -
---------
------ ------- -------------------------------- ----- ------ ---- -
------------------
------ -----
-
---
--------------------------------- ---------------------- -
---------
------ ---- ------------ -- -
----------------
-
---
-
---------
------ ---- --------------- -
-- --------------------- -
-----------------
- ---- -
----------------------
-
-
-在这个例子中，我们首先在布局文件中定义了一个 ImageButton 控件，使用了 Material Design 的箭头图标，并设置了相应的外观属性，并将其与 WebView 页面管理的 ActionBar 关联起来，使其能够在 ActionBar 的左上角显示。接着在代码中，我们通过 findViewById() 方法找到了 WebView 和 ImageButton，将其关联起来，并使用 loadUrl() 方法加载了指定的 URL。WebView 使用了 WebViewClient 对象来处理加载 URL 的操作，而 ImageButton 使用了一个 OnClickListener 来处理单击事件，使用 onBackPressed() 方法来处理返回操作。
显示网页标题
在 Material Design 中，常常将网页标题作为页面的重要元素，通常出现在 ActionBar 或 Toolbar 中，用于告知用户当前页面的信息。WebView 也可以支持这样的操作，通过在布局文件中定义一个 Toolbar 控件，并将其与 WebView 管理 Activity 的 Toolbar 关联起来，即可实现网页标题的效果。示例代码如下：
-- -------------------- ---- -------
------------------------------------------------
-----------------------------------
-------------------------------------
----------------------------------
-------------------------
-----------------------------------
-------------------------------------------
----------------------------------------
-----------------------
------------------------------------------- --
-------------------------------------------
-----------------------------------
------------------------------------
--------------------------------
----------------------------------------------
----------------------------------
--------------------------------
-----------------------------------
-------------------------------------------
---------------------------------------
-------------------------------------------
----------------------------- --
---------------------------------------------
-------------------------------------------
-----------------------------------
------------------------------------
---------------------------
-------------------------------------------------------------
---------------
-----------------------------------
-------------------------------------
--------
-------------------------
-----------------------------------
------------------------------------ --
-----------------
---------------------------------------------
---------------------------------------------------- -------------------- ---- -------
------ ----- ------------ ------- ----------------- -
------- ------- --------
------- ------- --------
---------
--------- ---- --------------- ------------------- -
-----------------------------------
---------------------------------------
------- - ----------------------------------
-----------------------------
------------------------------------------------------
------- - ---------------------------
------------------------------------------
------------------------------ ----------------- -
---------
------ ---- ----------------------- ----- ------ ------ -
--------------------------------------
-
---
-
-在这个例子中，我们首先在布局文件中定义了一个 CoordinatorLayout 布局，包含了一个 Toolbar、一个 AppBarLayout 和一个 NestedScrollView。其中 Toolbar 作为一个独立的控件，放在 CoordinatorLayout 布局的最上层，用于显示页面标题和返回按钮；AppBarLayout 作为一个可滚动的布局，与 Toolbar 关联起来，用于滚动时隐藏或显示 Toolbar；NestedScrollView 则是一个可滚动的布局，用于承载 WebView 控件，使其能够滚动。
在代码中，我们首先使用 setSupportActionBar() 方法设置了 Toolbar，使其成为 Activity 的 ActionBar，接着使用 getSupportActionBar() 方法获取 ActionBar 对象，使其能够显示返回按钮和网页标题。WebView 使用了 WebChromeClient 对象来处理网页标题的展示，每当 WebView 加载新的页面时，通过 onReceivedTitle() 方法实时更新 ActionBar 的标题，使其与当前页面的网页标题保持一致。
支持滚动
在 Material Design 中，通常以滑动的方式操作页面，可滚动的视图是一个很重要的元素。WebView 也可以支持这样的操作，通过在布局文件中定义一个 NestedScrollView 控件，并将 WebView 放置于该控件内部，即可实现滚动效果。示例代码如下：
-- -------------------- ---- -------
------------------------------------------------
-----------------------------------
-------------------------------------
----------------------------------
-------------------------
-----------------------------------
-------------------------------------------
----------------------------------------
-----------------------
------------------------------------------- --
-------------------------------------------
-----------------------------------
------------------------------------
--------------------------------
----------------------------------------------
----------------------------------
--------------------------------
-----------------------------------
-------------------------------------------
---------------------------------------
-------------------------------------------
----------------------------- --
---------------------------------------------
-------------------------------------------
-----------------------------------
------------------------------------
---------------------------
-------------------------------------------------------------
---------------
-----------------------------------
-------------------------------------
--------
-------------------------
-----------------------------------
------------------------------------ --
-----------------
---------------------------------------------
---------------------------------------------------- -------------------- ---- -------
------ ----- ------------ ------- ----------------- -
------- ------- --------
------- ---------------- -----------------
------- ------- --------
---------
--------- ---- --------------- ------------------- -
-----------------------------------
---------------------------------------
------- - ----------------------------------
-----------------------------
------------------------------------------------------
---------------- - -------------------------------
------- - ---------------------------
------------------------------------------
------------------------------ -------------------
---------------------------- --------------- -
---------
------ ------- -------------------------------- ----- ------ ---- -
------------------
------ -----
-
---------
------ ---- ---------------------- ----- ------ ---- -
-------------------------- -----
---------------------------- ---
-
---
-
-在这个例子中，我们在布局文件中定义了一个 NestedScrollView 控件，使用了 Material Design 的可滚动布局，使其能够滚动。在 RelativeLayout 布局中添加了一个 WebView 控件，设置其高度为 wrap_content，以便在页面内容变化时自动适应高度。在代码中，我们同样使用 setSupportActionBar() 方法将 Toolbar 设置为 Activity 的 ActionBar，并使用 findViewById() 方法获取了 ScrollView 和 WebView 的引用，将 WebView 加载到 NestedScrollView 内部，使其能够滚动。
在 WebView 的设置中，我们使用了 WebChromeClient 对象，其中包含了一些默认的 WebView 行为。而在 WebViewClient 对象中，我们实现了一个 onPageFinished() 的回调方法，在网页加载完成后，将 ScrollView 的滚动位置设为 0，使其回到顶部位置。
总结
本文介绍了如何在 Android 平台上使用 Material Design 的风格制作一个 WebView，涉及了多个方面的实现，如显示加载进度条、显示返回按钮、显示网页标题、支持滚动等。通过这个例子，读者可以了解到 Material Design 的基本设计原则，以及如何在 Android 平台上使用 WebView 来展示网页内容。
未来，随着移动设备的普及和各种 HTML5 应用的发展，WebView 也将成为 Android 平台上的一个重要技术。希望读者能够通过本文的学习和实践，对 Android 平台上的 Web 技术有更深入的了解。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645e318b968c7c53b0095efb