相信大家学习时,光看Api Demo,难免会觉得枯燥。自己开发小程序,锻炼下固然不错,但开发完后,还是没底。

和学习其他语言一样,看别人的代码,也就是开源代码,是学习编程的重要手段。

像Zicro-Browser这样,功能简单明了,有足够UI技术成分,又不需要负责的调试环境,实在是很好的阅读对象。

后天去腾讯面试,如果失败,可能就真要告别手机无线平台了,回归C++/C#。所以,真不希望这是我最后一个关于Android的随笔,这也是我仓促写本文的原因,留个纪念。

1 项目源代码

Zicro 介绍: 

  http://code.google.com/p/zirco-browser/

图方便的话,请再搜源代码或者在如下网址中直接下载源代码(缘分吧,我用的就是他的源代码)。

     http://www.apkbus.com/android-44306-1-1.html

2.1 页面布局:主界面

  与桌面浏览器很大不同的是,Zicro浏览器,用的依然是Android自带的webkit,简单想下,是合理的。Android的插件开发环境,需要你尽量配合操作系统,既然你用的都是系统资源,又何必自己开发内核。况且,你要知道,自己做的浏览器是给客户用的,95%取决于用户体验,所以你要关注UI设计,基于UI设计开发。所以,你看到的这段标题就是普普通通的“页面布局”,架构以及被Android定好了,没什么可讲的。如果研究浏览器是如何工作的,请google 'webkit'。

  

主界面分两层,蓝框之外的UI,定于在layout/main.xml中,其元素可以很容易找到。

蓝框内部分,可不是AndroidUI框架内的,它由html元素组成,相关资源都在res/raw文件夹下。程序拿里面的内容时,可以直接按目录查找相关资源,浏览下html内容就会知道它怎么工作。raw/start.html是个重要线索,有助于我们了解这个主界面是如何显示的。

请注意,raw/start.html的id是raw.start,写成id后没有缀名(好像'.'对linux目录系统很重要)。此外,values/strings.xml的id命名规则也是有变化的,如本来name 为Main.Menu,生成的id会变为Main_Menu,如果试图编辑字符串名称时带下划线,会报错误,而且没有有价值的提示。

好了,一边调试浏览,你可以轻松查找UI元素来定位源代码了!

2.2 页面布局:Preference设置

点击右下角的扇形按钮,

上下的toolbar会显示出来,然后点击程序上面toolbar第1个图标,出现设置选择板:相关程序大部分在org/zirco/ui/activities/preferences下,可以锁定UI,查找对应的activity;MobileView按钮是用来将网页形式改成list形式显示,

如果点击下toolbar的加号图标,屏幕中央两侧会有跳转按钮,多按几次,然后选择才会左右都有。这个就是你的浏览器中tab页,只不过需要我们手动添加。然后,就能切换网页了。切换工具,用ViewFlipper处理处animation切换效果。

2.3 web页面呈现

定位GoBtn,找到该按钮对应的事件,然后可以确定web显示用的容器

CustomWebView mCurrentWebView -->WebView-->AbsoluteLayout,

可以查到Webview引用webkit包,它已经给我封装好了,对于我们来说,只是一个view,虽然我们失去了了解细节的机会,但对于经常赶进程的我们,这种封装无疑是非常好的。

 

写到这,感觉是记流水账,因为这就是个UI,所以,我也算尽半分力了(还得准备2个完全不同面试,java,C++,C#,学多了也坑爹啊)。

源代码读后感,感觉学习了不少,毕竟这个程序比ApiDemo有一定的复杂度,也比其他网友的读的爽些.(总自欺欺人的认为外国人写的好,作者应该是德国后裔,我与Patrick打交道太多了。)里面还有些一些小的编程技巧,但愿我有机会总结并与大家分享。