CN112711401A - 基于组件化工程的iOS界面自上而下的布局方法及*** - Google Patents
基于组件化工程的iOS界面自上而下的布局方法及*** Download PDFInfo
- Publication number
- CN112711401A CN112711401A CN202011627907.2A CN202011627907A CN112711401A CN 112711401 A CN112711401 A CN 112711401A CN 202011627907 A CN202011627907 A CN 202011627907A CN 112711401 A CN112711401 A CN 112711401A
- Authority
- CN
- China
- Prior art keywords
- view
- page
- component
- engineering
- ios interface
- 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
- 238000000034 method Methods 0.000 title claims abstract description 40
- 238000009877 rendering Methods 0.000 claims abstract description 18
- 238000004590 computer program Methods 0.000 claims description 7
- 230000000694 effects Effects 0.000 abstract description 6
- 230000007547 defect Effects 0.000 description 3
- 230000005540 biological transmission Effects 0.000 description 1
- 238000013500 data storage Methods 0.000 description 1
- 238000010586 diagram Methods 0.000 description 1
- 239000000835 fiber Substances 0.000 description 1
- 230000006870 function Effects 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 230000008092 positive effect Effects 0.000 description 1
- 239000004065 semiconductor Substances 0.000 description 1
- 239000007787 solid Substances 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/20—Software design
-
- 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/34—Graphical or visual programming
-
- 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/36—Software reuse
-
- 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)
- User Interface Of Digital Computer (AREA)
Abstract
本发明属于iOS中UI布局技术领域,公开了一种基于组件化工程的iOS界面自上而下的布局方法及***,基于组件化工程的iOS界面自上而下的布局方法包括:为页面容器添加UIScrollView视图并添加约束;读取配置文件分发配置数据;页面组件返回视图信息;页面容器渲染子视图;所述基于组件化工程的iOS界面自上而下的布局***包括:视图及约束添加模块,配置数据读取模块,视图信息返回模块,子视图渲染模块。本发明提供的基于组件化工程的iOS界面自上而下的布局方法,通过各组件提供协商好的方法,返回各组件的视图到页面容器,进行正确的子视图展示效果,能够达到子视图根据用户的配置进行自定义的位置展示和复用。
Description
技术领域
本发明属于iOS中UI布局技术领域,尤其涉及一种基于组件化工程的iOS界面自上而下的布局方法及***。
背景技术
目前,Autolayout(自动布局)改变了传统的以frame(某个视图的大小,包括起始位置)为主的布局思想,它是一种相对布局,核心思想是视图与视图之间的位置关系。比如,可以根据矩形的起始横坐标、纵坐标、长和宽这四个变量确定它的位置。或者,如果已经确定矩形A的位置,只要知道矩形B每条边的和A对应边之间的距离,也能确定B的位置。前者就是frame的思想,它基于绝对数值,而后者是Autolayout的思想,它基于偏移量的概念。
UIScrollView(iOS***的滑动滚动视图)有自己的frame也就是在屏幕上能看到的区域,它还有一个contentSize(UIScrollView的大小)的概念。在使用frame布局的时候,一般先设置好子视图的位置,最后再设置contentSize,它会将所有的子视图包含在内,于是通过滑动就可以在有限的布局中看到所有的内容。但现有技术中关于iOS界面自上而下的布局方法及***尚未见报道。因此,亟需一种新的基于组件化工程的iOS界面自上而下的布局方法及***。
通过上述分析,现有技术存在的问题及缺陷为:现有技术中关于iOS界面自上而下的布局方法及***尚未见报道。
现有技术中,页面定制化高,同种类型的页面布局无法达到完整复用的效果。
解决以上问题及缺陷的难度为:
如何根据业务定义一个高复用、可配置的细粒度的图形组件,以及组件间的参数传递及结果返回
解决以上问题及缺陷的意义为:
减少了重复的相似代码,提高代码的复用性,快速构建页面。
发明内容
针对现有技术存在的问题,本发明提供了一种基于组件化工程的iOS界面自上而下的布局方法及***。
本发明是这样实现的,一种基于组件化工程的iOS界面自上而下的布局方法,所述基于组件化工程的iOS界面自上而下的布局方法包括以下步骤:
步骤一,为页面容器添加UIScrollView视图并添加约束;
步骤二,读取配置文件分发配置数据;
步骤三,页面组件返回视图信息;
步骤四,页面容器渲染子视图。
进一步,步骤一中,所述为页面容器添加UIScrollView视图并添加约束,包括:
(1)使用Autolayout直接创建一个UIScrollView视图,并将UIScrollView视图添加到父视图上添加约束;
(2)将UIScrollView视图的上下左右四边和父视图对齐,并居中显示;
(3)设置contentSize距离上下左右四边的距离固定为0,宽度固定为设备屏幕宽度。
进一步,步骤二中,所述读取配置文件分发配置数据,包括:
在页面容器中读取页面的配置信息,并通过配置信息向各个页面组件分发各自的配置信息。
进一步,步骤三中,所述页面组件返回视图信息,包括:
页面组件根据约定实现指定的方法,根据分配到的组件配置进行自身组件样式的渲染并返回到页面容器中进行展示。
进一步,步骤四中,所述页面容器渲染子视图,包括:
页面容器根据配置信息获取到的子视图进行自上而下的渲染,并对UIScrollView进行封底操作,保证页面的正式显示及可上下滑动。
本发明的另一目的在于提供一种应用所述的基于组件化工程的iOS界面自上而下的布局方法的基于组件化工程的iOS界面自上而下的布局***,所述基于组件化工程的iOS界面自上而下的布局***包括:
视图及约束添加模块,用于为页面容器添加UIScrollView视图并添加约束;
配置数据读取模块,用于在页面容器中读取页面的配置信息,并通过配置信息向各个页面组件分发各自的配置信息;
视图信息返回模块,用于通过页面组件根据约定实现指定的方法,根据分配到的组件配置进行自身组件样式的渲染并返回到页面容器中进行展示;
子视图渲染模块,用于通过页面容器根据配置信息获取到的子视图进行自上而下的渲染,并对UIScrollView进行封底操作。
本发明的另一目的在于提供一种计算机设备,所述计算机设备包括存储器和处理器,所述存储器存储有计算机程序,所述计算机程序被所述处理器执行时,使得所述处理器执行所述的基于组件化工程的iOS界面自上而下的布局方法。
本发明的另一目的在于提供一种计算机可读存储介质,存储有计算机程序,所述计算机程序被处理器执行时,使得所述处理器执行所述的基于组件化工程的iOS界面自上而下的布局方法。
本发明的另一目的在于提供一种信息数据处理终端,所述信息数据处理终端用于实现所述的基于组件化工程的iOS界面自上而下的布局方法。
本发明的另一目的在于提供一种APP,所述APP搭载所述的基于组件化工程的iOS界面自上而下的布局***,并实施所述的基于组件化工程的iOS界面自上而下的布局方法。
结合上述的所有技术方案,本发明所具备的优点及积极效果为:本发明提供的基于组件化工程的iOS界面自上而下的布局方法,通过各个组件提供协商好的方法,返回各个组件的视图到统一的页面容器,进行正确的子视图展示效果,能够达到子视图根据用户的配置进行自定义的位置展示和复用。
本发明提高了代码的复用性、可配置性,提高开发速度。
可以让不懂开发的人员,通过页面拖拽的方式快死的、轻松的构建出一个自己的APP。
附图说明
为了更清楚地说明本发明实施例的技术方案,下面将对本发明实施例中所需要使用的附图做简单的介绍,显而易见地,下面所描述的附图仅仅是本发明的一些实施例,对于本领域普通技术人员来讲,在不付出创造性劳动的前提下还可以根据这些附图获得其他的附图。
图1是本发明实施例提供的基于组件化工程的iOS界面自上而下的布局方法及***流程图。
图2是本发明实施例提供的各组件视图组合的展示效果图。
具体实施方式
为了使本发明的目的、技术方案及优点更加清楚明白,以下结合实施例,对本发明进行进一步详细说明。应当理解,此处所描述的具体实施例仅仅用以解释本发明,并不用于限定本发明。
针对现有技术存在的问题,本发明提供了一种基于组件化工程的iOS界面自上而下的布局方法及***,下面结合附图对本发明作详细的描述。
如图1所示,本发明实施例提供的基于组件化工程的iOS界面自上而下的布局方法包括以下步骤:
S101,为页面容器添加UIScrollView视图并添加约束;
S102,读取配置文件分发配置数据;
S103,页面组件返回视图信息;
S104,页面容器渲染子视图。
如图2所示,本发明实施例提供的基于组件化工程的iOS界面自上而下的布局***包括:
视图及约束添加模块,用于为页面容器添加UIScrollView视图并添加约束;
配置数据读取模块,用于在页面容器中读取页面的配置信息,并通过配置信息向各个页面组件分发各自的配置信息;
视图信息返回模块,用于通过页面组件根据约定实现指定的方法,根据分配到的组件配置进行自身组件样式的渲染并返回到页面容器中进行展示;
子视图渲染模块,用于通过页面容器根据配置信息获取到的子视图进行自上而下的渲染,并对UIScrollView进行封底操作。
下面结合实施例对本发明作进一步描述。
本发明约定,contentSize距离上下左右四边的距离固定为0,宽度固定为设备屏幕宽度,这样我们只要关心自上而下的部分。
本发明涉及一种基于组件化工程的iOS界面自上而下的布局方法,其通过各个组件提供协商好的方法,返回各个组件的视图到统一的页面容器,进行正确的子视图展示效果,以达到子视图根据用户的配置进行自定义的位置展示和复用,其包括以下步骤:
步骤1、为页面容器添加UIScrollView视图并添加约束;
使用Autolayout直接创建一个UIScrollView视图,并将UIScrollView视图添加到父视图上添加约束:将UIScrollView视图的上下左右四边和父视图对齐,并居中显示。设置contentSize距离上下左右四边的距离固定为0,宽度固定为设备屏幕宽度;
步骤2、读取配置文件分发配置数据;
在页面容器中读取页面的配置信息,并通过配置信息向各个页面组件分发各自的配置信息;
步骤3、页面组件返回视图信息;
页面组件根据约定实现指定的方法,根据分配到的组件配置进行自身组件样式的渲染并返回到页面容器中进行展示;
步骤4、页面容器渲染子视图;
页面容器根据配置信息获取到的子视图进行自上而下的渲染,并对UIScrollView进行封底操作,保证页面的正式显示及可上下滑动。
本发明的技术方案在i丰泽APP、掌上南平APP、i南威APP等里面的页面布局上进行应用,取得了良好的效果。
在上述实施例中,可以全部或部分地通过软件、硬件、固件或者其任意组合来实现。当使用全部或部分地以计算机程序产品的形式实现,所述计算机程序产品包括一个或多个计算机指令。在计算机上加载或执行所述计算机程序指令时,全部或部分地产生按照本发明实施例所述的流程或功能。所述计算机可以是通用计算机、专用计算机、计算机网络、或者其他可编程装置。所述计算机指令可以存储在计算机可读存储介质中,或者从一个计算机可读存储介质向另一个计算机可读存储介质传输,例如,所述计算机指令可以从一个网站站点、计算机、服务器或数据中心通过有线(例如同轴电缆、光纤、数字用户线(DSL)或无线(例如红外、无线、微波等)方式向另一个网站站点、计算机、服务器或数据中心进行传输)。所述计算机可读取存储介质可以是计算机能够存取的任何可用介质或者是包含一个或多个可用介质集成的服务器、数据中心等数据存储设备。所述可用介质可以是磁性介质,(例如,软盘、硬盘、磁带)、光介质(例如,DVD)、或者半导体介质(例如固态硬盘SolidState Disk(SSD))等。
以上所述,仅为本发明的具体实施方式,但本发明的保护范围并不局限于此,任何熟悉本技术领域的技术人员在本发明揭露的技术范围内,凡在本发明的精神和原则之内所作的任何修改、等同替换和改进等,都应涵盖在本发明的保护范围之内。
Claims (10)
1.一种基于组件化工程的iOS界面自上而下的布局方法,其特征在于,所述基于组件化工程的iOS界面自上而下的布局方法包括:
对页面容器添加UIScrollView视图并添加约束;
读取配置文件分发配置数据;
页面组件返回视图信息;
页面容器渲染子视图。
2.如权利要求1所述的基于组件化工程的iOS界面自上而下的布局方法,其特征在于,所述对页面容器添加UIScrollView视图并添加约束,包括:
(1)使用Autolayout直接创建一个UIScrollView视图,并将UIScrollView视图添加到父视图上添加约束;
(2)将UIScrollView视图的上下左右四边和父视图对齐,并居中显示;
(3)设置contentSize距离上下左右四边的距离固定为0,宽度固定为设备屏幕宽度。
3.如权利要求1所述的基于组件化工程的iOS界面自上而下的布局方法,其特征在于,所述读取配置文件分发配置数据,包括:
在页面容器中读取页面的配置信息,并通过配置信息向各个页面组件分发各自的配置信息。
4.如权利要求1所述的基于组件化工程的iOS界面自上而下的布局方法,其特征在于,所述页面组件返回视图信息,包括:
页面组件根据约定实现指定的方法,根据分配到的组件配置进行自身组件样式的渲染并返回到页面容器中进行展示。
5.如权利要求1所述的基于组件化工程的iOS界面自上而下的布局方法,其特征在于,所述页面容器渲染子视图,包括:
页面容器根据配置信息获取到的子视图进行自上而下的渲染,并对UIScrollView进行封底操作,保证页面的正确显示及可上下滑动。
6.一种基于组件化工程的iOS界面自上而下的布局***,其特征在于,所述基于组件化工程的iOS界面自上而下的布局***包括:
视图及约束添加模块,用于为页面容器添加UIScrollView视图并添加约束;
配置数据读取模块,用于在页面容器中读取页面的配置信息,并通过配置信息向各个页面组件分发各自的配置信息;
视图信息返回模块,用于通过页面组件根据约定实现指定的方法,根据分配到的组件配置进行自身组件样式的渲染并返回到页面容器中进行展示;
子视图渲染模块,用于通过页面容器根据配置信息获取到的子视图进行自上而下的渲染,并对UIScrollView进行封底操作。
7.一种计算机设备,其特征在于,所述计算机设备包括存储器和处理器,所述存储器存储有计算机程序,所述计算机程序被所述处理器执行时,使得所述处理器执行权利要求1~5任意一项所述的基于组件化工程的iOS界面自上而下的布局方法。
8.一种计算机可读存储介质,存储有计算机程序,所述计算机程序被处理器执行时,使得所述处理器执行权利要求1~5任意一项所述的基于组件化工程的iOS界面自上而下的布局方法。
9.一种信息数据处理终端,其特征在于,所述信息数据处理终端用于实现权利要求1~5任意一项所述的基于组件化工程的iOS界面自上而下的布局方法。
10.一种APP,其特征在于,所述APP搭载权利要求6所述的基于组件化工程的iOS界面自上而下的布局***,并实施权利要求1~5任意一项所述的基于组件化工程的iOS界面自上而下的布局方法。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202011627907.2A CN112711401A (zh) | 2020-12-31 | 2020-12-31 | 基于组件化工程的iOS界面自上而下的布局方法及*** |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202011627907.2A CN112711401A (zh) | 2020-12-31 | 2020-12-31 | 基于组件化工程的iOS界面自上而下的布局方法及*** |
Publications (1)
Publication Number | Publication Date |
---|---|
CN112711401A true CN112711401A (zh) | 2021-04-27 |
Family
ID=75547712
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202011627907.2A Pending CN112711401A (zh) | 2020-12-31 | 2020-12-31 | 基于组件化工程的iOS界面自上而下的布局方法及*** |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN112711401A (zh) |
Cited By (1)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN114675924A (zh) * | 2022-05-26 | 2022-06-28 | 云账户技术(天津)有限公司 | 基于FlexBox的页面布局方法、装置及电子设备 |
Citations (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN105094774A (zh) * | 2014-05-13 | 2015-11-25 | 大唐软件技术股份有限公司 | 一种终端***界面的展示方法和装置 |
CN109558201A (zh) * | 2018-12-11 | 2019-04-02 | 南威软件股份有限公司 | 一种基于UIScrollView的iOS界面简化布局方法 |
CN111324390A (zh) * | 2020-02-20 | 2020-06-23 | 苏宁云计算有限公司 | 实现app内容可配置和实时更新的装置及方法 |
CN112035197A (zh) * | 2020-08-11 | 2020-12-04 | 深圳前海微众银行股份有限公司 | 一种前端页面的配置方法及装置 |
-
2020
- 2020-12-31 CN CN202011627907.2A patent/CN112711401A/zh active Pending
Patent Citations (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN105094774A (zh) * | 2014-05-13 | 2015-11-25 | 大唐软件技术股份有限公司 | 一种终端***界面的展示方法和装置 |
CN109558201A (zh) * | 2018-12-11 | 2019-04-02 | 南威软件股份有限公司 | 一种基于UIScrollView的iOS界面简化布局方法 |
CN111324390A (zh) * | 2020-02-20 | 2020-06-23 | 苏宁云计算有限公司 | 实现app内容可配置和实时更新的装置及方法 |
CN112035197A (zh) * | 2020-08-11 | 2020-12-04 | 深圳前海微众银行股份有限公司 | 一种前端页面的配置方法及装置 |
Cited By (2)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN114675924A (zh) * | 2022-05-26 | 2022-06-28 | 云账户技术(天津)有限公司 | 基于FlexBox的页面布局方法、装置及电子设备 |
CN114675924B (zh) * | 2022-05-26 | 2022-08-19 | 云账户技术(天津)有限公司 | 基于FlexBox的页面布局方法、装置及电子设备 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN107656914B (zh) | 可配置化的表格生成方法、装置、终端设备及存储介质 | |
WO2020048326A1 (zh) | 一种界面显示方法、***及终端设备 | |
CN109408685A (zh) | 思维导图展示方法和装置 | |
CN104216691A (zh) | 一种创建应用的方法及装置 | |
CN110851134A (zh) | 低代码页面设计装置及页面设计方法 | |
CN102929867A (zh) | 用于自动化的文档翻译的技术 | |
CN111984902A (zh) | 可视化页面配置方法、***、计算机设备和存储介质 | |
CN108255923A (zh) | 图像展示方法、设备及电子设备 | |
CN111881662A (zh) | 表单生成方法、装置、处理设备及存储介质 | |
CN109614565B (zh) | 网页生成方法与装置 | |
CN110020356A (zh) | 一种页面模块的代码生成方法、装置及*** | |
CN101135966A (zh) | 一种基于命令行的图形界面开发方法及*** | |
CN109471580B (zh) | 一种可视化3d课件编辑器及课件编辑方法 | |
CN107066244B (zh) | 一种移动终端应用界面的生成方法和装置 | |
CN103530338A (zh) | 在计算设备上进行页面渲染的框架及生成页面的方法 | |
CN105824517A (zh) | 一种桌面的实现方法和装置 | |
CN109446503A (zh) | 文档内容导出方法和装置 | |
CN113110829A (zh) | 多ui组件库数据处理方法及装置 | |
CN112084446A (zh) | 一种网页编辑方法、编辑器、电子设备和可读存储介质 | |
US20170031889A1 (en) | Creating a communication editable in a browser independent of platform and operating system | |
CN112711401A (zh) | 基于组件化工程的iOS界面自上而下的布局方法及*** | |
CN114548056A (zh) | 富文本编辑方法、装置及设备 | |
CN102945122B (zh) | 为移动终端提供适配的阅读界面的方法以及客户端 | |
CN109766095A (zh) | 一种活动专题页创建方法、相关装置和设备 | |
CN103226475B (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 |