为 Android WebView 加上启动页

骑猪看日落 2023-02-14 15:50 50阅读 0赞

# 为 Android WebView 加上启动页 #

最近公司准备做一个商城 APP，目前只用实现了 Web 端的原型，界面和和移动客户端差不多。leader 把这个任务交给了我，为 APP 加载 WebView 布局的主界面加上一个启动页，我到 Stack Overflow 上寻找解决办法，采用了隐藏启动页的办法。

思路如下：

1、布局文件采用充满父容器的 ImageView 和 WebView，设置 WebView 的 visibility 为 View.GONE，ImageView 的 Visibility 为 View.VISIBLE.

简单的布局代码：

![format_png][]

2、在 Activity 中获取到 ImageView 和 WebView 控件，为 WebView 设置 WebViewClient，重写里面的 onPageStarted、onPageFinished、onReceivedError 和 shouldOverrideUrlLoading 方法。在加载网页的时候显示 WebView，在加载完成的时候隐藏 ImageView，这是在首次启动的时候。在这里加上一个布尔值作为加载主页面的标识。为了避免过度太过生硬，为这个跳转添加了渐变动画。在网络无法连接的时候，加载本地的错误页面。

少废话，来看具体代码：

![format_png 1][]

3、最后处理返回键的监听事件，保证 WebView 能够返回上一页还有最后的退出应用。

判断网络连接和处理返回键的代码：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZmemhpaHVh_size_16_color_FFFFFF_t_70][]

基本上就这么多了，其实给 WebView 加上启动还是蛮简单的，大家有什么问题或建议可以给我留言...O(∩\_∩)O~

转：[https://www.jianshu.com/p/a2525a3a9e5b][https_www.jianshu.com_p_a2525a3a9e5b]

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xODIwMjEwLWZjNDQxOGFkZDJmYmM2ZTkucG5n?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xODIwMjEwLTQ0MzQxNDI5NTBlZDFiMzUucG5n?x-oss-process=image/format,png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZmemhpaHVh_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200603175502442.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZmemhpaHVh,size_16,color_FFFFFF,t_70
[https_www.jianshu.com_p_a2525a3a9e5b]: https://www.jianshu.com/p/a2525a3a9e5b