CN112711401A - 基于组件化工程的iOS界面自上而下的布局方法及系统 - Google Patents

基于组件化工程的iOS界面自上而下的布局方法及系统 Download PDF

Info

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
Application number
CN202011627907.2A
Other languages
English (en)
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.)
Nanwei Internet Technology Group Co ltd
Linewell Software Co Ltd
Original Assignee
Nanwei Internet Technology Group Co ltd
Linewell Software 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 Nanwei Internet Technology Group Co ltd, Linewell Software Co Ltd filed Critical Nanwei Internet Technology Group Co ltd
Priority to CN202011627907.2A priority Critical patent/CN112711401A/zh
Publication of CN112711401A publication Critical patent/CN112711401A/zh
Pending legal-status Critical Current

Links

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界面自上而下的布局方法及系统
技术领域
本发明属于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界面自上而下的布局方法。
CN202011627907.2A 2020-12-31 2020-12-31 基于组件化工程的iOS界面自上而下的布局方法及系统 Pending CN112711401A (zh)

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)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114675924A (zh) * 2022-05-26 2022-06-28 云账户技术(天津)有限公司 基于FlexBox的页面布局方法、装置及电子设备

Cited By (2)

* Cited by examiner, † Cited by third party
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
CN104216691B (zh) 一种创建应用的方法及装置
WO2020048326A1 (zh) 一种界面显示方法、系统及终端设备
CN102929867A (zh) 用于自动化的文档翻译的技术
CN110851134A (zh) 低代码页面设计装置及页面设计方法
CN111984902A (zh) 可视化页面配置方法、系统、计算机设备和存储介质
CN108255923A (zh) 图像展示方法、设备及电子设备
CN111881662A (zh) 表单生成方法、装置、处理设备及存储介质
CN107092475A (zh) 一种交互控件的调用方法及装置
CN104820589A (zh) 一种动态适配网页的方法及其装置
WO2015112131A1 (en) Multistage customizing of web-based application in a browser independent of platform and operating system
CN101135966A (zh) 一种基于命令行的图形界面开发方法及系统
CN109471580B (zh) 一种可视化3d课件编辑器及课件编辑方法
CN107066244B (zh) 一种移动终端应用界面的生成方法和装置
CN103530338A (zh) 在计算设备上进行页面渲染的框架及生成页面的方法
CN105824517A (zh) 一种桌面的实现方法和装置
CN109446503A (zh) 文档内容导出方法和装置
CN109101294A (zh) 数据采集方法及插件、电子设备及存储介质
CN112711401A (zh) 基于组件化工程的iOS界面自上而下的布局方法及系统
CN102945122B (zh) 为移动终端提供适配的阅读界面的方法以及客户端
US9501457B2 (en) Creating a communication editable in a browser independent of platform and operating system
CN109766095A (zh) 一种活动专题页创建方法、相关装置和设备
CN103226475B (zh) 转码时实现控件替换的方法及装置
CN108255916A (zh) 网页页面呈现的方法、设备、客户端装置和电子设备
CN108021317B (zh) 用于屏幕编辑的方法及装置
Mijailovic et al. A retrospective on user interface development technology

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