近期一直在参照chromium android的ContentShell做移植，当然做浏览器，ContentShell肯定是不够的。有时为了试验chromium android版本的功能，就会在ContentShell上添加一些界面元素。随着功能越来越多，ContentShell上摆放的button也越来越多，界面越来越难看，代码也越来越乱。由此想重新规划一下Browser的UI，但是一来对Android的UI研究不多，二来在UI上花费过多的精力，重心就会有所偏离，毕竟我的研究方向是移植与内核优化。于是就寻求现成的浏览器代码，找了一圈开源浏览器，发现Android自带的浏览器最适合。Android Browser由Google出品，质量自然是没的说，代码结构清晰，功能完备，就是其UI对国人来说不太友好。下面就分析一下将chromium核心挂接到Android Browser上。
一、Android4.0 Browser架构分析
Android 4.0的浏览器引入了很多新特性，如隐私浏览、预加载、离线阅读、google帐号同步等。Android 4.0也是手机和平板系统融合的一个版本，自然的Android 4.0 Browser也提供了两套界面，分别适应手机和平板系统。为此，Android 4.0 Browser采用了视图/控制器分离的架构，可以灵活的支持多套界面，总体的类图如下：
Android Browser采用了经典的MVC设计模式，可以很方便的支持手机和平板两套UI，这也为改造UI提供了便利。Browser的UI分为三个层次，分别是总体UI、Tab和WebView，对应的控制器为UiController、TabController和WebViewController。总体UI对应着主界面，抽象出一个接口UI，派生子类XLargeUi对应于平板的UI，PhoneUi对应于手机的UI。在BrowserActivity类，有一个方法isTablet用于判断平板还是手机。实例化UI子类的代码如下：
boolean xlarge = isTablet(this);
if (xlarge) {
mUi = new XLargeUi(this, mController);
} else {
mUi = new PhoneUi(this, mController);
}
mController.setUi(mUi);Browser UI的复用技巧
为了达到UI的复用，Browser的界面被划分为多个区域，然后组合起来形成一个完整的用户界面。这是通过两种方式实现的：
1. 使用代码动态加载
比如主界面的xml定义如下：
<merge
xmlns:android="https://schemas.android.com/apk/res/android">
<FrameLayout android:id="@+id/fullscreen_custom_content"
android:visibility="gone"
android:background="@color/black"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
<LinearLayout android:orientation="vertical"
android:id="@+id/vertical_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout android:id="@+id/error_console"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
<FrameLayout android:id="@+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</LinearLayout>
</merge>然后在代码中动态添加到界面，这是通过LayoutInflater的inflate方法实现的：
FrameLayout frameLayout = (FrameLayout) mActivity.getWindow()
.getDecorView().findViewById(android.R.id.content);
LayoutInflater.from(mActivity)
.inflate(R.layout.custom_screen, frameLayout);
mContentView = (FrameLayout) frameLayout.findViewById(
R.id.main_content);Tab内容则是在attachTabToContentView(Tab tab)方法中动态附着到mContentView上的。
2. xml包含
android提供了一个很好的特性，就是xml layout文件可以包含另外一个xml layout文件，这样将共用的一些UI分离出来，放到单独的xml文件，可以最大程度的达到复用的目的。例如title_bar.xml文件就包含了对title_bar_nav的引用：
<RelativeLayout
xmlns:android="https://schemas.android.com/apk/res/android"
android:id="@+id/titlebar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<include
layout="@layout/title_bar_nav"
android:id="@+id/taburlbar"
android:layout_width="match_parent"
android:layout_height="@dimen/toolbar_height" />
...
</RelativeLayout>二、Chromium android分析
关于chromium的分析，可以参考<<Chromium源码分析：Content API>>。chromium在三个层次上提供了API，分别是：WebKit API/Content API/Chrome API。我们之前是在Content API层面做浏览器，不过最新的chromium代码在chrome层面上进行了分层，将一些浏览器的UI剥离出来，这样既可以利用chrome的一些实现（比如多Tab、密码保存，扩展），又可以有自己独立的UI。Android版本提供了一个简单的参考实现ChromiumTestShell，非常具有参考价值，类结构图如下：
从类图中可以大致推断出和Android Browser的对应关系：
当然，上图只是一个大致的对应关系，并非严格的一一对应。
三、捏合Android Browser和Chromium TestShell
为了让Chromium的代码挂接到Browser上，设计了一个glue层，就是按照WebView API封装chromium的接口，这样Browser的代码只需稍作修改。设计的类图如下：
其中TabManager的代码合并到TabControl（也可以使用包含或者代理模式），修改TabControl原来的创建/显示/隐藏/关闭Tab的代码，改用TabManager的相应代码。
四、后续
Android Browser的代码使用了很多SDK未公开的API，可以采用一些方法避免这一问题，后面考虑去掉这些私有API调用，也考虑使用Android2.3 SDK，使之支持更多的手机。另外chromium android的移植代码不完善，后续会花主要精力做这一块的完善工作。
补充：
2013-05
工作重点转向在chromium之上提供Android WebView兼容API的工作，请关注github上的项目：https://github.com/mogoweb/chromium_webview
致力于为WebApp/hybrid APP提供强大的引擎。