动手写Android App之webview

看过前一篇hello world类的Android开发入门文章《Hello Android!》,也许你一点成就感都没有,那么接下来我来分享我后续学习的过程,使用webview内嵌HTML、CSS和JS做一个简单的App。

先睹为快,如图,我们需要做一个随机选餐厅的应用,它有三个tab可以切换,一个选餐厅面板,一个添加餐厅面板,一个关于面板:

what2eat-screenshot

虽然很简陋,但是看起来像那么一回事,所有的界面都是用HTML和CSS实现的,JS实现标签切换和随机选餐厅功能,正如你做普通的页面一样,你要做的只是把页面放到Android的webview里。

编写App界面

按照之前文章里的步骤,我们只需添加一个webview控件,把它设置为填充父级和隐藏标题栏,也就是说除了状态栏,它已经是“全屏”的了,布局代码如下:

布局文件main.xml代码

AndroidManifest.xml的application添加属性android:theme设置为无标题栏

这样,Android控件就配置好了,接下来我们看看界面实现代码。

页面html结构:

样式编写:

Javascript代码就是一个标签切换和随机显示的功能,没什么特别就不贴出来了,你会发现界面什么的实现几乎跟平常做页面没有区别,你只需要跟制作移动版页面一样实现即可,下面我们来说说如何把它放到webview上显示出来。

使用webview加载页面

webview相当于一个浏览器,为了要在webview上显示我们制作的页面,我们需要将页面相关资源作为附件放在项目的assets文件夹下,在App初始化的时候加载到webview中展示,你可以像平常组织web文件结构一样组织你的App页面,assets相当于web App的根目录,html页面中引用的资源都相对于html页面路径。

android-assets

Java调用代码如下:

代码很简单,在App打开的时候webview加载“file:///android_asset/”路径下的app.html并取消默认长按选择文本的事件(“file:///android_asset/”路径是一个虚拟路径,用来访问Android项目中的assets目录),就这样App就可以运行起来了,看到的效果就如一开始截图的那样。

这个应用中几个关键点:
1,对于web开发人员,你只需设置应该webview控件,剩下所有功能都可以用你已有的web制作能力实现一个应用;
2,你可以使用CSS3的自定义字体来实现小图标,制作按钮而无需使用图片;
3,取消webview默认事件而不至于出现不需要的效果;
4,如果你需要快速响应你的点击效果,在javascript里绑定touch事件而不是click,因为click会有大概300ms延迟;
5,你可以通过webview的addJavascriptInterface添加js接口调用java里的函数从而实现用js控制Android系统;
6,webview.loadUrl也可以加载线上页面,可以在java代码中使用webview.loadUrl(‘javascript:alert(1)’)调用页面上的js函数,缺点就是如果当前是打开键盘的状态,执行后虚拟键盘会“关闭”;

通过简单的介绍和实践,相信你也可以通过web开发知识做出自己的App来,比如最近很火的打飞机,你可以用canvas画出来的说,而不需要用phonegap,不需要太多java代码知识,但是,懂得编写原生应用可以实现更酷的效果Y(^_^)Y,比如你也可以做个摇一摇找吃的等等(除了吃暂时没有别的想法了啊→_→)。

更多参考

WebView:https://developer.android.com/reference/android/webkit/WebView.html

手机摇一摇类:https://gist.github.com/hiwanz/6061986

Creating Fast Buttons for Mobile Web Applications:
https://developers.google.com/mobile/articles/fast_buttons?hl=zh-CN

Tags:

如需转载,请注明出处:https://i.wanz.im/2013/08/12/write-your-first-android-app-with-webview/

Comments

  1. By 小A

    回复

  2. By 阿吉

    回复

    • By 丸子

      回复

  3. By 大发

    回复

发表评论

电子邮件地址不会被公开。 必填项已用*标注

Time limit is exhausted. Please reload CAPTCHA.

This site uses Akismet to reduce spam. Learn how your comment data is processed.