随着 Weex 的推出和开源，跨平台UI的概念又火了一把，趁着火，我也来淌一下这趟混水 :)

AndroidUIX是一个js驱动的框平台UI框架，使用与原生Android开发一致的方式开发UI。框架的大部分代码由Android的源码翻译而来，框架所有UI组件的实现代码和API与Android原生组件保持一致，相关API文档用法和问题等都可以从Android社区和官网找到。

官网: http://www.androiduix.com

Github: https://github.com/linfaxin/AndroidUIX

• Sample App
• 干货 WebApp

IOS端稳定在50fps+, 全程原生级别的流畅度; Android端Chrome浏览器在50fps左右; Android端WebView(App嵌入运行时)在50fps左右。

• WebStorm (最新版本)
• Node.js
• AndroidUIX命令行工具: npm install -g androidui-cli

1. 新建一个空目录
2. 终端进入这个目录, 运行 androidui create，会在这个目录创建一个 hello world 工程.
3. 用WebStorm打开这个目录:

布局的方式和Android保持一致，文件放在 res/layout/xxxxx.xml

刚刚创建工程的布局 activity_main.xml:

<FrameLayout xmlns="android" xmlns:android="http://schemas.android.com/apk/res/android"
             android:layout_height="match_parent"
             android:layout_width="match_parent">
    <TextView
            android:id="textView"
            android:text="@string/hello_world"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:layout_gravity="center"
            android:textSize="20sp" />
</FrameLayout>

使用 Typescript + ECMAScript6 书写代码

刚刚创建工程的代码 MainActivity.ts:

///<reference path="../androidui-sdk/android-ui.d.ts"/>
///<reference path="../gen/R.ts"/>
module my.app {
    import ActionBarActivity = android.app.ActionBarActivity;
    import View = android.view.View;
    import Bundle = android.os.Bundle;

    export class MainActivity extends ActionBarActivity{

        protected onCreate(savedInstanceState?:Bundle):void {
            super.onCreate(savedInstanceState);

            this.setContentView(R.layout.activity_main);
        }
    }
}

右键 index_debug.html 文件, 选择 Open in Browser

在你改动了资源或者代码后，你需要在预览前构建你的工程: npm run build

预览 index_debug.html 文件, 打开浏览器的开发者工具, 可以看到各个View节点的位置和大小

预览 index_debug.html 文件, 打开浏览器的开发者工具, 可以用浏览器的调试工具调试代码

目前已移植了大部分常用的官方组件：

• TextView
• ImageView
• Button
• ImageButton
• CheckBox
• RadioButton
• RadioGroup
• EditText
• FrameLayout
• LinearLayout
• RelativeLayout
• ProgressBar
• ScrollView
• HorizontalScrollView
• Spinner
• Toast
• ListView
• GridView
• ExpandableListView
• WebView
• NumberPicker
• PopupWindow
• SeekBar
• RatingBar

所有组件的文档和用法都可以在Android开发者官网或搜索找到。

在浏览器里，AndroidUIX 使用 web canvas 渲染界面。

如果App嵌入了AndroidUIX的 运行时插件, 框架将使用原生的画布来渲染界面，这时WebView仅作为JavaScript引擎。

同时框架也提供了Cordova(PhoneGap)的运行时插件：cordova plugin add androidui-webapp-runtime-cordova

Android 运行时

加入框架QQ群：275850460，为你提供技术支持 :)

汤涛 为框架的推广做的贡献 :)