WO2017113732A1 - 用户界面控件的布局方法及系统、控制方法及系统 - Google Patents
用户界面控件的布局方法及系统、控制方法及系统 Download PDFInfo
- Publication number
- WO2017113732A1 WO2017113732A1 PCT/CN2016/089570 CN2016089570W WO2017113732A1 WO 2017113732 A1 WO2017113732 A1 WO 2017113732A1 CN 2016089570 W CN2016089570 W CN 2016089570W WO 2017113732 A1 WO2017113732 A1 WO 2017113732A1
- Authority
- WO
- WIPO (PCT)
- Prior art keywords
- control
- child
- relative
- relative layout
- container
- Prior art date
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
Definitions
- the present patent application relates to the field of multimedia technologies, and in particular, to a method, system, control method and system for laying out user interface controls in the field of multimedia technology.
- the video application can play a large amount of video for the user, for example, the user can watch the live broadcast, the game, the TV program, etc. by using the video application.
- various 3D controls such as application icons corresponding to installed applications on the video playing device
- various 3D controls are displayed in the interface of the video playing device.
- video player equipment commonly used in people's lives: smart TV.
- smart TVs can only select and control the controls in the interface by using a remote control device, such as using a remote control device to select an application icon to enter the application desired by the user.
- users may have various operational requirements for 3D controls in the interface, such as 3D control movement, 3D control management, and review of movie reviews. Wait.
- UI is the abbreviation of User Interface
- Chinese interpretation is user interface
- a mobile phone-based virtual reality VR VR is a short name of Virtual Reality
- a Chinese definition is a virtual reality
- the current method of creating 3D controls in mobile-based virtual reality VR applications is relatively simple and cumbersome.
- the purpose of some embodiments of the present invention is to provide a layout method, system, control method, and system for a user interface control, so that UI controls of different sizes or types can be generated one by one through layout layout, and UIs of different sizes or types are generated. Controls can be nested with each other, so that different UI interfaces can be quickly implemented to meet the different needs of various products for UI control layout.
- an embodiment of the present invention provides a layout method of a user interface control, including the following steps: creating a relative layout container; wherein a relative layout container is used to hold a child control, and a child control is a relative layout container. Or a normal control; specify the properties of the child control for the relative layout container; generate the child control; if the child control is a relative layout container, repeat the above steps until all the child controls in the relative layout container are normal controls.
- An embodiment of the present invention further provides a method for controlling a user interface control, including the steps of: acquiring a preset operation event; and modifying a unique attribute of a child control in the relative layout container that responds to the preset operation according to the obtained preset operation.
- the user interface controls are laid out using the layout method of the user interface controls described above.
- An embodiment of the present invention further provides a layout system of a user interface control, including: a creation module, an attribute specification module, a child control generation module, and a judgment module; the creation module is used to create a relative layout container; wherein, the relative layout container is used In the sub-control, the child control is a relative layout container or a normal control; the property specification module is used to specify the properties of the child control for the relative layout container;
- the control generation module is configured to generate a child control;
- the determination module is configured to determine whether the child control is a relative layout container, and when the child control is a relative layout container, triggering to create a module, and the attribute specifying module and the child control generating module repeatedly create a relative layout container and Child controls until all child controls within the relative layout container are normal controls.
- One embodiment of the present invention provides a computer readable storage medium comprising computer executable instructions that, when executed by at least one processor, cause the processor to perform the above method.
- the embodiment of the present invention further provides a control system for a user interface control, comprising: a listening module and a modifying module; the monitoring module is configured to acquire a preset operation event; and the modifying module is configured to modify the relative layout container according to the obtained preset operation.
- a unique property of the child control responsive to the preset operation wherein the user interface control is laid out using the layout system of the user interface control described above.
- Embodiments of the present invention by creating a relative layout container, by applying a relative layout container created by a plurality of different types or sizes of child controls, can pass different sizes or types of child controls through the layout.
- the layout is generated one by one, which greatly simplifies the cumbersome process of creating irregular size 3D controls in the scene. Specifying the properties of the child control for the relative layout container, generating the child control, so that the child control is generated in a relatively simple manner, and is beneficial to the control and modification of the child control, and avoids errors caused by repeated development of the user interface control.
- the child control is a relative layout container, continue to specify the properties of the child control for the relative layout container, and generate child controls until all child controls in the relative layout container are normal controls. Therefore, multiple sub-controls of different sizes or types can be nested with each other, so that UI interfaces of different rules can be quickly implemented to meet the different requirements of various products for the arrangement of sub-controls.
- the following substeps are included: specifying the type of the child control for the relative layout container, and automatically numbering the child controls; a reference control that specifies the position of the child control ; Sets the position offset and size of the child control relative to the reference control.
- the position offset is a first preset distance offset from the position of the reference control.
- the step of specifying a reference control for the child control if the child control is not the first child control of the relative layout container, then the other child controls that are in the same relative layout container as the child control are referenced controls.
- the position offset is a second preset distance offset from the edge closer to the reference control and the child control.
- the method further includes the steps of: creating a menu object in the scene; and the menu object and the relative layout container Bind and set the position of the relative layout container in the scene. Therefore, different scenes can be corresponding to different menu objects, and the corresponding relationship is simple and clear, and is not easy to make mistakes, and the positional relationship with respect to the layout container is relatively clear.
- the relative layout container acquires the preset operation event and passes it to the child control; or the child control acquires the preset operation event and transmits the result to the relative layout container; or Relative layout containers and child controls get preset action events and pass them to each other.
- the preset operation event can be obtained in any way according to the needs of the developer, so that The way to get preset operational events is more diverse, which can meet the needs of different designers.
- FIG. 1 is a flow chart of a layout method of a user interface control according to a first embodiment of the present invention
- FIG. 2 is a schematic diagram showing the position of a first child control in a relative layout container according to the first embodiment of the present invention
- FIG. 3 is a schematic diagram showing the position of a first child control in a relative layout container according to the first embodiment of the present invention
- FIG. 4 is a block diagram of a layout system of a user interface control in accordance with a second embodiment of the present invention.
- a first embodiment of the present invention relates to a layout method of a user interface control.
- the specific process is shown in Figure 1, which includes the following steps:
- step 101 a relative layout container is created.
- the Relative Container class can be created as a relative layout container for holding different UIs of different types and sizes (UI is the abbreviation of User Interface), and the sub-controls are contained therein.
- Child controls can be relative layout containers or normal controls.
- the child control held by the relative layout container is a plurality of user interface controls of different types and/or sizes; wherein the normal control includes any one of the following: a rule layout container, a button control, a text control, or a picture control.
- a menu object is created in the scene. Create a menu object in the scene according to the needs of the specific scene UI interface.
- step 103 the menu object is bound to the relative layout container, and the position of the relative layout container in the scene is set.
- the position of the relative layout container in the scene can be set in any position in the UI scene according to the actual design requirements. This embodiment does not limit this.
- Step 104 specifying the properties of the child control for the relative layout container.
- the attributes of the child control include but are not limited to: type, reference position, position offset and size.
- the relative control container can obtain the number of the child control to control or modify, which can strengthen the management of the UI menu, and the level of the child controls of each level is relatively clear.
- the reference control is set by determining whether the child control is the first child control of the relative layout container, and the position of the reference control is used as the reference position.
- the positional offset of a child control is based on its parent object (that is, the relative layout container it is in). as shown in picture 2. Assuming that the relative layout container position is O, the position relative to the relative layout container is specified as the position of the reference control, and the position offset is expressed as offset (OA, OB, OC), then the position of the first child control is P (OA, OB) , OC).
- the position offset is a preset value indicating an offset of the position of the sub-controll relative to the reference control by a first preset distance. First preset distance It can be set according to the actual layout requirements of the control.
- the second preset distance is a position offset.
- the positional offset of the child controls here is based on the edge position of its position reference control.
- the second preset distance can be set according to the actual layout requirements of the control.
- the position of the first child control is P(a,b,c)
- the position of the second child control is P1(d,e,f)
- the position of the third child control For P2(g,h,i)
- the second child control is based on the position of the first child control
- the third child control can be based on the position of the first child control or the two child controls.
- the second preset distance set for the first sub-control is (b1a1, b2b1, a1a2), that is, the offset of the position of the second sub-control relative to the position of the first sub-control is (b1a1, b2b1, A1a2).
- b1a1 represents the distance offset from the right edge of the first child control (X direction in FIG. 3)
- b2b1 represents the distance offset from the upper edge of the first child control of P (Y direction in FIG. 3)
- a1a2 represents the distance offset from the outer edge of the first child control (Z direction in Fig. 3).
- the position P1 of the second child control can be expressed as:
- P1(d,e,f) P(a,b,c)+sizep(pw/2,ph/2,0)+offset(b1a1,b2b1,a1a2)+sizep1(p1w/2,p1h/2, 0).
- pw, ph, p1w, and p1h represent the dimensions of the first control and the second child control, respectively.
- the reference control is the first child control for the third child control
- the second preset distance is (-c2c1, -d1c2, -d2d1), indicating that the left, lower, and inner edges of the first child control are Offset by a certain distance
- the position P2 of the third child control can be expressed as:
- P2(g,h,i) P(a,b,c)-sizep(pw/2,ph/2,0)+offset(-c2c1,-d1c2,-d2d1)-sizep2(p2w/2,p2h /2,0).
- p2w, p2h represent the size of the third child control, respectively.
- the child control size can be a two-dimensional vector representing the width and height of the child control.
- step 105 After completing the attribute setting of the child control, proceed to step 105 to generate the child control.
- Step 106 Determine whether the child control is a relative layout container. If the child control is a relative layout container, then step 104 is executed until the child controls in the relative layout container are normal controls. At this point, the UI interface is created.
- a relative layout container by creating a relative layout container, using the created relative layout container to hold a plurality of sub-controls of different types or sizes, different sizes or types of sub-controls can be generated one by one through the layout arrangement. Specifying the properties of the child control for the relative layout container, and generating the child control, so that the child control is generated in a relatively simple manner, and is beneficial to the control and modification of the child control, and avoids errors caused by repeated development of the user interface control.
- the child control is a relative layout container, continue to specify the properties of the child control for the relative layout container, and generate child controls until all child controls in the relative layout container are normal controls. Therefore, multiple sub-controls of different sizes or types can be nested with each other, so that UI interfaces of different rules can be quickly implemented to meet the different requirements of various products for the arrangement of sub-controls.
- a second embodiment of the present invention relates to a layout system of a user interface control.
- the system includes a creation module, an attribute specification module, a child control generation module, and a determination module.
- the creation module is used to create a relative layout container; the relative layout container is used to hold the child control, and the child control is a relative layout container or a normal control.
- Attribute specification module is used for relative layout
- the container specifies the properties of the child control.
- the child control generation module is used to generate child controls.
- the determining module is configured to determine whether the child control is a relative layout container, and when the child control is a relative layout container, triggering to create a module, and the attribute specifying module and the child control generating module repeatedly create a relative layout container and its child controls until the relative layout container All child controls are normal controls.
- the present embodiment is a system embodiment corresponding to the first embodiment, and the present embodiment can be implemented in cooperation with the first embodiment.
- the related technical details mentioned in the first embodiment are still effective in the present embodiment, and are not described herein again in order to reduce repetition. Accordingly, the related art details mentioned in the present embodiment can also be applied to the first embodiment.
- each module involved in this embodiment is a logic module.
- a logical unit may be a physical unit, a part of a physical unit, or multiple physical entities. A combination of units is implemented.
- the present embodiment does not introduce a unit that is not closely related to solving the technical problem proposed by the present invention, but this does not mean that there are no other units in the present embodiment.
- a third embodiment of the present invention relates to a method for controlling a user interface control, the method comprising the steps of: acquiring a preset operation event; and modifying a unique feature of the child control in the relative layout container in response to the preset operation according to the obtained preset operation An attribute; wherein the user interface control is laid out by using a layout method of the user interface control described in the first embodiment.
- the relative layout container can acquire a preset operation event and pass it to the child control.
- the child control can get the preset action event and pass it to the relative layout container.
- relative layout containers and child controls can get preset action events and pass them to each other. Therefore, the manner of obtaining preset operation events is more diverse, and thus can meet the needs of different designers.
- the preset operation event is obtained, and the unique attribute of the sub-control in the composite control that responds to the preset operation is modified according to the obtained preset operation; so that the modification and control manner of the unique attribute of each sub-control is relatively simple. And it is not easy to make mistakes during actual development or operation.
- a fourth embodiment of the present invention relates to a control system for a user interface control, the system includes: a listening module and a modifying module; the monitoring module is configured to acquire a preset operation event; and the modifying module is configured to modify the relative layout according to the obtained preset operation.
- the present embodiment is a system embodiment corresponding to the third embodiment, and the present embodiment can be implemented in cooperation with the third embodiment.
- the related technical details mentioned in the third embodiment are still effective in the present embodiment, and are not described herein again in order to reduce repetition. Accordingly, the related art details mentioned in the present embodiment can also be applied to the third embodiment.
- each module involved in this embodiment is a logic module.
- a logical unit may be a physical unit, a part of a physical unit, or multiple physical entities. A combination of units is implemented.
- the present embodiment does not introduce a unit that is not closely related to solving the technical problem proposed by the present invention, but this does not mean that there are no other units in the present embodiment.
- the steps of a method or algorithm described in connection with the embodiments disclosed herein may be embodied directly in hardware, in a software module executed by a processor, or in a combination of the two.
- Software modules can reside in random access memory (RAM), flash memory, read only memory (ROM), programmable read only memory (PROM), erasable read only memory (PROM), erasable and programmable only Read memory (EPROM), electrically erasable programmable read only memory (EEPROM), registers, hard disk, removable disk, compact disk read only memory (CD-ROM), or any other form known in the art Storage media.
- the storage medium may be integral to the processor.
- the processor and the storage medium can reside in an application specific integrated circuit (ASIC).
- the ASIC can reside in a computing device or user terminal, or the processor and storage medium can reside as discrete components in a computing device or user terminal.
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
一种用户界面控件的布局方法及系统、控制方法及系统，该用户界面控件的布局方法，包含以下步骤：创建一个相对布局容器；其中，相对布局容器用于盛放子控件，子控件为相对布局容器或者普通控件；为相对布局容器指定子控件的属性；生成子控件；如果子控件为相对布局容器，则重复上述步骤，直到相对布局容器内的所有子控件均为普通控件。该布局方法及系统、控制方法及系统可以将多个不同尺寸或者类型的UI控件通过布局排布逐一生成，而且不同尺寸或者类型的UI控件之间可以相互嵌套，从而能够快速的实现不同规则的UI界面，以满足各种产品对UI控件排布的不同需求。
Description
交叉引用
本申请要求于2015年12月28日提交中国专利局、申请号为201511019991.9的中国专利申请的优先权，其全部内容通过引用结合在本申请中。
本专利申请涉及多媒体技术领域，特别涉及多媒体技术领域中的用户界面控件的布局方法及系统、控制方法及系统。
随着科学技术的不断发展以及多媒体技术的不断进步，用于播放视频的应用软件的种类也越来越多、功能也越来越强大，用户可以在移动终端中安装视频应用，而后通过视频应用观看视频，且伴随着互联网基础设施的完善，网速的增加和上网成本的降低，利用移动终端在网上观看视频的用户的数量也越来越多。视频应用可以为用户播放大量的视频，例如用户可以利用视频应用观看直播、比赛、卫视节目等。
发明人在实现本发明的过程中发现，在视频播放的界面中会显示各种3D控件，如视频播放设备上已安装的应用对应的应用图标等。比如人们生活中常用的视频播放器设备：智能电视。目前的智能电视往往都是只能通过使用遥控设备来对界面中的控件进行选择操作，如使用遥控设备来选择某一应用图标以进入用户需要的应用。但是在实际的应用中，用户可能会对界面中的3D控件有多种多样的操作需求，例如3D控件移动，3D控件管理，查看影评
等。而且当前基于手机的虚拟现实应用中存在着大量与影片信息相关的3D UI控件(UI是User Interface的简称，中文释义为用户界面)。当前基于手机的虚拟现实VR(VR是Virtual Reality的简称，中文释义为虚拟现实)应用中创建3D控件，一般都是根据特定场景UI界面的需要，在该场景的UI菜单里单独创建每个3D控件。但是当前在基于手机的虚拟现实VR应用中创建3D控件的方法比较单一和繁琐。
发明内容
本发明部分实施例的目的在于提供一种用户界面控件的布局方法及系统、控制方法及系统，使得多个不同尺寸或者类型的UI控件可以通过布局排布逐一生成，而且不同尺寸或者类型的UI控件之间可以相互嵌套，从而能够快速的实现不同规则的UI界面，以满足各种产品对UI控件排布的不同需求。
为解决上述技术问题，本发明的实施方式提供了一种用户界面控件的布局方法，包含以下步骤：创建一个相对布局容器；其中，相对布局容器用于盛放子控件，子控件为相对布局容器或者普通控件；为相对布局容器指定子控件的属性；生成子控件；如果子控件为相对布局容器，则重复上述步骤，直到相对布局容器内的所有子控件均为普通控件。
本发明的实施方式还提供了一种用户界面控件的控制方法，包含以下步骤：获取预设操作事件；根据获取的预设操作，修改相对布局容器中响应该预设操作的子控件的特有属性；其中，用户界面控件采用以上所描述的用户界面控件的布局方法进行布局。
本发明的实施方式还提供了一种用户界面控件的布局系统，包含：创建模块，属性指定模块，子控件生成模块和判断模块；创建模块用于创建一个相对布局容器；其中，相对布局容器用于盛放子控件，子控件为相对布局容器或者普通控件；属性指定模块用于为相对布局容器指定子控件的属性；子
控件生成模块用于生成子控件；判断模块用于判断子控件是否为相对布局容器，并在子控件为相对布局容器时，触发创建模块，属性指定模块和子控件生成模块重复创建相对布局容器及其子控件，直到相对布局容器内的所有子控件均为普通控件。
本发明的一个实施例提供了一种计算机可读存储介质，包括计算机可执行指令，所述计算机可执行指令在由至少一个处理器执行时致使所述处理器执行上述方法。
本发明的实施方式还提供了一种用户界面控件的控制系统，包含：监听模块和修改模块；监听模块用于获取预设操作事件；修改模块用于根据获取的预设操作，修改相对布局容器中响应该预设操作的子控件的特有属性；其中，用户界面控件采用以上所描述的用户界面控件的布局系统进行布局。
本发明的实施方式相对于现有技术而言，通过创建一个相对布局容器，应用所创建的相对布局容器盛放多个不同类型或尺寸的子控件，可以将不同尺寸或者类型的子控件通过布局排布逐一生成，大幅简略了在场景中创建不规则尺寸3D控件的繁琐过程。为相对布局容器指定子控件的属性，生成子控件，从而使子控件的生成方式较为简单，而且有利于对子控件的控制和修改，避免重复开发用户界面控件时所引起的差错。另外，如果子控件为相对布局容器，则继续为相对布局容器指定子控件的属性，生成子控件，直到相对布局容器内的所有子控件均为普通控件。因此，多个不同尺寸或者类型的子控件之间可以相互嵌套，从而能够快速的实现不同规则的UI界面，以满足各种产品对子控件排布的不同需求。
在一个实施例中，在为相对布局容器指定子控件的属性的步骤中，包含以下子步骤：为相对布局容器指定子控件的类型，并自动为子控件编号；为子控件指定位置的参考控件；设置子控件相对于参考控件的位置偏移量和尺寸。通过上述方法，利用编号对与之相对应的子控件进行控制或修改，使得
对各子控件的控制或修改较为简单、准确且不易出错。通过这种方式对子控件进行布局，可以简略在场景中创建不同规则子控件的繁琐过程，有利于对场景中UI界面的整体以及单个子控件的控制和修改，大大提高了开发此虚拟现实应用的图形引擎的可复用性。
在一个实施例中，在为子控件指定位置的参考控件的步骤中，如果子控件为相对布局容器的第一个子控件，则指定相对布局容器为参考控件；在设置子控件相对于参考控件的位置偏移量的步骤中，位置偏移量为相对于参考控件的位置的偏移第一预设距离。通过这种方式对子控件进行布局，使得子控件的布局方式更加简单易于实现，且易于开发人员修改和二次开发，可以提高子控件的创建效率。
在一个实施例中，在为子控件指定位置的参考控件的步骤中，如果子控件并非相对布局容器的第一个子控件，则指定与子控件位于同一相对布局容器的其他子控件为参考控件；在设置子控件相对于参考控件的位置偏移量的步骤中，位置偏移量为相对于参考控件与子控件相距较近的边缘各偏移第二预设距离。通过这种方式对子控件进行布局，使得子控件的布局方式更加简单易于实现，且易于开发人员修改和二次开发，可以提高子控件的创建效率。
在一个实施例中，在创建一个相对布局容器的步骤之后，在为相对布局容器指定子控件的属性的步骤之前，还包含以下步骤：在场景中创建一个菜单对象；将菜单对象与相对布局容器绑定，并设置相对布局容器在场景中的位置。从而可以将不同的场景对应于不同的菜单对象，其对应关系简单明了且不易出错，而且相对布局容器的位置关系较为明确。
在一个实施例中，在获取预设操作事件的步骤中，相对布局容器获取预设操作事件，并传递给子控件；或者，子控件获取预设操作事件，并传递给相对布局容器；或者，相对布局容器和子控件均获取预设操作事件，并相互传递。可以根据开发人员的需求通过任意一种方式获取预设操作事件，使得
获取预设操作事件的方式较为多样化，进而可以满足不同设计者的需求。
图1是根据本发明第一实施方式用户界面控件的布局方法的流程图；
图2是根据本发明第一实施方式子控件为所在相对布局容器中第一个子控件的位置示意图；
图3是根据本发明第一实施方式子控件不为所在相对布局容器中第一个子控件的位置示意图；
图4是根据本发明第二实施方式用户界面控件的布局系统的方框图。
为使本发明部分实施例的目的、技术方案和优点更加清楚，下面将结合附图对本发明的各实施方式进行详细的阐述。然而，本领域的普通技术人员可以理解，在本发明各实施方式中，为了使读者更好地理解本申请而提出了许多技术细节。但是，即使没有这些技术细节和基于以下各实施方式的种种变化和修改，也可以实现本申请所要求保护的技术方案。
本发明的第一实施方式涉及一种用户界面控件的布局方法。具体流程如图1所示，包含以下步骤：
步骤101，创建一个相对布局容器。
具体地说，可以创建Relative Container类作为相对布局容器，用于盛放多个不同类型、不同尺寸的不同UI(UI是User Interface的简称，中文释义为用户界面)子控件，其中所盛放的子控件可以为相对布局容器或者普通控件。
需要说明的是，相对布局容器盛放的子控件为多个类型和/或尺寸不同的用户界面控件；其中，普通控件包含以下任意一种：规则布局容器、按钮控件、文字控件或图片控件。
步骤102，在场景中创建一个菜单对象。根据特定场景UI界面的需要，在该场景中创建一个菜单对象。
步骤103，将菜单对象与相对布局容器绑定，并设置相对布局容器在场景中的位置。其中，相对布局容器在场景中的位置可以根据实际设计的需求设置在UI场景中的任意位置，本实施方式对此不做限制。
步骤104，为相对布局容器指定子控件的属性。其中，子控件的属性包括但不限于：类型，基准位置，位置偏移量和尺寸。
首先，可以为相对布局容器指定子控件的类型，并自动为子控件编号。
对于每个子控件的控制或者修改，可以通过此相对布局容器取得子控件的编号来进行控制或者修改，可以加强UI菜单的管理，且各级子控件的层次较为分明。
其次，为子控件指定基准位置及其位置偏移量。具体通过判断子控件是否是相对布局容器的第一个子控件来设定参考控件，并以参考控件的位置为基准位置。
如果子控件是相对布局容器的第一个子控件，则指定相对布局容器为参考控件，并设置位置偏移量为相对于参考控件的位置的偏移第一预设距离。
具体地说，子控件的位置偏移量是以其父物体(即其所在的相对布局容器)为基准的。如图2所示。假设相对布局容器位置为O，指定相对布局容器的位置O为参考控件的位置，位置偏移量表示为offset(OA，OB，OC)，那么第一个子控件的位置为P(OA，OB，OC)。其中，位置偏移量为一预设值，说明子控件相对于参考控件的位置的偏移第一预设距离。第一预设距离
可以根据控件的实际布局需求进行设定。
如果子控件并非相对布局容器的第一个子控件，则指定与子控件位于同一相对布局容器的其他子控件为参考控件，并设置相对于参考控件与该子控件相距较近的边缘各偏移第二预设距离为位置偏移量。这里的子控件的位置偏移是基于其位置参考控件的边缘位置而言的。第二预设距离可以根据控件的实际布局需求进行设定。
具体地说，如图3所示，如果第一个子控件的位置为P(a，b，c)，第二个子控件的位置为P1(d，e，f)，第三个子控件的位置为P2(g，h，i),那么第二个子控件以第一个子控件的位置为基准，第三个子控件则可以以第一个子控件或者笫二个子控件的位置为基准。
假设为第一个子控件设定的第二预设距离为(b1a1，b2b1，a1a2)，即第二个子控件的位置相对于第一个子控件的位置的偏移量为(b1a1，b2b1，a1a2)。其中，b1a1表示相对于第一个子控件的右边缘(图3中X方向)偏移的距离，b2b1表示相对于P第一个子控件的上边缘(图3中Y方向)偏移的距离，a1a2表示相对于第一个子控件的外边缘(图3中Z方向)偏移的距离。那么，第二个子控件的位置P1可以表示为：
P1(d，e，f)＝P(a，b，c)+sizep(pw/2，ph/2，0)+offset(b1a1，b2b1，a1a2)+sizep1(p1w/2，p1h/2，0)。
式中，pw，ph，p1w，p1h分别表示第一个控件和第二个子控件的尺寸。
假设为第三个子控件设定参考控件为第一个子控件，并且第二预设距离为(-c2c1，-d1c2，-d2d1)，表示以第一个子控件的左、下、里边缘各偏移一定的距离，第三个子控件的位置P2可表示为：
P2(g，h，i)＝P(a，b，c)-sizep(pw/2，ph/2，0)+offset(-c2c1，-d1c2，-d2d1)-sizep2(p2w/2，p2h/2，0)。
式中，p2w，p2h分别表示第三个子控件的尺寸。
最后，设置子控件的尺寸，比如，子控件尺寸可以是一个二维矢量，表示子控件的宽和高。
在完成子控件的属性设置之后，进入步骤105，生成该子控件。
步骤106，判断子控件是否为相对布局容器。如果子控件为相对布局容器，则返回执行步骤104，直到相对布局容器内的子控件均为普通控件为止。至此，UI界面创建结束。
在本实施方式中，通过创建一个相对布局容器，采用所创建的相对布局容器盛放多个不同类型或尺寸的子控件，可以将不同尺寸或者类型的子控件通过布局排布逐一生成。为相对布局容器指定子控件的属性，并生成子控件，从而使子控件的生成方式较为简单，而且有利于对子控件的控制和修改，避免重复开发用户界面控件时所引起的差错。另外，如果子控件为相对布局容器，则继续为相对布局容器指定子控件的属性，生成子控件，直到相对布局容器内的所有子控件均为普通控件。因此，多个不同尺寸或者类型的子控件之间可以相互嵌套，从而能够快速的实现不同规则的UI界面，以满足各种产品对子控件排布的不同需求。
此外，值得一提的是，在实际基于虚拟现实的应用中，有一套虚拟现实三维图形引擎来对其图形方面的功能进行开发。故而，在该图形引擎中添加相对布局容器类，并实现其功能与基础3D UI控件以及影片数据库的接口，从而实现快速布局不规则的UI界面，大幅简略了在场景中创建不规则尺寸3D控件的的繁琐过程。
本发明的第二实施方式涉及一种用户界面控件的布局系统，如图4所示，该系统包含创建模块，属性指定模块，子控件生成模块和判断模块。
创建模块用于创建一个相对布局容器；其中，相对布局容器用于盛放子控件，子控件为相对布局容器或者普通控件。属性指定模块用于为相对布局
容器指定子控件的属性。子控件生成模块用于生成子控件。判断模块用于判断子控件是否为相对布局容器，并在子控件为相对布局容器时，触发创建模块，属性指定模块和子控件生成模块重复创建相对布局容器及其子控件，直到相对布局容器内的所有子控件均为普通控件。
不难发现，本实施方式为与第一实施方式相对应的系统实施例，本实施方式可与第一实施方式互相配合实施。第一实施方式中提到的相关技术细节在本实施方式中依然有效，为了减少重复，这里不再赘述。相应地，本实施方式中提到的相关技术细节也可应用在第一实施方式中。
值得一提的是，本实施方式中所涉及到的各模块均为逻辑模块，在实际应用中，一个逻辑单元可以是一个物理单元，也可以是一个物理单元的一部分，还可以以多个物理单元的组合实现。此外，为了突出本发明的创新部分，本实施方式中并没有将与解决本发明所提出的技术问题关系不太密切的单元引入，但这并不表明本实施方式中不存在其它的单元。
本发明第三实施方式涉及一种用户界面控件的控制方法，该方法包含以下步骤：获取预设操作事件；根据获取的预设操作，修改相对布局容器中响应该预设操作的子控件的特有属性；其中，用户界面控件采用第一实施方式所描述的用户界面控件的布局方法进行布局。
值得一提的是，在获取预设操作事件的步骤中，相对布局容器可以获取预设操作事件，并传递给子控件。或者，子控件可以获取预设操作事件，并传递给相对布局容器。或者，相对布局容器和子控件均可以获取预设操作事件，并相互传递。从而使获取预设操作事件的方式较为多样化，进而可以满足不同设计者的需求。
本实施方式中，通过获取预设操作事件，并根据获取的预设操作修改复合控件中响应该预设操作的子控件的特有属性；使得对各子控件特有属性的修改和控制方式较为简单，且实际开发或者操作过程中不易出错。
本发明第四实施方式涉及一种用户界面控件的控制系统，该系统包含：监听模块和修改模块；监听模块用于获取预设操作事件；修改模块用于根据获取的预设操作，修改相对布局容器中响应该预设操作的子控件的特有属性；其中，用户界面控件采用第二实施方式所描述的用户界面控件的布局系统进行布局。
不难发现，本实施方式为与第三实施方式相对应的系统实施例，本实施方式可与第三实施方式互相配合实施。第三实施方式中提到的相关技术细节在本实施方式中依然有效，为了减少重复，这里不再赘述。相应地，本实施方式中提到的相关技术细节也可应用在第三实施方式中。
值得一提的是，本实施方式中所涉及到的各模块均为逻辑模块，在实际应用中，一个逻辑单元可以是一个物理单元，也可以是一个物理单元的一部分，还可以以多个物理单元的组合实现。此外，为了突出本发明的创新部分，本实施方式中并没有将与解决本发明所提出的技术问题关系不太密切的单元引入，但这并不表明本实施方式中不存在其它的单元。
结合本文中所揭示的实施例而描述的方法或算法的步骤可直接体现于硬件中，由处理器执行的软件模块中或所述两者的组合中。软件模块可驻留在随机存取存储器(RAM)、快闪存储器、只读存储器(ROM)、可编程只读存储器(PROM)，可擦除只读存储器(PROM)、可擦除可编程只读存储器(EPROM)、电可擦除可编程只读存储器(EEPROM)、寄存器、硬盘、可装卸式盘、压缩光盘只读存储器(CD-ROM)或此项技术中已知的任一其他形式的存储媒体。在替代方案中，存储媒体可与处理器成一体式。处理器及存储媒体可驻留在专用集成电路(ASIC)中。ASIC可驻留在计算装置或用户终端中，或者，处理器及存储媒体可作为离散组件驻留在计算装置或用户终端中。
本领域的普通技术人员可以理解，上述各实施方式是实现本发明的具体实施例，而在实际应用中，可以在形式上和细节上对其作各种改变，而不偏
离本发明的精神和范围。
Claims (11)
- 一种用户界面控件的布局方法，包含以下步骤：创建一个相对布局容器；其中，所述相对布局容器用于盛放子控件，所述子控件为相对布局容器或者普通控件；为所述相对布局容器指定子控件的属性；生成所述子控件；如果所述子控件为相对布局容器，则重复上述步骤，直到相对布局容器内的所有子控件均为普通控件。
- 根据权利要求1所述的用户界面控件的布局方法，其中，在所述为所述相对布局容器指定子控件的属性的步骤中，包含以下子步骤：为所述相对布局容器指定子控件的类型，并自动为所述子控件编号；为所述子控件指定位置的参考控件；设置所述子控件相对于参考控件的位置偏移量；设置所述子控件的尺寸。
- 根据权利要求2所述的用户界面控件的布局方法，其中，在所述为所述子控件指定位置的参考控件的步骤中，如果所述子控件为所述相对布局容器的第一个子控件，则指定所述相对布局容器为参考控件；在所述设置所述子控件相对于参考控件的位置偏移量的步骤中，所述位置偏移量为相对于所述参考控件的位置的偏移第一预设距离。
- 根据权利要求2所述的用户界面控件的布局方法，其中，在所述为所述子控件指定位置的参考控件的步骤中，如果所述子控件并非所述相对布局容器的第一个子控件，则指定与所述子控件位于同一相对布局容器的其他子控件为参考控件；在所述设置所述子控件相对于参考控件的位置偏移量的步骤中，所述位置偏移量为相对于所述参考控件与所述子控件相距较近的边缘各偏移第二预设距离。
- 根据权利要求1至4中任一项所述的用户界面控件的布局方法，其中，在所述创建一个相对布局容器的步骤之后，在所述为所述相对布局容器指定子控件的属性的步骤之前，还包含以下步骤：在场景中创建一个菜单对象；将所述菜单对象与所述相对布局容器绑定，并设置所述相对布局容器在所述场景中的位置。
- 根据权利要求1至5中任一项所述的用户界面控件的布局方法，其中，所述相对布局容器盛放的子控件为多个类型和/或尺寸不同的用户界面控件；所述普通控件包含以下任意一种：规则布局容器、按钮控件、文字控件或图片控件。
- 一种用户界面控件的控制方法，包含以下步骤：获取预设操作事件；根据所述获取的预设操作，修改所述相对布局容器中响应该预设操作的子控件的特有属性；其中，所述用户界面控件采用权利要求1至6任意一项所述的用户界面控件的布局方法进行布局。
- 根据权利要求7所述的复合用户界面控件的控制方法，其中，在所 述获取预设操作事件的步骤中，所述相对布局容器获取所述预设操作事件，并传递给所述子控件；或者，所述子控件获取所述预设操作事件，并传递给所述相对布局容器；或者，所述相对布局容器和所述子控件均获取所述预设操作事件，并相互传递。
- 一种用户界面控件的布局系统，包含：创建模块，属性指定模块，子控件生成模块和判断模块；所述创建模块用于创建一个相对布局容器；其中，所述相对布局容器用于盛放子控件，所述子控件为相对布局容器或者普通控件；所述属性指定模块用于为所述相对布局容器指定子控件的属性；所述子控件生成模块用于生成所述子控件；所述判断模块用于判断所述子控件是否为相对布局容器，并在所述子控件为相对布局容器时，触发所述创建模块，所述属性指定模块和所述子控件生成模块重复创建相对布局容器及其子控件，直到相对布局容器内的所有子控件均为普通控件。
- 一种用户界面控件的控制系统，包含：监听模块和修改模块；所述监听模块用于获取预设操作事件；所述修改模块用于根据所述获取的预设操作，修改所述相对布局容器中响应该预设操作的子控件的特有属性；其中，所述用户界面控件采用权利要求9所述的用户界面控件的布局系统进行布局。
- 一种计算机可读存储介质，包括计算机可执行指令，所述计算机可执行指令在由至少一个处理器执行时致使所述处理器执行如权利要求1-8任 一项所述的方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| US15/242,890 US20170185567A1 (en) | 2015-12-28 | 2016-08-22 | User interface control layout method and electronic device |
Applications Claiming Priority (2)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201511019991.9 | 2015-12-28 | ||
| CN201511019991.9A CN105912314A (zh) | 2015-12-28 | 2015-12-28 | 用户界面控件的布局方法及系统、控制方法及系统 |
Related Child Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| US15/242,890 Continuation US20170185567A1 (en) | 2015-12-28 | 2016-08-22 | User interface control layout method and electronic device |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| WO2017113732A1 true WO2017113732A1 (zh) | 2017-07-06 |
Family
ID=56744256
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| PCT/CN2016/089570 WO2017113732A1 (zh) | 2015-12-28 | 2016-07-10 | 用户界面控件的布局方法及系统、控制方法及系统 |
Country Status (2)
| Country | Link |
|---|---|
| CN (1) | CN105912314A (zh) |
| WO (1) | WO2017113732A1 (zh) |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109582304A (zh) * | 2017-09-28 | 2019-04-05 | 北京迪文科技有限公司 | 一种基于人机交互系统的ui控件生成方法及装置 |
| CN110221832A (zh) * | 2019-04-29 | 2019-09-10 | 深圳康佳电子科技有限公司 | 一种恢复系统用户界面呈现控制方法、系统及存储介质 |
| CN114895995A (zh) * | 2022-03-15 | 2022-08-12 | 网易（杭州）网络有限公司 | 控件视图的生成方法、装置、电子设备及可读介质 |
Families Citing this family (10)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN106502704A (zh) * | 2016-10-31 | 2017-03-15 | 乐视控股（北京）有限公司 | 一种3d空间中用户界面控件的实现方法及其装置 |
| US11201906B2 (en) | 2017-08-29 | 2021-12-14 | International Business Machines Corporation | Providing instructions during remote viewing of a user interface |
| CN108304181A (zh) * | 2018-01-03 | 2018-07-20 | 浪潮通用软件有限公司 | 一种对界面进行修改的方法及装置 |
| CN109040822B (zh) * | 2018-07-16 | 2021-06-22 | 北京奇艺世纪科技有限公司 | 播放器配置方法及装置、存储介质 |
| CN109308199A (zh) * | 2018-09-04 | 2019-02-05 | 广州优视网络科技有限公司 | 一种控件集合的显示方法、装置及终端设备 |
| CN109766094A (zh) * | 2018-11-19 | 2019-05-17 | 苏州蜗牛数字科技股份有限公司 | 一种停靠式布局窗口框架创建方法 |
| WO2022068594A1 (zh) * | 2020-09-29 | 2022-04-07 | 华为技术有限公司 | 一种应用界面的布局方法及电子设备 |
| CN112347397A (zh) * | 2020-11-02 | 2021-02-09 | 杭州安恒信息技术股份有限公司 | 基于浏览器的数据可视化方法、装置及可读存储介质 |
| CN112925521A (zh) * | 2021-03-30 | 2021-06-08 | 中国建设银行股份有限公司 | 一种界面生成方法和装置 |
| CN114385061A (zh) * | 2022-01-12 | 2022-04-22 | 京东方科技集团股份有限公司 | 操作方法、装置、电子设备和计算机可读存储介质 |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101566949A (zh) * | 2009-05-18 | 2009-10-28 | 腾讯科技（深圳）有限公司 | 一种展示控件的装置及方法 |
| US20110167403A1 (en) * | 2009-12-04 | 2011-07-07 | Jason Townes French | Methods for platform-agnostic definitions and implementations of applications |
| CN103164204A (zh) * | 2011-12-15 | 2013-06-19 | 北京新媒传信科技有限公司 | 基于Symbian系统的用户界面的生成方法和系统 |
| CN103677839A (zh) * | 2013-12-17 | 2014-03-26 | 深圳市迈桥科技有限公司 | 一种跨移动终端的ui控件的生成方法及装置 |
Family Cites Families (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US8862986B2 (en) * | 2007-10-01 | 2014-10-14 | Hewlett-Packard Development Company, L.P. | Arranging graphic objects on a page with relative position based control |
| CN105094774A (zh) * | 2014-05-13 | 2015-11-25 | 大唐软件技术股份有限公司 | 一种终端系统界面的展示方法和装置 |
-
2015
- 2015-12-28 CN CN201511019991.9A patent/CN105912314A/zh active Pending
-
2016
- 2016-07-10 WO PCT/CN2016/089570 patent/WO2017113732A1/zh active Application Filing
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101566949A (zh) * | 2009-05-18 | 2009-10-28 | 腾讯科技（深圳）有限公司 | 一种展示控件的装置及方法 |
| US20110167403A1 (en) * | 2009-12-04 | 2011-07-07 | Jason Townes French | Methods for platform-agnostic definitions and implementations of applications |
| CN103164204A (zh) * | 2011-12-15 | 2013-06-19 | 北京新媒传信科技有限公司 | 基于Symbian系统的用户界面的生成方法和系统 |
| CN103677839A (zh) * | 2013-12-17 | 2014-03-26 | 深圳市迈桥科技有限公司 | 一种跨移动终端的ui控件的生成方法及装置 |
Cited By (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109582304A (zh) * | 2017-09-28 | 2019-04-05 | 北京迪文科技有限公司 | 一种基于人机交互系统的ui控件生成方法及装置 |
| CN110221832A (zh) * | 2019-04-29 | 2019-09-10 | 深圳康佳电子科技有限公司 | 一种恢复系统用户界面呈现控制方法、系统及存储介质 |
| CN110221832B (zh) * | 2019-04-29 | 2023-10-31 | 深圳康佳电子科技有限公司 | 一种恢复系统用户界面呈现控制方法、系统及存储介质 |
| CN114895995A (zh) * | 2022-03-15 | 2022-08-12 | 网易（杭州）网络有限公司 | 控件视图的生成方法、装置、电子设备及可读介质 |
| CN114895995B (zh) * | 2022-03-15 | 2024-03-15 | 网易（杭州）网络有限公司 | 控件视图的生成方法、装置、电子设备及可读介质 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN105912314A (zh) | 2016-08-31 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| WO2017113732A1 (zh) | 用户界面控件的布局方法及系统、控制方法及系统 | |
| CN103157281B (zh) | 一种二维游戏场景显示的方法和设备 | |
| US20170185567A1 (en) | User interface control layout method and electronic device | |
| WO2017113730A1 (zh) | 复合用户界面控件的生成和控制方法及系统 | |
| CN103970518B (zh) | 一种逻辑窗口的3d渲染方法和装置 | |
| WO2023093414A1 (zh) | 微应用的开发方法、装置、设备、存储介质及程序产品 | |
| TW201044274A (en) | Platform extensibility framework | |
| WO2017092430A1 (zh) | 基于虚拟现实应用的用户界面控件实现方法和装置 | |
| WO2023226371A1 (zh) | 目标对象交互式重现的控制方法、装置、设备及存储介质 | |
| CN104598436A (zh) | 一种三维图表的动态生成方法及装置 | |
| CN105045587A (zh) | 一种图片展示方法及装置 | |
| US20170185422A1 (en) | Method and system for generating and controlling composite user interface control | |
| CN113407284A (zh) | 导航界面的生成方法、装置、存储介质及电子设备 | |
| Walczak et al. | Semantic query-based generation of customized 3D scenes | |
| Lee et al. | A component based framework for mobile outdoor ar applications | |
| Choi et al. | k-MART: Authoring tool for mixed reality contents | |
| CN113485548B (zh) | 头戴显示设备的模型加载方法、装置及头戴显示设备 | |
| US9891791B1 (en) | Generating an interactive graph from a building information model | |
| CN108632438A (zh) | 一种生成app界面的方法和装置 | |
| CN114237398B (zh) | 基于虚幻引擎生成房间小地图的方法及装置、存储介质 | |
| CN111782740A (zh) | 座位数据处理方法、计算设备及存储介质 | |
| CN114265583B (zh) | Vr内容开发优化方法、装置、电子设备及可读存储介质 | |
| CN102930076A (zh) | 虚拟物体实时三维数据的交互方法 | |
| KR20130118761A (ko) | 증강 현실 생성을 위한 방법 및 시스템 | |
| CN115373558A (zh) | 投屏方法、装置、设备及存储介质 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| 121 | Ep: the epo has been informed by wipo that ep was designated in this application |
Ref document number: 16880530 Country of ref document: EP Kind code of ref document: A1 |
|
| NENP | Non-entry into the national phase |
Ref country code: DE |
|
| 122 | Ep: pct application non-entry in european phase |
Ref document number: 16880530 Country of ref document: EP Kind code of ref document: A1 |