自动生成Android界面,一种Android用户界面生成方法及系统与流程

本发明涉及一种android用户界面生成方法及系统。

背景技术：

传统的安卓界面开发使用的是android原生的开发技术，通常为两种方式：

1)在xml文件中使用androidui组件定义界面，通过编译生成android的应用界面；

2)使用java代码调用androidui布局和组件，构造android应用界面。

当前，web应用技术有很大发展，很多掌握web前端技术的开发者希望能够使用web前端开发技术快速构建web应用，这样，同一套web代码可以同时兼容web端和android端，而不是维护两套ui代码。

为了解决以上问题，phonegap、cordova等混合编程技术应运而生，但是，cordova等混合编程技术是通过调用android设备的webview来呈现应用程序界面的，通过这种方式与android原生界面相比，有以下缺点：

缺点1：

webview界面的ui响应速度没有android原生界面的响应速度快，在长列表刷新或动画效果呈现时经常会有卡顿、掉帧的情况出现；

缺点2：

webviewui较依赖于androidwebkit版本的性能，表现力、画面清晰度方面不如android原生界面；很多android原生ui效果androidwebview无法呈现。

技术实现要素：

本发明要解决的技术问题，在于提供一种android用户界面生成方法及系统，便于用户采用web前端开发技术生成以及维护android原生界面。

本发明之一是这样实现的：一种android用户界面生成方法，包括：

步骤1、在android应用内置用于解析js文件的so内核；

步骤2、将web编写的ui界面文件编译为js文件；

步骤3、将js文件发送至android应用，so内核读取js文件，并进行解析，生成界面描述数据结构；

步骤4、android界面渲染引擎根据界面描述数据结构生成android原生界面。

进一步地，所述步骤2进一步具体为：通过一编译工具将web编写的ui界面文件进行编译，若编译无误，则生成js文件；若编译有误，则显示错误信息并结束。

进一步地，所述步骤3进一步具体为：将js文件发送至android应用，so内核读取js文件，并进行解析，若解析无误，则生成界面描述数据结构；若解析有误，则显示错误信息并结束。

进一步地，所述步骤4进一步具体为：android界面渲染引擎根据界面描述数据结构进行渲染，若无误，则生成android原生界面；若有误，则显示错误信息并结束。

本发明之二是这样实现的：一种android用户界面生成系统，包括：

内置模块，在android应用内置用于解析js文件的so内核；

编译模块，将web编写的ui界面文件编译为js文件；

解析模块，将js文件发送至android应用，so内核读取js文件，并进行解析，生成界面描述数据结构；

生成模块，android界面渲染引擎根据界面描述数据结构生成android原生界面。

进一步地，所述编译模块进一步具体为：通过一编译工具将web编写的ui界面文件进行编译，若编译无误，则生成js文件；若编译有误，则显示错误信息并结束。

进一步地，所述解析模块进一步具体为：将js文件发送至android应用，so内核读取js文件，并进行解析，若解析无误，则生成界面描述数据结构；若解析有误，则显示错误信息并结束。

进一步地，所述生成模块进一步具体为：android界面渲染引擎根据界面描述数据结构进行渲染，若无误，则生成android原生界面；若有误，则显示错误信息并结束。

本发明具有如下优点：本发明一种android用户界面生成方法及系统，是的同一套web代码可以同时兼容web端和android端，而不用维护两套ui代码。

附图说明

下面参照附图结合实施例对本发明作进一步的说明。

图1为本发明一种android用户界面生成方法执行流程图。

图2为本发明具体实施方式中编译流程图。

图3为本发明具体实施方式中解析流程图。

图4为本发明具体实施方式中渲染流程图。

具体实施方式

如图1所示，本发明android用户界面生成方法，包括：

步骤1、在android应用内置用于解析js文件的so内核；

步骤2、通过一编译工具将web编写的ui界面文件进行编译，若编译无误，则生成js文件；若编译有误，则显示错误信息并结束；

步骤3、将js文件发送至android应用，so内核读取js文件，并进行解析，若解析无误，则生成界面描述数据结构；若解析有误，则显示错误信息并结束；

步骤4、android界面渲染引擎根据界面描述数据结构进行渲染，若无误，则生成android原生界面；若有误，则显示错误信息并结束。

本发明android用户界面生成系统，包括：

内置模块，在android应用内置用于解析js文件的so内核；

编译模块，通过一编译工具将web编写的ui界面文件进行编译，若编译无误，则生成js文件；若编译有误，则显示错误信息并结束；

解析模块，将js文件发送至android应用，so内核读取js文件，并进行解析，若解析无误，则生成界面描述数据结构；若解析有误，则显示错误信息并结束；

生成模块，android界面渲染引擎根据界面描述数据结构进行渲染，若无误，则生成android原生界面；若有误，则显示错误信息并结束。

本发明一种具体实施方式：

本发明通过在androidapk应用内置javascript运行解析.so内核(比如chrome的v8内核)，解析通过web编写的ui界面，生成android渲染使用的组件数据结构，发送给androidui界面渲染引擎，生成android原生应用界面。

在本发明中，通过web前端技术编写生成android用户界面主要包括以下4个流程：

界面编写：

通过web前端技术，html、css、javascript等编写android应用程序界面；

如图2所示，编译流程：

输入：ui文件(html+css+js)

输出：生成.js界面描述文件

如图3所示，解析流程：

输入：编译后的.js界面文件

输出：android原生界面描述数据结构

如图4所示，渲染流程：

输入：android原生界面描述数据结构

生成：android原生界面

androidui渲染引擎读入原生界面描述数据结构，渲染生成android原生界面。

1)通过编译工具将web技术开发的html、css、javascript文件统一编译成.js文件；编译工具可以是webpack或gulp等可定制化的前端构建工具。

2)在android应用内置js解析的so内核；

3)解析内核通过读入编译后的用户界面.js文件，生成界面描述数据结构(比如json)给android界面渲染引擎

4)android界面渲染引擎根据“界面描述数据结构”生成android原生界面

5)本发明中，设置android原生界面描述数据结构，并把该数据结构与js界面描述文件作对应映射是关键。js界面描述文件与android原生界面数据结构映射依据以下原理：

a.将web的html页面每个ui元素在编译阶段构造成一个自顶向下，由粗到细的ui元素树，每个ui元素即为ui树的节点，节点信息还包括了ui绑定的响应事件，ui树存在js的界面描述文件中；

b.so内核读取界面描述文件的树节点信息，生成一个android界面渲染指令队列；

c.android应用从界面渲染指令队列中取出渲染指令，以addview的方式，循环将队列中的指令add到android的界面布上，从而绘制成android界面。在绘制android界面的过程中，完成事件和androidui的绑定，从面实现web所开发的页面与android界面的映射。

虽然以上描述了本发明的具体实施方式，但是熟悉本技术领域的技术人员应当理解，我们所描述的具体的实施例只是说明性的，而不是用于对本发明的范围的限定，熟悉本领域的技术人员在依照本发明的精神所作的等效的修饰以及变化，都应当涵盖在本发明的权利要求所保护的范围内。