大多数人都知道,一个APP的引导页面还是挺重要的,不过要想通过原生的Android代码做出一个非常炫酷的引导页相对还是比较复杂的,正巧html5在制作炫酷动画网页方面比较给力,我们不妨先利用html5做出手机引导页面,然后将其嵌入APP中。
首先我们分析一下,都需要做哪些工作?
1、制作html5引导页面。
2、把做好的页面放入Android工程中assets文件夹下。
3、利用WebView加载asset文件夹下的html文件。
4、在引导页最后一页的按钮上捕捉点击事件,结束引导页,进入程序。
简单的讲,整个工作就分以上四步,其中涉及到了Android中一个自带的浏览器控件–WebView,在介绍引导页之前,先来大体说一下WebView的基本用法。
一、使用WebView浏览网页
用WebView浏览网页,这是最常用也是最简单的用法,与普通的ImageView组件的用法基本相似,它也提供了大量方法来执行浏览器操作,常用的几个如下:
·void goBack():后退。
·void goForward():前进。
·void loadUrl(String url):加载url网页。
·boolean zoomIn():放大网页。
·boolean zoomOut():缩小网页。
……
下面看一个例子,通过WebView浏览百度首页,效果图如下。
首先不要忘了在AndroidMainfest.xml加入访问网络的权限:
<uses-permission android:name="android.permission.INTERNET"/>
布局文件如下:
1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
2 xmlns:tools="http://schemas.android.com/tools"
3 android:id="@+id/container"
4 android:layout_width="match_parent"
5 android:layout_height="match_parent"
6 android:orientation="vertical" >
7 <WebView
8 android:id="@+id/wv_webview"
9 android:layout_width="fill_parent"
10 android:layout_height="fill_parent" />
11 </LinearLayout>
java代码如下:
1 public class WebViewLoadWeb extends Activity {
2 WebView webView;
3 @Override
4 protected void onCreate(Bundle savedInstanceState) {
5 super.onCreate(savedInstanceState);
6 setContentView(R.layout.webview);
7 webView = (WebView)findViewById(R.id.wv_webview);
8 loadWeb();
9 }
10 public void loadWeb(){
11 String url = "https://www.baidu.com/";
12 //此方法可以在webview中打开链接而不会跳转到外部浏览器
13 webView.setWebViewClient(new WebViewClient());
14 webView.loadUrl(url);
15 }
16 @Override
17 public boolean onKeyDown(int keyCode, KeyEvent event) {
18 //重写onKeyDown,当浏览网页,WebView可以后退时执行后退操作。
19 if(keyCode == KeyEvent.KEYCODE_BACK && webView.canGoBack()){
20 webView.goBack();
21 return true;
22 }
23 return super.onKeyDown(keyCode, event);
24 }
25 }
上面代码首先加载布局文件中WebView视图,然后通过setWebViewClient()方法设置了打开新连接不会跳转到外部浏览器。最后通过loadUrl()方法加载了网址。至于该WebView如何发送请求,如何解析服务器,这些细节对我们来说是完全透明的,我们不需要关心。
另外需要一提的是,当使用WebView浏览网页时,不做处理的话,按下手机的返回键会直接结束WebView所在的Activity,通过重写onKeyDown()方法,当WebView可以返回时,让其执行返回操作。
二、使用WebView加载HTML代码。
WebView提供了一个loadData(String data, String mimeType, String encoding)方法,该方法可用于加载并显示HTML代码,不过这个方法在加载html代码时很可能会出现乱码的现象。建议用WebView的另一个方法loadDataWithBaseURL(String baseUrl, String data, String mimeType, String encoding, String historyUrl)。可以把这个方法认为是loadData()的增强版,它不会产生乱码。以下是他的几个参数说明:
·data:指定需要加载的html代码。
·mimeType:指定html代码的MIME类型,对于HTML代码可指定为text/html。
·encoding:指定html代码编码所用的字符集。
下面看一个使用WebView加载html代码的简单实例,效果图如下:
java代码如下:
1 public void loadHtmlData(){
2 String data = ""
3 + ""
4 + "欢迎您 "
5 + ""
6 + ""
7 + "我是一段html代码
"
8 + ""
9 + "";
10 webView.setWebViewClient(new WebViewClient());
11 //使用简单的loadData()方法总会导致乱码,有可能是Android API的Bug
12 //webView.loadData(data, "text/html", "GBK");
13 webView.loadDataWithBaseURL(null, data, "text/html", "utf-8", null);
14}
上面代码很简单,就是用loadDataWithBaseURL()方法加载html代码,在这里就不过多介绍了。
下面进入本篇介绍的重点,通过加载本地html文件实现炫酷引导页。
三、加载本地HTML文件实现炫酷引导页。
接下来为本篇重点,通过加载H5的方式可以很轻松做出炫酷的引导页,当然前提时你得先做出或者找到一个很好H5引导页文件。需要说明的都已经在文章开头说过了,就不废话了,先上效果图:
相信不用我解释大家就能看懂,最左边的是第一张页面,中间的是过度动画效果,最右边的是最后一张,其中在最后一张上面有个按钮,捕捉到这个按钮的跳转链接是关键。下面先来看代码(html文件在assets文件夹下):
1 public class WebViewLoadHtml extends Activity {
2 private String url;
3 WebView webView;
4 @Override
5 protected void onCreate(Bundle savedInstanceState) {
6 super.onCreate(savedInstanceState);
7 //将屏幕设置为全屏
8 getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
9 //去掉标题栏
10 requestWindowFeature(Window.FEATURE_NO_TITLE);
11 setContentView(R.layout.webview);
12 webView = (WebView)findViewById(R.id.wv_webview);
13 url = "file:///android_asset/guide/index.html";
14 loadLocalHtml(url);
15 }
16
17 @SuppressLint({ "JavascriptInterface", "SetJavaScriptEnabled" })
18 public void loadLocalHtml(String url){
19 WebSettings ws = webView.getSettings();
20 ws.setJavaScriptEnabled(true);//开启JavaScript支持
21 webView.setWebViewClient(new WebViewClient(){
22 @Override
23 public boolean shouldOverrideUrlLoading(WebView view, String url) {
24 //重写此方法,用于捕捉页面上的跳转链接
25 if ("http://start/".equals(url)){
26 //在html代码中的按钮跳转地址需要同此地址一致
27 Toast.makeText(getApplicationContext(), "开始体验", Toast.LENGTH_SHORT).show();
28 finish();
29 }
30 return true;
31 }
32 });
33 webView.loadUrl(url);
34 }
35 }
上面代码首先将程序设为全屏无标题栏,这样才更像引导页(注:截图中没有全屏是应为使用截图工具时唤出了状态栏)。需要注意的是当加载具有js的文件时需通过WebSettings的setJavaScriptEnabed()方法开启对js的支持。然后通过setWebViewClient()重写shouldOverrideUrlLoading()方法,具体用法源码注释中已给出。
其中用到html文件的按钮跳转链接的源码如下:
1 <div class="swiper-slide">
2 <span>第三页</span>
3 <span class="subtitle">这是第三页</span>
4 <a href="javascript:" onClick="window.open('http:start')" class="swiper_read_more">开启APP之旅</a>
5 </div>
这里再给大家分享一套由阿里高级架构师编写的《Android八大模块进阶资料》,帮助大家将杂乱、零散、碎片化的知识进行体系化的整理,让大家系统而高效地掌握Android开发的各个知识点。
由于文章内容比较多,篇幅有限,资料已经被整理成了PDF文档,有需要《Android八大模块进阶资料》完整文档的可以加微信 即可免费领取!
相对于我们平时看的碎片化内容,这份笔记的知识点更系统化,更容易理解和记忆,是严格按照知识体系编排的。
同时这里还搭建了一个基于chatGPT的微信群聊机器人,24小时为大家解答疑难技术问题。