CN108958735A - 一种终端组件化应用的ui重构方法 - Google Patents
一种终端组件化应用的ui重构方法 Download PDFInfo
- Publication number
- CN108958735A CN108958735A CN201810775257.2A CN201810775257A CN108958735A CN 108958735 A CN108958735 A CN 108958735A CN 201810775257 A CN201810775257 A CN 201810775257A CN 108958735 A CN108958735 A CN 108958735A
- Authority
- CN
- China
- Prior art keywords
- sub
- block
- terminal
- template data
- information
- 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.)
- Pending
Links
Classifications
-
- 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)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Information Transfer Between Computers (AREA)
- Stored Programmes (AREA)
Abstract
本发明公开了一种终端组件化应用的UI重构方法,步骤包括:(A)将终端的显示区域划分为若干等尺寸矩形单元,并设计用于展示信息的UI组件;(B)将所述显示区域划分为若干子区块,每个子区块由一个矩形单元或两个以上相连的矩形单元组成;(C)为每个子区块设置所要显示的UI组件,并对UI组件所显示的信息和形式进行配置,得到各子区块的UI组件配置信息;(D)将各子区块所对应的矩形单元信息和所对应的子区块的UI组件配置信息汇总为模板数据,并将该模板数据上传至服务器;(E)将模板数据下发至终端,终端根据模板数据生成UI。本发明实现了UI布局、显示风格的灵活配置以及模板的持久化存储,提高了终端显示配置效率和UI开发、维护效率。
Description
技术领域
本发明涉及一种UI重构方法。
背景技术
目前Android终端界面开发需要通过底层编程实现,用户及开发者无法灵活布局显示界面,造成生产力的严重不足。传统的Android终端UI开发方法为通过工具重新编写代码,限制UI元素的位置和效果,进行编译后安装应用,具有固定的显示格局和风格展示,无法灵活展示信息。即便是像进行字体颜色这样小的调整也需要重新编写开发才能生效。
发明内容
本发明提出了一种终端组件化应用的UI重构方法,其目的是:实现UI布局和显示风格的灵活配置,方便UI的调整和重构。
一种终端组件化应用的UI重构方法,其特征在于步骤为:
(A)将终端的显示区域划分为若干等尺寸矩形单元,并设计用于展示信息的UI组件;
(B)将所述显示区域划分为若干子区块,每个子区块由一个矩形单元或两个以上相连的矩形单元组成;
(C)为每个子区块设置所要显示的UI组件,并对UI组件所显示的信息和形式进行配置,得到各子区块的UI组件配置信息;
(D)将各子区块所对应的矩形单元信息和所对应的子区块的UI组件配置信息汇总为模板数据,并将该模板数据上传至服务器;
(E)将模板数据下发至终端,终端根据模板数据生成UI。
作为本发明的进一步改进:设置有管理端,所述管理端通过鼠标拖拽和点击操作进行子区块的划分。
作为本发明的进一步改进:所述管理端还用于读取服务器的模板数据,根据模板数据生成UI,以可视化方式对UI进行修改,并根据修改后UI生成新的模板数据上传到服务器。
作为本发明的进一步改进:所述子区块为矩形,所述子区块对应的矩形单元信息包括子区块左上角的矩形单元的位置信息和子区块右下角的矩形单元的位置信息。
作为本发明的进一步改进:所述模板数据以JSON格式文件下发。
作为本发明的进一步改进:所述子区块的UI组件配置信息包括UI组件ID、UI组件类型和UI组件布局信息。
相对于现有技术,本发明具有以下积极效果:(1)本发明针对多媒体终端的复杂UI开发提供了简单的实现方案,方便终端UI的组件化开发;(2)本发明将显示区域划分为若干小的矩形单元,再用矩形单元组成子区块,实现界面的高自由度布局,灵活性强,可实现不同风格的展示;(3)采用BS架构,将模板数据持久化存储在服务端,通过模板下发快速实现多个终端的界面的统一配置,效率高;(4)通过对模板数据进行修改,或通过管理端进行可视化操作,都能对UI进行自定义调整,无需编写底层代码,操作简单,维护方便,同时提高了开发效率。
具体实施方式
下面详细说明本发明的技术方案:
一种Android终端组件化应用的UI重构方法,步骤为:
(A)将终端的显示区域划分为若干等尺寸矩形单元,如设置为三行四列的十二宫格形式;并设计用于展示信息的UI组件,所述UI组件为多种类型,可用于显示:文字、图片、表格或图文组合,类似于web组件,所述UI组件还能够适配不同的显示尺寸;
(B)将所述显示区域划分为若干子区块,每个子区块由一个矩形单元或两个以上相连的矩形单元组成;优选的,所述子区块为矩形;
(C)为每个子区块设置所要显示的UI组件,并对UI组件所显示的信息和形式进行配置,得到各子区块的UI组件配置信息;UI组件配置信息包括UI组件ID、UI组件类型和UI组件布局信息,还包括UI组件所要显示的图文等信息的数据源,显示的字体大小、颜色、背景颜色、边框宽度等;所述UI组件布局信息,指的是UI组件的位置信息,即坐标信息;
(D)将各子区块所对应的矩形单元信息和所对应的子区块的UI组件配置信息汇总为模板数据,并将该模板数据上传至服务器的数据库中;
本实施例中,子区块为矩形,所述子区块对应的矩形单元信息包括子区块左上角的矩形单元的位置信息和子区块右下角的矩形单元的位置信息,即根据对角坐标位置确定子区块在显示区域中的位置;
所述数据库为关系型数据库,分别有模版表,组件表,模板和组件关系表。
模版表配置如下:
组件表配置如下:
模板和组件关系表配置如下:
字段名称 | 注释 |
ID | 自增编号 |
Mid | 模板id |
Zid | 组件id |
Zpositionstart | 组件开始坐标 |
Zpositionend | 组件结束坐标 |
Zbackgroud | 组件背景颜色 |
Zfontsytle | 组件字体 |
Zfontsize | 组件字体大小 |
Zfontcolor | 组件文字颜色 |
(E)将模板数据通过网络下发至终端,终端根据模板数据生成UI:根据子区块的矩形单元信息完成显示区域的划分和布局,然后根据UI组件配置信息将UI组件显示在各子区块中,即可完成终端UI的统一快速配置。
优选的,所述模板数据以JSON格式文件下发。
具体的,下发模版到终端设备采用的方式为:从数据库读取模板信息、组件信息以及二者间的关系后,根据其关联将上述信息组织成json文件,然后下发到设备。终端设备将json文件作为界面配置文件,采用java反射机制完成界面显示。
进一步的,还设置有管理端,所述管理端通过鼠标拖拽和点击操作进行子区块的划分,鼠标拖拽可以调整子区块的大小,也可以挪动子区块的位置,大小的调整和子区块的移动均以矩形单元的尺寸为单位,位置和大小确定后,自动记录向子区块所覆盖的矩形单元,尤其是左上角和右下角的矩形单元,以确定子区块的位置。
所述管理端还用于读取服务器的模板数据,根据模板数据生成UI,以可视化方式对UI进行修改,并根据修改后UI生成新的模板数据上传到服务器,从而完成模板的自定义修改。
Claims (6)
1.一种终端组件化应用的UI重构方法,其特征在于步骤为:
(A)将终端的显示区域划分为若干等尺寸矩形单元,并设计用于展示信息的UI组件;
(B)将所述显示区域划分为若干子区块,每个子区块由一个矩形单元或两个以上相连的矩形单元组成;
(C)为每个子区块设置所要显示的UI组件,并对UI组件所显示的信息和形式进行配置,得到各子区块的UI组件配置信息;
(D)将各子区块所对应的矩形单元信息和所对应的子区块的UI组件配置信息汇总为模板数据,并将该模板数据上传至服务器;
(E)将模板数据下发至终端,终端根据模板数据生成UI。
2.如权利要求1所述的终端组件化应用的UI重构方法,其特征在于:设置有管理端,所述管理端通过鼠标拖拽和点击操作进行子区块的划分。
3.如权利要求2所述的终端组件化应用的UI重构方法,其特征在于:所述管理端还用于读取服务器的模板数据,根据模板数据生成UI,以可视化方式对UI进行修改,并根据修改后UI生成新的模板数据上传到服务器。
4.如权利要求1所述的终端组件化应用的UI重构方法,其特征在于:所述子区块为矩形,所述子区块对应的矩形单元信息包括子区块左上角的矩形单元的位置信息和子区块右下角的矩形单元的位置信息。
5.如权利要求1所述的终端组件化应用的UI重构方法,其特征在于:所述模板数据以JSON格式文件下发。
6.如权利要求1至5任一所述的终端组件化应用的UI重构方法,其特征在于:所述子区块的UI组件配置信息包括UI组件ID、UI组件类型和UI组件布局信息。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201810775257.2A CN108958735A (zh) | 2018-07-16 | 2018-07-16 | 一种终端组件化应用的ui重构方法 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201810775257.2A CN108958735A (zh) | 2018-07-16 | 2018-07-16 | 一种终端组件化应用的ui重构方法 |
Publications (1)
Publication Number | Publication Date |
---|---|
CN108958735A true CN108958735A (zh) | 2018-12-07 |
Family
ID=64481298
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN201810775257.2A Pending CN108958735A (zh) | 2018-07-16 | 2018-07-16 | 一种终端组件化应用的ui重构方法 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN108958735A (zh) |
Cited By (3)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN111694568A (zh) * | 2019-03-15 | 2020-09-22 | 阿里巴巴集团控股有限公司 | 一种ui卡片文档的生成方法和装置 |
CN114442973A (zh) * | 2020-11-04 | 2022-05-06 | 南方电网电动汽车服务有限公司 | 屏幕显示方法、装置、计算机设备和存储介质 |
CN115981588A (zh) * | 2023-03-16 | 2023-04-18 | 中国邮电器材集团有限公司 | 一种多终端数据显示方法、设备和系统 |
Citations (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN103336691A (zh) * | 2013-06-29 | 2013-10-02 | 安科智慧城市技术(中国)有限公司 | 一种基于Android的动态布局方法及系统 |
CN105760146A (zh) * | 2014-12-16 | 2016-07-13 | 上海天脉聚源文化传媒有限公司 | 一种用户界面布局方法及系统 |
CN105824517A (zh) * | 2015-01-07 | 2016-08-03 | 阿里巴巴集团控股有限公司 | 一种桌面的实现方法和装置 |
CN106708484A (zh) * | 2015-11-13 | 2017-05-24 | 阿里巴巴集团控股有限公司 | 一种建立页面的方法和装置 |
-
2018
- 2018-07-16 CN CN201810775257.2A patent/CN108958735A/zh active Pending
Patent Citations (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN103336691A (zh) * | 2013-06-29 | 2013-10-02 | 安科智慧城市技术(中国)有限公司 | 一种基于Android的动态布局方法及系统 |
CN105760146A (zh) * | 2014-12-16 | 2016-07-13 | 上海天脉聚源文化传媒有限公司 | 一种用户界面布局方法及系统 |
CN105824517A (zh) * | 2015-01-07 | 2016-08-03 | 阿里巴巴集团控股有限公司 | 一种桌面的实现方法和装置 |
CN106708484A (zh) * | 2015-11-13 | 2017-05-24 | 阿里巴巴集团控股有限公司 | 一种建立页面的方法和装置 |
Cited By (5)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN111694568A (zh) * | 2019-03-15 | 2020-09-22 | 阿里巴巴集团控股有限公司 | 一种ui卡片文档的生成方法和装置 |
CN111694568B (zh) * | 2019-03-15 | 2023-04-07 | 阿里巴巴集团控股有限公司 | 一种ui卡片文档的生成方法和装置 |
CN114442973A (zh) * | 2020-11-04 | 2022-05-06 | 南方电网电动汽车服务有限公司 | 屏幕显示方法、装置、计算机设备和存储介质 |
CN115981588A (zh) * | 2023-03-16 | 2023-04-18 | 中国邮电器材集团有限公司 | 一种多终端数据显示方法、设备和系统 |
CN115981588B (zh) * | 2023-03-16 | 2023-09-26 | 中国邮电器材集团有限公司 | 一种多终端数据显示方法、设备和系统 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN108958735A (zh) | 一种终端组件化应用的ui重构方法 | |
CN110058856A (zh) | 页面配置方法及装置 | |
CN105446744A (zh) | 基于互联网的展示物料系统及展示物料制作方法 | |
CN110851134A (zh) | 低代码页面设计装置及页面设计方法 | |
CN105045775A (zh) | 一种指定格式的Excel文档生成方法及装置 | |
CN109388396A (zh) | 页面生成方法、装置、计算机设备和存储介质 | |
CN104142826A (zh) | 页面的构建方法、装置及系统 | |
CN103279454A (zh) | 文档自动生成方法、装置及系统 | |
CN109062567A (zh) | 基于b/s结构的信息管理系统快速开发平台 | |
CN104797084B (zh) | 印制电路板布局的方法及装置 | |
CN103197932B (zh) | 一种开发无模式文档型数据库应用的业务组件模型 | |
CN103778201A (zh) | 基于流程模型配置的大屏可视化展示系统及方法 | |
CN105867944B (zh) | Web前端数据操作层及其实现方法 | |
CN104915466A (zh) | 自动根据原理图分页布局的设计方法 | |
CN108090037A (zh) | 自动排版方法和装置 | |
CN104699863A (zh) | 一种网页数据展示系统 | |
CN108052496A (zh) | 一种基于源文件的word图文格式编排系统及其实现方法 | |
CN104615725A (zh) | 一种基于Web的在线自定义报表实现方法 | |
CN108153919A (zh) | Dbf数据导出平台及其导出方法 | |
CN108241595A (zh) | 红头文件的红头模板制作方法、应用服务器及计算机存储介质 | |
CN103176778A (zh) | 网页开发方法和装置 | |
CN102521551B (zh) | 一种实现ic卡个人化发行装置及方法 | |
CN114896691A (zh) | 一种基于mbd设备模型的三维标注方法 | |
CN106971412A (zh) | 一种生成排版设计文件的方法 | |
CN103034623A (zh) | 页面切分的方法和装置 |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
PB01 | Publication | ||
PB01 | Publication | ||
SE01 | Entry into force of request for substantive examination | ||
SE01 | Entry into force of request for substantive examination | ||
WD01 | Invention patent application deemed withdrawn after publication | ||
WD01 | Invention patent application deemed withdrawn after publication |
Application publication date: 20181207 |