CN106293760A - 一种epg的视图动态布局系统及其方法 - Google Patents

一种epg的视图动态布局系统及其方法 Download PDF

Info

Publication number
CN106293760A
CN106293760A CN201610686545.1A CN201610686545A CN106293760A CN 106293760 A CN106293760 A CN 106293760A CN 201610686545 A CN201610686545 A CN 201610686545A CN 106293760 A CN106293760 A CN 106293760A
Authority
CN
China
Prior art keywords
view
layout
epg
javascript
dynamic
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Granted
Application number
CN201610686545.1A
Other languages
English (en)
Other versions
CN106293760B (zh
Inventor
李璞
潘晓峰
胡建平
周福凡
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Chengdu Androidmov Technology Co Ltd
Original Assignee
Chengdu Androidmov Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Chengdu Androidmov Technology Co Ltd filed Critical Chengdu Androidmov Technology Co Ltd
Priority to CN201610686545.1A priority Critical patent/CN106293760B/zh
Publication of CN106293760A publication Critical patent/CN106293760A/zh
Application granted granted Critical
Publication of CN106293760B publication Critical patent/CN106293760B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/20—Software design
    • G06F8/22—Procedural
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/38—Creation or generation of source code for implementing user interfaces

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • Processing Or Creating Images (AREA)

Abstract

本发明公开了一种EPG的视图动态布局系统，包括Css布局系统、View解析系统和View组件库，其中，Css布局系统是将Css布局式样添加到每个动态view中，通过java反射的形式将所有的javaScript布局样式映射到java中，再利用cssNode类对其进行转化，形成UI上的布局风格；View解析系统包括C++底层及java层；View组件库包括组件，每个组件均带有公共属性，其在发布apk版本后，从新快速的对上线版本的UI的各种view进行改变、修改，来达到UI需求，并且同时能够根据我们的动态view来进行组合各种复杂的view及其他动画，达到媲美android原生动画的效果。

Description

一种EPG的视图动态布局系统及其方法
技术领域
本发明涉及视图动态布局方法领域，具体涉及一种EPG的视图动态布局方法。
背景技术
现有Android 动态布局的方式主要有两种：1，采用访问服务器，获取数据，动态创建事先定义好的View类型，并设置大小和相对位置，来达到这一块的动态布局。2，采用WebView加载网页的方式，可以在服务器将html文件修改，达到整个网页界面的动态布局。下面将详细描述一下这两种动态布局方式。
第一种，客户端起来后，进入activity页面，进行请求服务器的流程，并从服务器拿到结果，这时通过解析服务器返回数据，当然我们要有一个事先定义好的View，这个View在apk编译的时候就定义好了，一般具有显示图片，焦点样式，点击跳转等属性。根据服务器返回的数据，在指定的某一块区域位置的动态创建指定大小的View，并把他add到父View里，一般会采用相对布局，添加进去，从左到右，从上倒下的顺序方式，依次排列。焦点左右移动需要预先代码中处理。这种动态布局，可以动态生成服务器指定数目的View，也可以指定大小，位置等。
第二种，采用WebView加载方式，首先在xml布局文件里写一个Webview的控件，在activity代码里，通过findViewById获取到该webView的引用，调用loadUrl(String url)方法，传递服务器网页url，打开该网页，通过设置setJavaScriptEnabled()，设置是否可执行javaScript脚本。setAllowFileAccess()，设置是否可访问文件，setWebViewClient()，设置Web视图。
现有方法不足在于:
1、动态创建的View要事先定义好，且不具有所有动态，只能部分区域动态。
2、动态创建的View在apk编译完后，不具有再动态修改或添加View类型。
3、WebView方式用webkit引擎，性能较差。
4、WebView方式动画效果相比原生差很多。
发明内容
本发明为了解决上述技术问题提供一种EPG的视图动态布局系统。
本发明通过下述技术方案实现：
一种EPG的视图动态布局系统，包括Css布局系统、View解析系统和View组件库，其中，
所述Css布局系统是将Css布局式样添加到每个动态view中，通过java反射的形式将所有的javaScript布局样式映射到java中，再利用cssNode类对其进行转化，形成UI上的布局风格；
所述View解析系统包括C++底层及java层；
所述View组件库包括组件，每个组件均带有公共属性。
所述View解析系统的C++底层将javaScript端的UI name与java层的name一一对应，Java层的view调用android原生的view；C++底层，将原生的view进行映射到javaScript端，然后通过对javaScript的UI组件进行渲染显示，最终形成布局。
所述Css布局系统包括margin-Left、margin-Right、padding-Left、padding-Right属性。
所述Css布局系统包括border属性。
本发明的目的在于解决在发布apk版本后，使用我们的动态view，从新快速的对上线版本的UI的各种view进行改变、修改，来达到我们的UI需求，并且同时能够根据我们的动态view来进行组合各种复杂的view及其他动画，达到媲美android原生动画的效果。原理为：利用javaScript以标签的形式来添加布局我们的动态view，并且利用css布局系统对view进行css模式的布局，来达到最终view的展现；核心为javaScript与java直接通过底层C++来建立通信。
传统开发则只能通过android代码构建几套UI视图进行动态view的创建。本装置则是通过我们所封装的JS基础UI组件来对不同需求的UI页面进行各种组合，来达到动态创建UI，页面的编写包括引用基础UI组件，如<AIE_V_View style={styles.container} >，并通过style风格来对UI组件进行宽高、内边距、外边距、居中等的控制，并且对该组件也封装有其他的方法，如：获取焦点方法、执行动画方法等等，所有UI组件必须继承JavaScriptModule，并注册在CatalystInstance中，通过C++层 Bridge 把java与javaScript进行连接通信。
通过本装置，可以使得不更新APK的情况下进行视图view的更新。通过把各种UI页面进行打包成index文件，index文件中包含有UI界面的代码及运行这些代码的运行引擎，apk则加载该index文件即可，来到新页面的渲染更新。
传统加载webkit，性能较差，性能上无法充分发挥系统特性，譬如调用系统服务、内存管理等，无法操控设备硬件，如相机、蓝牙、振动器等。本装置则是通过java直接在android对组件或者API进行NativeModuleRegistry注册，并通过反射来将需要使用到的方法映射给javaScript端，javaScript端直接调用。直接原理则是javaScript间接地调用android端的API。
采用本装置，组件UI的动画则是通过在调用android端view时封装的动画方法，相对于webview，本装置则是直接调用原生的动画，因此流畅度及效果好更多。
一种EPG的视图动态布局方法，其特征在于，包括：
封装基础组件库，根据android原生封装出对应的js调用组件库；
布局相应的页面，在javaScript页面端使用基础组件库进行相应的UI布局，设置UI的相应属性；
视图解析系统，将布局好的js布局界面解析出来，呈现视图；
根据UI需求，在javaScript端利用封装的基础组件进行UI的布局；Js页面编写完毕后，打包成index文件，客户端动态的下载该index文件并进行加载，apk最终渲染出所需要的视图view。
所述js调用组件库包括Text、Input、Image、Listview中至少一种。
所述javaScript端的处理过程包括逻辑处理、页面的跳转处理。
本发明与现有技术相比，至少具有如下的优点和有益效果：
本发明的系统在发布apk版本后，可从新快速的对上线版本的UI的各种view进行改变、修改，来达到我们的UI需求，并且同时能够根据我们的动态view来进行组合各种复杂的view及其他动画，达到媲美android原生动画的效果。
具体实施方式
为使本发明的目的、技术方案和优点更加清楚明白，下面结合实施例，对本发明作进一步的详细说明，本发明的示意性实施方式及其说明仅用于解释本发明，并不作为对本发明的限定。
实施例1
一种EPG的视图动态布局系统，包括Css布局系统、View解析系统和View组件库，其中，
所述Css布局系统是将Css布局式样添加到每个动态view中，通过java反射的形式将所有的javaScript布局样式映射到java中，再利用cssNode类对其进行转化，形成UI上的布局风格；
所述View解析系统包括C++底层及java层；
所述View组件库包括组件，每个组件均带有公共属性，如是否能够获取焦点，是否获取焦点，是否显示，点击view事件，以及向左的下一个焦点id、向右的下一个焦点id等，每类view也含有其对应的特有属性，如textView含有设置文字大小等属性。
所述View解析系统的C++底层将javaScript端的UI name与java层的name一一对应，Java层的view调用android原生的view；C++底层，将原生的view进行映射到javaScript端，然后通过对javaScript的UI组件进行渲染显示，最终形成布局。
所述Css布局系统包括margin-Left、margin-Right、padding-Left、padding-Right等属性，以及android xml布局所没有的border属性，并且含有丰富的水平居中、垂直居中等属性。
实施例2
一种EPG的视图动态布局方法，包括以下步骤：
封装基础组件库，根据android原生封装出对应的js调用组件库。如Text、Input、Image、Listview等等
布局相应的页面，在javaScript页面端使用基础组件库进行相应的UI布局，设置UI的属性、位置等属性；
视图解析系统，将布局好的js布局界面解析出来，呈现视图；
根据UI需求，在javaScript端利用封装的基础组件进行UI的布局，包括需要的其他逻辑处理，如网络请求，处理数据等，都在javaScript端进行处理。也包括页面的跳转等处理。Js页面编写完毕后，打包成index文件，客户端来动态的下载该index文件并进行加载，apk最终渲染出所需要的视图view。
以上所述的具体实施方式，对本发明的目的、技术方案和有益效果进行了进一步详细说明，所应理解的是，以上所述仅为本发明的具体实施方式而已，并不用于限定本发明的保护范围，凡在本发明的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (7)

1.一种EPG的视图动态布局系统，其特征在于：包括Css布局系统、View解析系统和View组件库，其中，
所述Css布局系统是将Css布局式样添加到每个动态view中，通过java反射的形式将所有的javaScript布局样式映射到java中，再利用cssNode类对其进行转化，形成UI上的布局风格；
所述View解析系统包括C++底层及java层；
所述View组件库包括组件，每个组件均带有公共属性。
2.根据权利要求1所述的一种EPG的视图动态布局系统，其特征在于：所述View解析系统的C++底层将javaScript端的UI name与java层的name一一对应，Java层的view调用android原生的view；C++底层，将原生的view进行映射到javaScript端，然后通过对javaScript的UI组件进行渲染显示，最终形成布局。
3.根据权利要求1所述的一种EPG的视图动态布局系统，其特征在于：所述Css布局系统包括margin-Left、margin-Right、padding-Left、padding-Right属性。
4.根据权利要求1所述的一种EPG的视图动态布局系统，其特征在于：所述Css布局系统包括border属性。
5.一种EPG的视图动态布局方法，其特征在于，包括：
封装基础组件库，根据android原生封装出对应的js调用组件库；
布局相应的页面，在javaScript页面端使用基础组件库进行相应的UI布局，设置UI的相应属性；
视图解析系统，将布局好的js布局界面解析出来，呈现视图；
根据UI需求，在javaScript端利用封装的基础组件进行UI的布局；Js页面编写完毕后，打包成index文件，客户端动态的下载该index文件并进行加载，apk最终渲染出所需要的视图view。
6.根据权利要求5所述的一种EPG的视图动态布局方法，其特征在于：所述js调用组件库包括Text、Input、Image、Listview中至少一种。
7.根据权利要求5所述的一种EPG的视图动态布局方法，其特征在于：所述javaScript端的处理过程包括逻辑处理、页面的跳转处理。
CN201610686545.1A 2016-08-19 2016-08-19 一种epg的视图动态布局系统及其方法 Active CN106293760B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201610686545.1A CN106293760B (zh) 2016-08-19 2016-08-19 一种epg的视图动态布局系统及其方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201610686545.1A CN106293760B (zh) 2016-08-19 2016-08-19 一种epg的视图动态布局系统及其方法

Publications (2)

Publication Number Publication Date
CN106293760A true CN106293760A (zh) 2017-01-04
CN106293760B CN106293760B (zh) 2019-08-27

Family

ID=57679939

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201610686545.1A Active CN106293760B (zh) 2016-08-19 2016-08-19 一种epg的视图动态布局系统及其方法

Country Status (1)

Country Link
CN (1) CN106293760B (zh)

Cited By (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN106919383A (zh) * 2017-01-26 2017-07-04 武汉奇米网络科技有限公司 一种Android商品列表的展示方法及系统
CN107832038A (zh) * 2017-10-27 2018-03-23 中航信移动科技有限公司 组件库的实现方法及装置
CN108037914A (zh) * 2017-12-26 2018-05-15 福建中金在线信息科技有限公司 一种安卓原生系统结合js开发的方法及装置
CN108572821A (zh) * 2018-04-11 2018-09-25 连向辉 用户界面代码的生成方法和插件
CN109062571A (zh) * 2018-06-12 2018-12-21 广州视源电子科技股份有限公司 用于用户界面动态配置的方法和装置
CN109508213A (zh) * 2017-09-14 2019-03-22 腾讯科技（北京）有限公司 一种视图渲染方法、装置、介质及智能终端
CN110221832A (zh) * 2019-04-29 2019-09-10 深圳康佳电子科技有限公司 一种恢复系统用户界面呈现控制方法、系统及存储介质
CN112596715A (zh) * 2020-12-08 2021-04-02 海看网络科技(山东)股份有限公司 一种epg异形图组件及其展示方法

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101685393A (zh) * 2008-08-20 2010-03-31 大唐软件技术股份有限公司 一种实现界面动态定制和生成的方法及系统
CN102222006A (zh) * 2011-07-22 2011-10-19 武汉天喻信息产业股份有限公司 移动Widget用户界面的实现方法及装置
CN105022615A (zh) * 2014-04-21 2015-11-04 大唐软件技术股份有限公司 一种界面的生成方法和系统
US9400660B1 (en) * 2013-03-12 2016-07-26 Intuit Inc. Customizing user interfaces of native applications for portable electronic devices

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101685393A (zh) * 2008-08-20 2010-03-31 大唐软件技术股份有限公司 一种实现界面动态定制和生成的方法及系统
CN102222006A (zh) * 2011-07-22 2011-10-19 武汉天喻信息产业股份有限公司 移动Widget用户界面的实现方法及装置
US9400660B1 (en) * 2013-03-12 2016-07-26 Intuit Inc. Customizing user interfaces of native applications for portable electronic devices
CN105022615A (zh) * 2014-04-21 2015-11-04 大唐软件技术股份有限公司 一种界面的生成方法和系统

Cited By (12)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN106919383A (zh) * 2017-01-26 2017-07-04 武汉奇米网络科技有限公司 一种Android商品列表的展示方法及系统
CN109508213A (zh) * 2017-09-14 2019-03-22 腾讯科技（北京）有限公司 一种视图渲染方法、装置、介质及智能终端
CN109508213B (zh) * 2017-09-14 2022-04-22 腾讯科技（北京）有限公司 一种视图渲染方法、装置、介质及智能终端
CN107832038A (zh) * 2017-10-27 2018-03-23 中航信移动科技有限公司 组件库的实现方法及装置
CN108037914A (zh) * 2017-12-26 2018-05-15 福建中金在线信息科技有限公司 一种安卓原生系统结合js开发的方法及装置
CN108037914B (zh) * 2017-12-26 2021-09-24 福建中金在线信息科技有限公司 一种安卓原生系统结合js开发的方法及装置
CN108572821A (zh) * 2018-04-11 2018-09-25 连向辉 用户界面代码的生成方法和插件
CN109062571A (zh) * 2018-06-12 2018-12-21 广州视源电子科技股份有限公司 用于用户界面动态配置的方法和装置
CN110221832A (zh) * 2019-04-29 2019-09-10 深圳康佳电子科技有限公司 一种恢复系统用户界面呈现控制方法、系统及存储介质
CN110221832B (zh) * 2019-04-29 2023-10-31 深圳康佳电子科技有限公司 一种恢复系统用户界面呈现控制方法、系统及存储介质
CN112596715A (zh) * 2020-12-08 2021-04-02 海看网络科技(山东)股份有限公司 一种epg异形图组件及其展示方法
CN112596715B (zh) * 2020-12-08 2024-05-17 海看网络科技(山东)股份有限公司 一种epg异形图的展示方法

Also Published As

Publication number Publication date
CN106293760B (zh) 2019-08-27

Similar Documents

Publication Publication Date Title
CN106293760A (zh) 一种epg的视图动态布局系统及其方法
CN105069118B (zh) 一种基于gis配置的应用场景管理方法及系统
CN105745955B (zh) 在基于网络的沉浸式增强现实中的保护隐私
AU2001292809B2 (en) An extensible manufacturing/process control information portal server
CN103336691B (zh) 一种基于Android的动态布局方法及系统
US7907966B1 (en) System and method for cross-platform applications on a wireless phone
US8510371B2 (en) Method and system for creating IT-oriented server-based web applications
CN104573066B (zh) 页面复用方法及装置
US7577907B2 (en) System and method for dynamically constructing synchronized business information user interfaces
US12093966B2 (en) Customer service representative dashboard with micro-applications
CN103761082A (zh) 一种组件化研发模式与领域驱动模型相结合的应用开发系统及平台
CN105824900A (zh) 一种基于react-native的页面展示系统
CN109863527A (zh) 用于展现的本地内容的服务器侧渲染的方法和系统
CN104778211A (zh) 一种局部刷新页面模块的方法、客户端、服务器及系统
CN110908712A (zh) 移动端跨平台的数据处理方法和设备
US7409692B2 (en) Software component architecture
CN103150154B (zh) 一种应用程序插件的实现方法及装置
CN102547231A (zh) 基于浏览器的智能网络视频监控系统及其工作方法
CN102004742A (zh) 多层数据库访问结构
CN105630267A (zh) 视图界面资源管理方法和装置
CN108170497A (zh) 一种页面渲染的方法及装置
CN103530338A (zh) 在计算设备上进行页面渲染的框架及生成页面的方法
CN109343858A (zh) 一种基于服务端渲染的自动建站容器部署系统及其工作方法
CN105743955A (zh) 一种扩展JavaScript对象方法
CN110532045A (zh) 一种跨进程调用方法及相关装置

Legal Events

Date Code Title Description
C06 Publication
PB01 Publication
C10 Entry into substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant