WO2019037636A1 - 一种视图组件的布局方法及设备 - Google Patents
一种视图组件的布局方法及设备 Download PDFInfo
- Publication number
- WO2019037636A1 WO2019037636A1 PCT/CN2018/100650 CN2018100650W WO2019037636A1 WO 2019037636 A1 WO2019037636 A1 WO 2019037636A1 CN 2018100650 W CN2018100650 W CN 2018100650W WO 2019037636 A1 WO2019037636 A1 WO 2019037636A1
- Authority
- WO
- WIPO (PCT)
- Prior art keywords
- view component
- layout
- touched
- state
- view
- 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.)
- Ceased
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING OR CALCULATING; COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
-
- G—PHYSICS
- G06—COMPUTING OR CALCULATING; 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
Definitions
- the present application relates to the field of Internet information processing technology and computer technology, and in particular, to a method and a device for laying out a view component.
- the user interface (UI) of the client is the object operated by the user when the user interacts with the client.
- the UI is composed of view components.
- FIG. 1 it is a schematic diagram of a tile pattern that is common in the prior art.
- the view components in the UI adopt a horizontal linear layout (view component 1 and view component 2, view component 3 and view component 4, view component 5 and view component 6) / vertical linear layout (view The components 1, the view component 3 and the view component 5; the view component 2, the view component 4 and the view component 6) are arranged.
- the layout style is adopted to make the user's visual experience worse, and the product object cannot be selected well, and the user experience of the product object is reduced.
- the embodiment of the present application provides a method and a device for laying out a view component, which are used to solve the problem that a user's visual experience is poor in the tile style in the prior art.
- An embodiment of the present application provides a method for laying out a view component, including:
- Loading displays the first view component and the second view component, the first view component and the second view component being in a stacked layout.
- the embodiment of the present application further provides a method for laying out a view component, including:
- Loading displays the first view component and the second view component, the first view component and the second view component being in a stacked layout.
- the embodiment of the present application further provides a method for laying out a view component, including:
- Loading displays the first view component and the second view component, the first view component and the second view component being in a stacked layout.
- the embodiment of the present application further provides a layout device of a view component, including:
- Determining a unit determining a first view component and a second view component included in the layout container
- the processing unit loads and displays the first view component and the second view component, and the first view component and the second view component are in a stacked layout.
- the embodiment of the present application further provides a layout device of a view component, including:
- Determining a unit determining a first view component and a second view component included in the layout container, wherein a spacing between the first view component and the second view component is a negative value
- the processing unit loads and displays the first view component and the second view component, and the first view component and the second view component are in a stacked layout.
- the embodiment of the present application further provides a layout device of a view component, including:
- Determining a unit determining a first view component and a second view component included in the layout container, wherein the first view component and the second view component create a mask layer according to the set path;
- the processing unit loads and displays the first view component and the second view component, and the first view component and the second view component are in a stacked layout.
- the technical solution provided by the embodiment of the present application can effectively realize the cascading layout between different view components in the layout container, thereby effectively improving the visual effect of the user, and adding different view components compared with the tile layout.
- the compactness between the display of a certain attribute of the product object enables the user to quickly determine the difference and enhance the user experience of the product object.
- FIG. 1 is a schematic view of a tile pattern that is common in the prior art
- FIG. 2 is a schematic flowchart of a method for laying out a view component according to an embodiment of the present application
- FIG. 2(a) is a schematic diagram of a drawing path of a view component according to an embodiment of the present application
- FIG. 2(b) is a schematic diagram of a drawing path of a view component according to an embodiment of the present application
- FIG. 3 is a schematic diagram of a stacked layout provided by an embodiment of the present application.
- FIG. 3(a) is a schematic exploded view of a view assembly in the stacked layout shown in FIG. 3 according to an embodiment of the present application;
- FIG. 3(b) is a schematic view showing a contracted state of the view assembly in the stacked layout shown in FIG. 3 according to an embodiment of the present application;
- FIG. 4 is a schematic diagram of another stacked layout provided by an embodiment of the present application.
- FIG. 4(a) is a schematic exploded view of a view assembly in the stacked layout shown in FIG. 4 according to an embodiment of the present application;
- FIG. 4(b) is a schematic view showing a contracted state of the view assembly in the stacked layout shown in FIG. 4 according to an embodiment of the present application;
- FIG. 5 is a schematic flowchart diagram of a method for laying out a view component according to an embodiment of the present application
- FIG. 6 is a schematic flowchart diagram of a method for laying out a view component according to an embodiment of the present application
- FIG. 7 is a schematic structural diagram of a layout device of a view component according to an embodiment of the present disclosure.
- FIG. 8 is a schematic structural diagram of a layout device of a view component according to an embodiment of the present disclosure.
- FIG. 9 is a schematic structural diagram of a layout device of a view component according to an embodiment of the present application.
- an embodiment of the present application provides a method and a device for laying out a view component, by determining a first view component and a second view component included in a layout container; loading and displaying the first view component and the The second view component is in a stacked layout with the second view component. That is to say, the technical solution provided by the embodiment of the present application can effectively realize the cascading layout between different view components in the layout container, thereby effectively improving the visual effect of the user, and adding different view components compared with the tile layout.
- the compactness between the display of a certain attribute of the product object enables the user to quickly determine the difference and enhance the user experience of the product object.
- the layout container described in the embodiment of the present application can be understood as a collection of view components, a plurality of view components are included in the layout container, and the layout logic includes the layout logic of the view components, and the layout logic here. Contains the order in which the view components are arranged (for example: linear alignment, etc.), relative positional relationships between different view components, and so on.
- the layout controller can be used to layout the view components contained in the layout container.
- FIG. 2 is a schematic flowchart diagram of a method for laying out a view component according to an embodiment of the present application. The method can be as follows.
- Step 201 Determine a first view component and a second view component included in the layout container.
- the method before determining the first view component and the second view component included in the layout container, the method further includes:
- the operating system is an Android operating system and an iOS operating system as an example.
- the following uses the operating system as the Android operating system as an example to illustrate how to draw the first view component and the second view component.
- the frame of the first view component and the second view component in the embodiment of the present application may be a regular shape or an irregular shape, which is not specifically limited herein.
- the first step is to initialize the width and height values of the view component, the radius value of the surrounding rounded corners, and set the border brush Paint and the color brush Paint (this includes setting the parameters such as anti-aliasing and hollow).
- the second step is to create a border drawing path Path and a color drawing path Path.
- the starting point of the path Path is the upper left corner of the drawing rectangle.
- the drawing order is: drawing the arc of the upper left corner of the rectangle, drawing the upper edge of the raised polygon, drawing the arc of the lower right corner of the raised polygon, drawing the right side of the raised polygon, drawing The upper side of the rectangle, the arc in the upper right corner of the rectangle, the right side of the drawing rectangle, the arc in the lower right corner of the drawing rectangle, the lower side of the drawing rectangle, the arc in the lower left corner of the drawing rectangle, the left side of the drawing rectangle, and the starting point.
- the third step is to draw the border and draw the color through the canvas Canvas.
- the fourth step is to draw the shadow around the view component.
- FIG. 2( a ) is a schematic diagram of a drawing path of a view component according to an embodiment of the present application.
- the category interval Item Decoration is invoked, and the interval between the first view component and the second view component is set to a negative value.
- the first view component and the style of the border of the second view component are raised rectangles of the upper left corner/upper right corner of the upper border, then the first view component and the The size of the interval between the second view components is set to the height of the bump.
- the scalability and the customizable characteristics of the RecyclerView split line are utilized.
- the value of the split line between different view components is set to a negative value, which is the adjacent distribution corresponding to the tiled logic.
- the spacing between the two view components is set to a negative value, thereby causing the two view components of the adjacent distribution to form a superimposed effect.
- the plurality of view components in the layout container corresponding to the adapter can form a stacked cascading layout.
- the following uses the operating system as the iOS operating system as an example to illustrate how to draw the first view component.
- a CAShapeLayer is created on the first view component according to a set path, and the CAShapeLayer is a layer of the first view component.
- the top left corner of the frame of the first view component is the origin of the coordinate system
- AB forms a convex curve with the upper frame of the first view component
- BC, CD and DE are line segments
- the lower frame of a view component forms a convex curve
- R is the radius of the convex curve
- W1 is the width of the frame of the first view component
- W2 is the width of the convex curve
- H is the border of the first view component. the height of.
- FIG. 2(b) is a schematic diagram of a drawing path of a view component according to an embodiment of the present application.
- Step 202 Load display the first view component and the second view component, and the first view component and the second view component are in a stacked layout.
- FIG. 3 is a schematic diagram of a stacked layout provided by an embodiment of the present application.
- the method further comprises:
- the display state of the touched view component is adjusted from an expanded state to a contracted state.
- the display state of a single view component changes as an example.
- the ValueAnimatorSet When the display state of the touched view component is adjusted from the contracted state to the expanded state, the ValueAnimatorSet is called, and the touched view is based on the display position of the touched view component and the set height property value.
- the view component expands the height corresponding to the set height attribute value, and is regarded as adjusting the display state of the touched view component from the contracted state to the expanded state.
- FIG. 3( a ) is a schematic view showing the expanded state of the view component in the stacked layout shown in FIG. 3 according to the embodiment of the present application.
- the method further includes:
- the texture state corresponding to the texture attribute value is dynamically displayed in the expanded touched view component according to the texture attribute value.
- FIG. 3(b) is a schematic view of the contracted state of the view assembly in the stacked layout shown in FIG. 3 of the embodiment of the present application.
- the method before the touched view component is expanded to a set height, the method further includes:
- the display state of the other view components is adjusted from the expanded state to the collapsed state.
- the switching operation of expansion and contraction can be implemented between different view components.
- the height of the first view component is increased, and the display height of the second view component is reduced, and the simulation is formed.
- An animation that stretches downward, at which time the display state of the first view component is adjusted from the contracted state to the expanded state, and the display state of the second view component is adjusted from the expanded state to the collapsed state.
- the height of the first view component is increased, and the display height of the second view component is decreased, and the simulation is performed.
- An upwardly extending animation is formed, at which time the display state of the first view component is adjusted from the contracted state to the expanded state, and the display state of the second view component is adjusted from the expanded state to the collapsed state.
- FIG. 4 is a schematic diagram of a stacked layout provided by an embodiment of the present application.
- the method further comprises:
- the display state of the touched view component is adjusted from an expanded state to a contracted state.
- the display state of a single view component changes as an example.
- the TableView is invoked to increase the first display height of the touched view component
- FIG. 4(a) is a schematic view showing the unfolded state of the view component in the stacked layout shown in FIG. 4 of the embodiment of the present application.
- the method further comprises:
- the position of the other view components located behind the touched view component is moved down the first display height.
- the method further comprises:
- a listen event can be started, which is used to calculate the change of the display content size of the view component, and adjust the size of the gray background according to the change of the display content size. , so that the gray background is consistent with the display content size of the view component.
- FIG. 4(b) is a schematic view of the contracted state of the view assembly in the stacked layout shown in FIG. 4 of the embodiment of the present application.
- the method further includes:
- the first view component and the second view component included in the layout container are determined by the technical solution provided by the embodiment of the present application; the first view component and the second view component are loaded and displayed, and the first view component is The second view component is in a stacked layout. That is to say, the technical solution provided by the embodiment of the present application can effectively realize the cascading layout between different view components in the layout container, thereby effectively improving the visual effect of the user, and adding different view components compared with the tile layout.
- the compactness between the display of a certain attribute of the product object enables the user to quickly determine the difference and enhance the user experience of the product object.
- FIG. 5 is a schematic flowchart diagram of a method for laying out a view component according to an embodiment of the present application. The method can be as follows.
- Step 501 Determine a first view component and a second view component included in the layout container, where a spacing between the first view component and the second view component is a negative value.
- Step 502 Load display the first view component and the second view component, and the first view component and the second view component are in a stacked layout.
- Step 503 Receive a touch command sent by the user, where the touch command is used to change the display state of the touched view component.
- Step 504 When it is determined that the display state of the touched view component is a contracted state, call ValueAnimatorSet, based on the display position of the touched view component and the set height attribute value, the touched The view component expands the height corresponding to the set height attribute value, and considers that the display state of the touched view component is adjusted from the contracted state to the expanded state.
- the method further includes:
- the display state of the other view components is adjusted from the expanded state to the collapsed state.
- the method further includes:
- the texture state corresponding to the texture attribute value is dynamically displayed in the expanded touched view component according to the texture attribute value.
- Step 505 Adjust the display state of the touched view component from the expanded state to the contracted state when determining that the displayed state of the touched view component is the expanded state.
- FIG. 6 is a schematic flowchart diagram of a method for laying out a view component according to an embodiment of the present application. The method can be as follows.
- Step 601 Determine a first view component and a second view component included in the layout container, and create a mask layer according to the set path on the first view component and the second view component.
- Step 602 Load display the first view component and the second view component, and the first view component and the second view component are in a stacked layout.
- the set path is:
- the top left corner of the frame of the first view component is the origin of the coordinate system
- AB forms a convex curve with the upper frame of the first view component
- BC, CD and DE are line segments
- the lower frame of a view component forms a convex curve
- R is the radius of the convex curve
- W1 is the width of the frame of the first view component
- W2 is the width of the convex curve
- H is the border of the first view component. the height of.
- Step 603 Receive a touch command sent by the user, where the touch command is used to change the display state of the touched view component.
- Step 604 When it is determined that the display state of the touched view component is a contracted state, the TableView is invoked to increase the first display height of the touched view component.
- Step 605 Adjust a second display height of the mask according to the increased first display height, where the second display height is the same as the first display height.
- Step 606 Move the position of the other view components located behind the touched view component downward by the first display height according to the layout logic and the first display height.
- the method further includes:
- Step 607 Adjust the display state of the touched view component from the expanded state to the contracted state when determining that the displayed state of the touched view component is the expanded state.
- FIG. 7 is a schematic structural diagram of a layout device of a view component according to an embodiment of the present disclosure.
- the layout device includes: a determining unit 701 and a processing unit 702, wherein:
- a determining unit 701 determining a first view component and a second view component included in the layout container
- the processing unit 702 loads and displays the first view component and the second view component, and the first view component and the second view component are in a stacked layout.
- the layout device further includes: a drawing unit 703, wherein:
- the drawing unit 703 draws the first view component and the second view component before determining the first view component and the second view component included in the layout container.
- the drawing unit 703 draws the first view component and the second view component, including:
- the category interval Item Decoration is called, and the interval between the first view component and the second view component is set to a negative value.
- the drawing unit 703 if the style of the border of the first view component and the border of the second view component are raised in the upper left/upper right corner of the upper frame A rectangle, then the size value of the interval between the first view component and the second view component is set to the height of the protrusion.
- the drawing unit 703 draws the first view component, including:
- a CAShapeLayer is created on the first view component according to a set path, and the CAShapeLayer is a layer of the first view component.
- the set path is:
- the top left corner of the frame of the first view component is the origin of the coordinate system
- AB forms a convex curve with the upper frame of the first view component
- BC, CD and DE are line segments
- the lower frame of a view component forms a convex curve
- R is the radius of the convex curve
- W1 is the width of the frame of the first view component
- W2 is the width of the convex curve
- H is the border of the first view component. the height of.
- the layout device further includes: a receiving unit 704 and an adjusting unit 705, where:
- the receiving unit 704 receives a touch command sent by the user, where the touch command is used to change a display state of the touched view component;
- the adjusting unit 705 when determining that the display state of the touched view component is a contracted state, adjusting a display state of the touched view component from a contracted state to an expanded state;
- the display state of the touched view component is adjusted from an expanded state to a contracted state.
- the adjusting unit 705 adjusts the display state of the touched view component from a contracted state to an expanded state, including:
- the adjusting unit 705 determines whether other view components are in an expanded state in the layout container before the touched view component is expanded by a set height
- the display state of the other view components is adjusted from the expanded state to the collapsed state.
- the adjustment unit 705 expands according to the texture attribute value.
- the texture state corresponding to the texture attribute value is dynamically displayed in the touched view component.
- the adjusting unit 705 adjusts the display state of the touched view component from a contracted state to an expanded state, including:
- the touched view component includes a mask layer, then calling the TableView to increase the first display height of the touched view component;
- the adjusting unit 705 moves the position of the other view components located behind the touched view component downward according to the layout logic and the first display height. One shows the height.
- the layout device further includes: a loading unit 706, wherein:
- the layout device may be implemented by using a software, or may be implemented by using a hardware, and is not specifically limited herein.
- the layout device determines the first view component and the second view component included in the layout container; loading and displaying the first view component and the second view component, the first view component and the second view component being layered Layout. That is to say, the technical solution provided by the embodiment of the present application can effectively realize the cascading layout between different view components in the layout container, thereby effectively improving the visual effect of the user, and adding different view components compared with the tile layout.
- the compactness between the display of a certain attribute of the product object enables the user to quickly determine the difference and enhance the user experience of the product object.
- FIG. 8 is a schematic structural diagram of a layout device of a view component according to an embodiment of the present disclosure.
- the layout device includes: a determining unit 801 and a processing unit 802, wherein:
- a determining unit 801 determining a first view component and a second view component included in the layout container, wherein a spacing between the first view component and the second view component is a negative value;
- the processing unit 802 loads and displays the first view component and the second view component, and the first view component and the second view component are in a stacked layout.
- the layout device further includes: a receiving unit 803 and an adjusting unit 804, where:
- the receiving unit 803 receives a touch command sent by the user, where the touch command is used to change a display state of the touched view component;
- the adjusting unit 804 when determining that the display state of the touched view component is a contracted state, adjusting a display state of the touched view component from a contracted state to an expanded state;
- the display state of the touched view component is adjusted from an expanded state to a contracted state.
- the adjusting unit 804 adjusts the display state of the touched view component from a contracted state to an expanded state, including:
- the adjusting unit 804 determines whether other view components are in an expanded state in the layout container before the touched view component is expanded by a set height
- the display state of the other view components is adjusted from the expanded state to the collapsed state.
- the adjusting unit 804 after the touched view component is expanded to a set height, if the ValueAnimatorSet further includes a texture attribute value, according to the texture attribute value, The texture state corresponding to the texture attribute value is dynamically displayed in the expanded touched view component.
- the layout device provided by the embodiment of the present disclosure may be implemented by using a software, or may be implemented by using a hardware, and is not specifically limited herein.
- the layout device can effectively implement the layered layout between different view components in the layout container by using the technical solution provided by the embodiment of the present application, thereby effectively improving the visual effect of the user, and increasing the difference between different view components compared with the tile layout.
- the compactness when displaying certain attributes of a product object, enables the user to quickly determine the difference and enhance the user experience of the product object.
- FIG. 9 is a schematic structural diagram of a layout device of a view component according to an embodiment of the present application.
- the layout device includes: a determining unit 901 and a processing unit 902, wherein:
- the determining unit 901 is configured to determine a first view component and a second view component included in the layout container, where the first view component and the second view component create a mask according to the set path;
- the processing unit 902 loads and displays the first view component and the second view component, and the first view component and the second view component are in a stacked layout.
- the set path is:
- the top left corner of the frame of the first view component is the origin of the coordinate system
- AB forms a convex curve with the upper frame of the first view component
- BC, CD and DE are line segments
- the lower frame of a view component forms a convex curve
- R is the radius of the convex curve
- W1 is the width of the frame of the first view component
- W2 is the width of the convex curve
- H is the border of the first view component. the height of.
- the layout device further includes: a receiving unit 903 and an adjusting unit 904, where:
- the receiving unit 903 receives a touch command sent by the user, where the touch command is used to change a display state of the touched view component;
- the adjusting unit 904 when determining that the display state of the touched view component is a contracted state, adjusting a display state of the touched view component from a contracted state to an expanded state;
- the display state of the touched view component is adjusted from an expanded state to a contracted state.
- the adjusting unit 904 adjusts the display state of the touched view component from a contracted state to an expanded state, including:
- the touched view component includes a mask layer, then calling the TableView to increase the first display height of the touched view component;
- the adjusting unit 904 moves the position of the other view components located behind the touched view component downward according to the layout logic and the first display height. One shows the height.
- the layout device further includes: a loading unit 905, wherein:
- the loading unit 905 after adjusting the display state of the touched view component from the expanded state to the contracted state, when determining that a blank area appears, according to the layout logic in the layout container, in the blank Other view components are displayed as loading in the region.
- the layout device provided by the embodiment of the present disclosure may be implemented by using a software, or may be implemented by using a hardware, and is not specifically limited herein.
- the layout device can effectively implement the layered layout between different view components in the layout container by using the technical solution provided by the embodiment of the present application, thereby effectively improving the visual effect of the user, and increasing the difference between different view components compared with the tile layout.
- the compactness when displaying certain attributes of a product object, enables the user to quickly determine the difference and enhance the user experience of the product object.
- embodiments of the present invention can be provided as a method, system, or computer program product. Accordingly, the present invention may take the form of an entirely hardware embodiment, an entirely software embodiment, or a combination of software and hardware. Moreover, the invention can take the form of a computer program product embodied on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) including computer usable program code.
- computer-usable storage media including but not limited to disk storage, CD-ROM, optical storage, etc.
- the computer program instructions can also be stored in a computer readable memory that can direct a computer or other programmable data processing device to operate in a particular manner, such that the instructions stored in the computer readable memory produce an article of manufacture comprising the instruction device.
- the apparatus implements the functions specified in one or more blocks of a flow or a flow and/or block diagram of the flowchart.
- These computer program instructions can also be loaded onto a computer or other programmable data processing device such that a series of operational steps are performed on a computer or other programmable device to produce computer-implemented processing for execution on a computer or other programmable device.
- the instructions provide steps for implementing the functions specified in one or more of the flow or in a block or blocks of a flow diagram.
- a computing device includes one or more processors (CPUs), input/output interfaces, network interfaces, and memory.
- processors CPUs
- input/output interfaces network interfaces
- memory volatile and non-volatile memory
- the memory may include non-persistent memory, random access memory (RAM), and/or non-volatile memory in a computer readable medium, such as read only memory (ROM) or flash memory.
- RAM random access memory
- ROM read only memory
- Memory is an example of a computer readable medium.
- Computer readable media includes both permanent and non-persistent, removable and non-removable media.
- Information storage can be implemented by any method or technology.
- the information can be computer readable instructions, data structures, modules of programs, or other data.
- Examples of computer storage media include, but are not limited to, phase change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read only memory. (ROM), electrically erasable programmable read only memory (EEPROM), flash memory or other memory technology, compact disk read only memory (CD-ROM), digital versatile disk (DVD) or other optical storage, Magnetic tape cartridges, magnetic tape storage or other magnetic storage devices or any other non-transportable media can be used to store information that can be accessed by a computing device.
- computer readable media does not include temporary storage of computer readable media, such as modulated data signals and carrier waves.
- embodiments of the present application can be provided as a method, system, or computer program product.
- the present application can take the form of an entirely hardware embodiment, an entirely software embodiment or an embodiment in combination of software and hardware.
- the application can take the form of a computer program product embodied on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) including computer usable program code.
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本申请公开了一种视图组件的布局方法及设备，包括：确定布局容器中包含的第一视图组件和第二视图组件；加载显示所述第一视图组件和所述第二视图组件，所述第一视图组件与所述第二视图组件呈层叠式布局。也就是说，通过本申请实施例提供的技术方案能够有效实现布局容器中的不同视图组件之间呈层叠式布局，有效提高了用户的视觉效果，与平铺布局相比，增加了不同视图组件之间的紧凑性，在展示商品对象的某种属性时，使得用户能够快速确定其区别，提升用户对商品对象的用户体验。
Description
本申请要求2017年8月24日递交的申请号为201710733304.2、发明名称为“一种视图组件的布局方法及设备”的中国专利申请的优先权，其全部内容通过引用结合在本申请中。
本申请涉及互联网信息处理技术领域以及计算机技术领域，尤其涉及一种视图组件的布局方法及设备。
客户端的用户界面(User Interface，UI)是用户与客户端进行交互时，用户操作的对象。UI是由视图组件(view)组成的，客户端根据不同的布局逻辑对UI中的view进行布局，可以实现不同的布局样式。
目前，常见的布局样式是平铺样式。如图1所示，为现有技术中常见的平铺样式的示意图。从图1中可以看出，UI中的视图组件采用水平线性布局方式(视图组件1与视图组件2、视图组件3与视图组件4、视图组件5与视图组件6)/垂直线性布局方式(视图组件1、视图组件3与视图组件5；视图组件2、视图组件4与视图组件6)排列。
但是，在通过视图组件展示商品对象的某种属性时，采用这种布局样式，使用户的视觉体验较差，无法较好的选择商品对象，降低用户对商品对象的用户体验。
发明内容
有鉴于此，本申请实施例提供了一种视图组件的布局方法及设备，用于解决现有技术中平铺样式存在的用户的视觉体验较差的问题。
本申请实施例采用下述技术方案：
本申请实施例提供一种视图组件的布局方法，包括：
确定布局容器中包含的第一视图组件和第二视图组件；
加载显示所述第一视图组件和所述第二视图组件，所述第一视图组件与所述第二视图组件呈层叠式布局。
本申请实施例还提供一种视图组件的布局方法，包括：
确定布局容器中包含的第一视图组件和第二视图组件，所述第一视图组件与所述第 二视图组件之间的间隔为负值；
加载显示所述第一视图组件和所述第二视图组件，所述第一视图组件与所述第二视图组件呈层叠式布局。
本申请实施例还提供一种视图组件的布局方法，包括：
确定布局容器中包含的第一视图组件和第二视图组件，所述第一视图组件和所述第二视图组件上按照设定路径创建蒙层；
加载显示所述第一视图组件和所述第二视图组件，所述第一视图组件与所述第二视图组件呈层叠式布局。
本申请实施例还提供了一种视图组件的布局设备，包括：
确定单元，确定布局容器中包含的第一视图组件和第二视图组件；
处理单元，加载显示所述第一视图组件和所述第二视图组件，所述第一视图组件与所述第二视图组件呈层叠式布局。
本申请实施例还提供了一种视图组件的布局设备，包括：
确定单元，确定布局容器中包含的第一视图组件和第二视图组件，所述第一视图组件与所述第二视图组件之间的间隔为负值；
处理单元，加载显示所述第一视图组件和所述第二视图组件，所述第一视图组件与所述第二视图组件呈层叠式布局。
本申请实施例还提供了一种视图组件的布局设备，包括：
确定单元，确定布局容器中包含的第一视图组件和第二视图组件，所述第一视图组件和所述第二视图组件上按照设定路径创建蒙层；
处理单元，加载显示所述第一视图组件和所述第二视图组件，所述第一视图组件与所述第二视图组件呈层叠式布局。
本申请实施例采用的上述至少一个技术方案能够达到以下有益效果：
通过确定布局容器中包含的第一视图组件和第二视图组件；加载显示所述第一视图组件和所述第二视图组件，所述第一视图组件与所述第二视图组件呈层叠式布局。也就是说，通过本申请实施例提供的技术方案能够有效实现布局容器中的不同视图组件之间呈层叠式布局，有效提高了用户的视觉效果，与平铺布局相比，增加了不同视图组件之间的紧凑性，在展示商品对象的某种属性时，使得用户能够快速确定其区别，提升用户对商品对象的用户体验。
此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：
图1为现有技术中常见的平铺样式的示意图；
图2为本申请实施例提供的一种视图组件的布局方法的流程示意图；
图2(a)为本申请实施例提供的一种视图组件的绘制路径的示意图；
图2(b)为本申请实施例提供的一种视图组件的绘制路径的示意图；
图3为本申请实施例提供的一种层叠式布局的示意图；
图3(a)为本申请实施例图3所示的层叠式布局中视图组件的展开状态示意图；
图3(b)为本申请实施例图3所示的层叠式布局中视图组件的收缩状态示意图；
图4为本申请实施例提供的另一种层叠式布局的示意图；
图4(a)为本申请实施例图4所示的层叠式布局中视图组件的展开状态示意图；
图4(b)为本申请实施例图4所示的层叠式布局中视图组件的收缩状态示意图；
图5为本申请实施例提供的一种视图组件的布局方法的流程示意图；
图6为本申请实施例提供的一种视图组件的布局方法的流程示意图；
图7为本申请实施例提供的一种视图组件的布局设备的结构示意图；
图8为本申请实施例提供的一种视图组件的布局设备的结构示意图；
图9为本申请实施例提供的一种视图组件的布局设备的结构示意图。
为了实现本申请的目的，本申请实施例提供了一种视图组件的布局方法及设备，通过确定布局容器中包含的第一视图组件和第二视图组件；加载显示所述第一视图组件和所述第二视图组件，所述第一视图组件与所述第二视图组件呈层叠式布局。也就是说，通过本申请实施例提供的技术方案能够有效实现布局容器中的不同视图组件之间呈层叠式布局，有效提高了用户的视觉效果，与平铺布局相比，增加了不同视图组件之间的紧凑性，在展示商品对象的某种属性时，使得用户能够快速确定其区别，提升用户对商品对象的用户体验。
需要说明的是，本申请实施例中所记载的布局容器可以理解为视图组件的集合，在布局容器中包含了多个视图组件，并且布局容器中包含这些视图组件的布局逻辑，这里的布局逻辑包含视图组件的排列顺序(例如：线性排列等等)，不同视图组件之间的相 对位置关系，等等。通过布局控制器可以实现对布局容器中包含的视图组件的布局。
为使本申请的目的、技术方案和优点更加清楚，下面将结合本申请具体实施例及相应的附图对本申请技术方案进行清楚、完整地描述。显然，所描述的实施例仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。
以下结合附图，详细说明本申请各实施例提供的技术方案。
图2为本申请实施例提供的一种视图组件的布局方法的流程示意图。所述方法可以如下所示。
步骤201：确定布局容器中包含的第一视图组件和第二视图组件。
在本申请实施例中，在确定布局容器中包含的第一视图组件和第二视图组件之前，所述方法还包括：
绘制第一视图组件和第二视图组件。
由于操作系统不同，那么绘制视图组件的方式不同。这里以操作系统为Android操作系统和iOS操作系统为例分别进行说明。
下面以操作系统为Android操作系统为例说明如何绘制得到第一视图组件和第二视图组件的。
首先，绘制第一视图组件的边框和第二视图组件的边框。
在本申请实施例中第一视图组件和第二视图组件的边框可以是规则形状，也可以是不规则形状，这里不做具体限定。
以不规则形状为例绘制得到视图组件的边框。第一步，初始化视图组件的宽度值、高度值、四周圆角的半径值，设置边框画笔Paint、颜色画笔Paint(这里包含设置去锯齿、空心等参数)。
第二步，创建边框绘制路径Path、颜色绘制路径Path。
绘制路径Path起点为绘制矩形的左上角圆弧，绘制顺序为：绘制矩形左上角的圆弧、绘制凸起多边形的上边、绘制凸起多边形右下角的圆弧、绘制凸起多边形的右边、绘制矩形的上边、绘制矩形右上角的圆弧、绘制矩形的右边、绘制矩形右下角圆弧、绘制矩形的下边、绘制矩形左下角的圆弧、绘制矩形的左边、回到起点。
第三步，通过画布Canvas画边框以及画颜色。第四步，绘制视图组件四周阴影。
图2(a)为本申请实施例提供的一种视图组件的绘制路径的示意图。
从图2(a)中可以看到通过上述方式绘制得到的视图组件。
其次，调用类目间隔Item Decoration，将所述第一视图组件与所述第二视图组件之间的间隔设置为负值。
具体地，若所述第一视图组件的边框的样式和所述第二视图组件的边框的样式为上边框的左上角/右上角凸起的矩形，那么将所述第一视图组件与所述第二视图组件之间的间隔的大小值设置为凸起的高度。
在本申请实施例中利用RecyclerView分割线的可扩展性以及能自定义的特性。通过继承ItemDecoration抽象方法，并重载其getItemOffset()方法，将不同视图组件(相邻分布的视图组件之间)之间的分割线的数值设置为负值，即将平铺逻辑对应的相邻分布的两个视图组件之间的间隔设置为负值，从而使相邻分布的两个视图组件形成叠加效果。
进而，利用适配器设置多个这样的视图组件，那么适配器对应的布局容器中的多个视图组件可以形成叠加的层叠式布局。
下面以操作系统为iOS操作系统为例说明如何绘制得到第一视图组件的。
首先，绘制第一视图组件的边框，所述边框为矩形。
其次，在所述第一视图组件上按照设定路径创建CAShapeLayer，所述CAShapeLayer为所述第一视图组件的蒙层。
其中，所述设定路径为：
A(0，R)—〉B(W2，R)—〉C(W1，R)—〉D(W1，H+R)—〉E(W2，H+R)—〉F(0，H+R)—〉A(0，R)的闭合曲线；
其中，以所述第一视图组件的边框的左上角顶点为坐标系的原点，AB与所述第一视图组件的上边框形成凸起曲线，BC、CD和DE为线段，EF与所述第一视图组件的下边框形成凸起曲线，R为凸起曲线的半径，W1为所述第一视图组件的边框的宽度，W2为凸起曲线的宽度，H为所述第一视图组件的边框的高度。
图2(b)为本申请实施例提供的一种视图组件的绘制路径的示意图。
从图2(b)中可以看到通过上述方式绘制得到的视图组件。
步骤202：加载显示所述第一视图组件和所述第二视图组件，所述第一视图组件与所述第二视图组件呈层叠式布局。
在本申请实施例中，若第一视图组件与第二视图组件采用图2(a)所示的绘制路径得到，那么在加载显示所述第一视图组件和所述第二视图组件后，所述第一视图组件与所述第二视图组件呈层叠式布局，如图3所示，为本申请实施例提供的一种层叠式布局的示意图。
从图3中可以看出，第一视图组件与第二视图组件呈叠加效果。
针对图3中所示的各视图组件，可以对这些视图组件执行操作，实现视图组件的展开与收缩。
较优地，所述方法还包括：
接收用户发送的触控指令，所述触控指令用于变更被触控的视图组件的显示状态；
在确定所述被触控的视图组件的显示状态为收缩状态时，将所述被触控的视图组件的显示状态由收缩状态调整为展开状态；
在确定所述被触控的视图组件的显示状态为展开状态时，将所述被触控的视图组件的显示状态由展开状态调整为收缩状态。
这里以单个视图组件的显示状态发生变化为例进行说明。
在将所述被触控的视图组件的显示状态由收缩状态调整为展开状态时，调用ValueAnimatorSet，基于所述被触控的视图组件的显示位置和设置的高度属性值，将所述被触控的视图组件展开设定高度属性值对应的高度，视为将所述被触控的视图组件的显示状态由收缩状态调整为展开状态。
图3(a)为本申请实施例图3所示的层叠式布局中视图组件的展开状态示意图。
较优地，在将所述被触控的视图组件展开设定高度后，所述方法还包括：
若ValueAnimatorSet中还包含纹理属性值，那么根据所述纹理属性值，在展开的所述被触控的视图组件中动态显示所述纹理属性值对应的纹理状态。
在此，如果再次接收到用户发送的触控指令，由于此时所述被触控的视图组件的显示状态为展开状态，那么将所述被触控的视图组件的显示状态由展开状态调整为收缩状态，如图3(b)所示，为本申请实施例图3所示的层叠式布局中视图组件的收缩状态示意图。
在本申请实施例中，在将所述被触控的视图组件展开设定高度前，所述方法还包括：
确定所述布局容器中是否存在其他视图组件处于展开状态；
若存在，则将所述其他视图组件的显示状态由展开状态调整为收缩状态。
也就是，可以在不同的视图组件之间实现展开与收缩的切换操作。
例如：当当前触控指令所对应的第一视图组件处于上一次触控操作的第二视图组件的上方时，第一视图组件的高度增加，同时第二视图组件的显示高度减小，模拟形成向下伸展的动画，此时第一视图组件的显示状态由收缩状态调整为展开状态，而第二视图组件的显示状态由展开状态调整为收缩状态。
再例如：当当前触控指令所对应的第一视图组件处于上一次触控操作的第二视图组件的下方时，第一视图组件的高度增加，同时第二视图组件的显示高度减小，模拟形成向上伸展的动画，此时第一视图组件的显示状态由收缩状态调整为展开状态，而第二视图组件的显示状态由展开状态调整为收缩状态。
在本申请实施例中，若第一视图组件与第二视图组件采用图2(b)所示的绘制路径得到，那么在加载显示所述第一视图组件和所述第二视图组件后，所述第一视图组件与所述第二视图组件呈层叠式布局，如图4所示，为本申请实施例提供的一种层叠式布局的示意图。
从图4中可以看出，第一视图组件与第二视图组件呈叠加效果。
针对图4中所示的各视图组件，可以对这些视图组件执行操作，实现视图组件的展开与收缩。
较优地，所述方法还包括：
接收用户发送的触控指令，所述触控指令用于变更被触控的视图组件的显示状态；
在确定所述被触控的视图组件的显示状态为收缩状态时，将所述被触控的视图组件的显示状态由收缩状态调整为展开状态；
在确定所述被触控的视图组件的显示状态为展开状态时，将所述被触控的视图组件的显示状态由展开状态调整为收缩状态。
这里以单个视图组件的显示状态发生变化为例进行说明。
在将所述被触控的视图组件的显示状态由收缩状态调整为展开状态时，调用TableView，增加所述被触控的视图组件的第一显示高度；
根据增加的第一显示高度，调整该被触控的视图组件上的蒙层的第二显示高度，所述第二显示高度与所述第一显示高度相同。
图4(a)为本申请实施例图4所示的层叠式布局中视图组件的展开状态示意图。
较优地，所述方法还包括：
根据布局逻辑和所述第一显示高度，将位于所述被触控的视图组件之后的其他视图组件的位置向下移动所述第一显示高度。
较优地，所述方法还包括：
为了防止灰色背景的大小与tableview中视图组件的显示内容大小一致，可以启动监听事件，该监听事件用于计算视图组件的显示内容大小的变化，并根据显示内容大小的变化，调整灰色背景的大小，使得灰色背景与视图组件的显示内容大小一致。
在此，如果再次接收到用户发送的触控指令，由于此时所述被触控的视图组件的显示状态为展开状态，那么将所述被触控的视图组件的显示状态由展开状态调整为收缩状态，如图4(b)所示，为本申请实施例图4所示的层叠式布局中视图组件的收缩状态示意图。
较优地，在将所述被触控的视图组件的显示状态由展开状态调整为收缩状态后，所述方法还包括：
在确定有空白区域出现时，根据所述布局容器中的布局逻辑，在所述空白区域中加载显示其他视图组件。
通过本申请实施例提供的技术方案，通过确定布局容器中包含的第一视图组件和第二视图组件；加载显示所述第一视图组件和所述第二视图组件，所述第一视图组件与所述第二视图组件呈层叠式布局。也就是说，通过本申请实施例提供的技术方案能够有效实现布局容器中的不同视图组件之间呈层叠式布局，有效提高了用户的视觉效果，与平铺布局相比，增加了不同视图组件之间的紧凑性，在展示商品对象的某种属性时，使得用户能够快速确定其区别，提升用户对商品对象的用户体验。
图5为本申请实施例提供的一种视图组件的布局方法的流程示意图。所述方法可以如下所示。
步骤501：确定布局容器中包含的第一视图组件和第二视图组件，所述第一视图组件与所述第二视图组件之间的间隔为负值。
步骤502：加载显示所述第一视图组件和所述第二视图组件，所述第一视图组件与所述第二视图组件呈层叠式布局。
步骤503：接收用户发送的触控指令，所述触控指令用于变更被触控的视图组件的显示状态。
步骤504：在确定所述被触控的视图组件的显示状态为收缩状态时，调用ValueAnimatorSet，基于所述被触控的视图组件的显示位置和设置的高度属性值，将所述被触控的视图组件展开设定高度属性值对应的高度，视为将所述被触控的视图组件的显示状态由收缩状态调整为展开状态。
较优地，在将所述被触控的视图组件展开设定高度前，所述方法还包括：
确定所述布局容器中是否存在其他视图组件处于展开状态；
若存在，则将所述其他视图组件的显示状态由展开状态调整为收缩状态。
较优地，在将所述被触控的视图组件展开设定高度后，所述方法还包括：
若ValueAnimatorSet中还包含纹理属性值，那么根据所述纹理属性值，在展开的所述被触控的视图组件中动态显示所述纹理属性值对应的纹理状态。
步骤505：在确定所述被触控的视图组件的显示状态为展开状态时，将所述被触控的视图组件的显示状态由展开状态调整为收缩状态。
图6为本申请实施例提供的一种视图组件的布局方法的流程示意图。所述方法可以如下所示。
步骤601：确定布局容器中包含的第一视图组件和第二视图组件，所述第一视图组件和所述第二视图组件上按照设定路径创建蒙层。
步骤602：加载显示所述第一视图组件和所述第二视图组件，所述第一视图组件与所述第二视图组件呈层叠式布局。
较优地，所述设定路径为：
A(0，R)—〉B(W2，R)—〉C(W1，R)—〉D(W1，H+R)—〉E(W2，H+R)—〉F(0，H+R)—〉A(0，R)的闭合曲线；
其中，以所述第一视图组件的边框的左上角顶点为坐标系的原点，AB与所述第一视图组件的上边框形成凸起曲线，BC、CD和DE为线段，EF与所述第一视图组件的下边框形成凸起曲线，R为凸起曲线的半径，W1为所述第一视图组件的边框的宽度，W2为凸起曲线的宽度，H为所述第一视图组件的边框的高度。
步骤603：接收用户发送的触控指令，所述触控指令用于变更被触控的视图组件的显示状态。
步骤604：在确定所述被触控的视图组件的显示状态为收缩状态时，调用TableView，增加所述被触控的视图组件的第一显示高度。
步骤605：根据增加的第一显示高度，调整所述蒙层的第二显示高度，所述第二显示高度与所述第一显示高度相同。
步骤606：根据布局逻辑和所述第一显示高度，将位于所述被触控的视图组件之后的其他视图组件的位置向下移动所述第一显示高度。
较优地，在将所述被触控的视图组件的显示状态由展开状态调整为收缩状态后，所述方法还包括：
在确定有空白区域出现时，根据所述布局容器中的布局逻辑，在所述空白区域中加载显示其他视图组件。
步骤607：在确定所述被触控的视图组件的显示状态为展开状态时，将所述被触控 的视图组件的显示状态由展开状态调整为收缩状态。
图7为本申请实施例提供的一种视图组件的布局设备的结构示意图。所述布局设备包括：确定单元701和处理单元702，其中：
确定单元701，确定布局容器中包含的第一视图组件和第二视图组件；
处理单元702，加载显示所述第一视图组件和所述第二视图组件，所述第一视图组件与所述第二视图组件呈层叠式布局。
在本申请的另一个实施例中，所述布局设备还包括：绘制单元703，其中：
所述绘制单元703，在确定布局容器中包含的第一视图组件和第二视图组件之前，绘制第一视图组件和第二视图组件。
在本申请的另一个实施例中，所述绘制单元703绘制第一视图组件和第二视图组件，包括：
绘制第一视图组件的边框和第二视图组件的边框；
调用类目间隔Item Decoration，将所述第一视图组件与所述第二视图组件之间的间隔设置为负值。
在本申请的另一个实施例中，所述绘制单元703，若所述第一视图组件的边框的样式和所述第二视图组件的边框的样式为上边框的左上角/右上角凸起的矩形，那么将所述第一视图组件与所述第二视图组件之间的间隔的大小值设置为凸起的高度。
在本申请的另一个实施例中，所述绘制单元703绘制第一视图组件，包括：
绘制第一视图组件的边框，所述边框为矩形；
在所述第一视图组件上按照设定路径创建CAShapeLayer，所述CAShapeLayer为所述第一视图组件的蒙层。
在本申请的另一个实施例中，所述设定路径为：
A(0，R)—〉B(W2，R)—〉C(W1，R)—〉D(W1，H+R)—〉E(W2，H+R)—〉F(0，H+R)—〉A(0，R)的闭合曲线；
其中，以所述第一视图组件的边框的左上角顶点为坐标系的原点，AB与所述第一视图组件的上边框形成凸起曲线，BC、CD和DE为线段，EF与所述第一视图组件的下边框形成凸起曲线，R为凸起曲线的半径，W1为所述第一视图组件的边框的宽度，W2为凸起曲线的宽度，H为所述第一视图组件的边框的高度。
在本申请的另一个实施例中，所述布局设备还包括：接收单元704和调整单元705，其中：
所述接收单元704，接收用户发送的触控指令，所述触控指令用于变更被触控的视图组件的显示状态；
所述调整单元705，在确定所述被触控的视图组件的显示状态为收缩状态时，将所述被触控的视图组件的显示状态由收缩状态调整为展开状态；
在确定所述被触控的视图组件的显示状态为展开状态时，将所述被触控的视图组件的显示状态由展开状态调整为收缩状态。
在本申请的另一个实施例中，所述调整单元705将所述被触控的视图组件的显示状态由收缩状态调整为展开状态，包括：
调用ValueAnimatorSet，基于所述被触控的视图组件的显示位置和设置的高度属性值，将所述被触控的视图组件展开设定高度属性值对应的高度，视为将所述被触控的视图组件的显示状态由收缩状态调整为展开状态。
在本申请的另一个实施例中，所述调整单元705在将所述被触控的视图组件展开设定高度前，确定所述布局容器中是否存在其他视图组件处于展开状态；
若存在，则将所述其他视图组件的显示状态由展开状态调整为收缩状态。
在本申请的另一个实施例中，所述调整单元705在将所述被触控的视图组件展开设定高度后，若ValueAnimatorSet中还包含纹理属性值，那么根据所述纹理属性值，在展开的所述被触控的视图组件中动态显示所述纹理属性值对应的纹理状态。
在本申请的另一个实施例中，所述调整单元705将所述被触控的视图组件的显示状态由收缩状态调整为展开状态，包括：
若所述被触控的视图组件中包含蒙层，那么调用TableView，增加所述被触控的视图组件的第一显示高度；
根据增加的第一显示高度，调整所述蒙层的第二显示高度，所述第二显示高度与所述第一显示高度相同。
在本申请的另一个实施例中，所述调整单元705，根据布局逻辑和所述第一显示高度，将位于所述被触控的视图组件之后的其他视图组件的位置向下移动所述第一显示高度。
在本申请的另一个实施例中，所述布局设备还包括：加载单元706，其中：
所述加载单元706，在将所述被触控的视图组件的显示状态由展开状态调整为收缩状态后，在确定有空白区域出现时，根据所述布局容器中的布局逻辑，在所述空白区域中加载显示其他视图组件。
需要说明的是，本申请实施例提供的布局设备可以通过软件方式实现，也可以通过硬件方式实现，这里不做具体限定。布局设备通过确定布局容器中包含的第一视图组件和第二视图组件；加载显示所述第一视图组件和所述第二视图组件，所述第一视图组件与所述第二视图组件呈层叠式布局。也就是说，通过本申请实施例提供的技术方案能够有效实现布局容器中的不同视图组件之间呈层叠式布局，有效提高了用户的视觉效果，与平铺布局相比，增加了不同视图组件之间的紧凑性，在展示商品对象的某种属性时，使得用户能够快速确定其区别，提升用户对商品对象的用户体验。
图8为本申请实施例提供的一种视图组件的布局设备的结构示意图。所述布局设备包括：确定单元801和处理单元802，其中：
确定单元801，确定布局容器中包含的第一视图组件和第二视图组件，所述第一视图组件与所述第二视图组件之间的间隔为负值；
处理单元802，加载显示所述第一视图组件和所述第二视图组件，所述第一视图组件与所述第二视图组件呈层叠式布局。
在本申请的另一个实施例中，所述布局设备还包括：接收单元803和调整单元804，其中：
所述接收单元803，接收用户发送的触控指令，所述触控指令用于变更被触控的视图组件的显示状态；
所述调整单元804，在确定所述被触控的视图组件的显示状态为收缩状态时，将所述被触控的视图组件的显示状态由收缩状态调整为展开状态；
在确定所述被触控的视图组件的显示状态为展开状态时，将所述被触控的视图组件的显示状态由展开状态调整为收缩状态。
在本申请的另一个实施例中，所述调整单元804将所述被触控的视图组件的显示状态由收缩状态调整为展开状态，包括：
调用ValueAnimatorSet，基于所述被触控的视图组件的显示位置和设置的高度属性值，将所述被触控的视图组件展开设定高度属性值对应的高度，视为将所述被触控的视图组件的显示状态由收缩状态调整为展开状态。
在本申请的另一个实施例中，所述调整单元804，在将所述被触控的视图组件展开设定高度前，确定所述布局容器中是否存在其他视图组件处于展开状态；
若存在，则将所述其他视图组件的显示状态由展开状态调整为收缩状态。
在本申请的另一个实施例中，所述调整单元804，在将所述被触控的视图组件展开 设定高度后，若ValueAnimatorSet中还包含纹理属性值，那么根据所述纹理属性值，在展开的所述被触控的视图组件中动态显示所述纹理属性值对应的纹理状态。
需要说明的是，本申请实施例提供的布局设备可以通过软件方式实现，也可以通过硬件方式实现，这里不做具体限定。布局设备通过本申请实施例提供的技术方案能够有效实现布局容器中的不同视图组件之间呈层叠式布局，有效提高了用户的视觉效果，与平铺布局相比，增加了不同视图组件之间的紧凑性，在展示商品对象的某种属性时，使得用户能够快速确定其区别，提升用户对商品对象的用户体验。
图9为本申请实施例提供的一种视图组件的布局设备的结构示意图。所述布局设备包括：确定单元901和处理单元902，其中：
确定单元901，确定布局容器中包含的第一视图组件和第二视图组件，所述第一视图组件和所述第二视图组件上按照设定路径创建蒙层；
处理单元902，加载显示所述第一视图组件和所述第二视图组件，所述第一视图组件与所述第二视图组件呈层叠式布局。
在本申请的另一个实施例中，所述设定路径为：
A(0，R)—〉B(W2，R)—〉C(W1，R)—〉D(W1，H+R)—〉E(W2，H+R)—〉F(0，H+R)—〉A(0，R)的闭合曲线；
其中，以所述第一视图组件的边框的左上角顶点为坐标系的原点，AB与所述第一视图组件的上边框形成凸起曲线，BC、CD和DE为线段，EF与所述第一视图组件的下边框形成凸起曲线，R为凸起曲线的半径，W1为所述第一视图组件的边框的宽度，W2为凸起曲线的宽度，H为所述第一视图组件的边框的高度。
在本申请的另一个实施例中，所述布局设备还包括：接收单元903和调整单元904，其中：
所述接收单元903，接收用户发送的触控指令，所述触控指令用于变更被触控的视图组件的显示状态；
所述调整单元904，在确定所述被触控的视图组件的显示状态为收缩状态时，将所述被触控的视图组件的显示状态由收缩状态调整为展开状态；
在确定所述被触控的视图组件的显示状态为展开状态时，将所述被触控的视图组件的显示状态由展开状态调整为收缩状态。
在本申请的另一个实施例中，所述调整单元904将所述被触控的视图组件的显示状态由收缩状态调整为展开状态，包括：
若所述被触控的视图组件中包含蒙层，那么调用TableView，增加所述被触控的视图组件的第一显示高度；
根据增加的第一显示高度，调整所述蒙层的第二显示高度，所述第二显示高度与所述第一显示高度相同。
在本申请的另一个实施例中，所述调整单元904，根据布局逻辑和所述第一显示高度，将位于所述被触控的视图组件之后的其他视图组件的位置向下移动所述第一显示高度。
在本申请的另一个实施例中，所述布局设备还包括：加载单元905，其中：
所述加载单元905，在将所述被触控的视图组件的显示状态由展开状态调整为收缩状态后，在确定有空白区域出现时，根据所述布局容器中的布局逻辑，在所述空白区域中加载显示其他视图组件。
需要说明的是，本申请实施例提供的布局设备可以通过软件方式实现，也可以通过硬件方式实现，这里不做具体限定。布局设备通过本申请实施例提供的技术方案能够有效实现布局容器中的不同视图组件之间呈层叠式布局，有效提高了用户的视觉效果，与平铺布局相比，增加了不同视图组件之间的紧凑性，在展示商品对象的某种属性时，使得用户能够快速确定其区别，提升用户对商品对象的用户体验。
本领域内的技术人员应明白，本发明的实施例可提供为方法、系统、或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。
本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令 装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
在一个典型的配置中，计算设备包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。
内存可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)。内存是计算机可读介质的示例。
计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。
还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、商品或者设备中还存在另外的相同要素。
本领域技术人员应明白，本申请的实施例可提供为方法、系统或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。
以上所述仅为本申请的实施例而已，并不用于限制本申请。对于本领域技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本申请的权利要求范围之内。
Claims (27)
- 一种视图组件的布局方法，其特征在于，包括：确定布局容器中包含的第一视图组件和第二视图组件；加载显示所述第一视图组件和所述第二视图组件，所述第一视图组件与所述第二视图组件呈层叠式布局。
- 根据权利要求1所述的布局方法，其特征在于，在确定布局容器中包含的第一视图组件和第二视图组件之前，所述方法还包括：绘制第一视图组件和第二视图组件。
- 根据权利要求2所述的布局方法，其特征在于，绘制第一视图组件和第二视图组件，包括：绘制第一视图组件的边框和第二视图组件的边框；调用类目间隔Item Decoration，将所述第一视图组件与所述第二视图组件之间的间隔设置为负值。
- 根据权利要求3所述的布局方法，其特征在于，所述方法还包括：若所述第一视图组件的边框的样式和所述第二视图组件的边框的样式为上边框的左上角/右上角凸起的矩形，那么将所述第一视图组件与所述第二视图组件之间的间隔的大小值设置为凸起的高度。
- 根据权利要求2所述的布局方法，其特征在于，绘制第一视图组件，包括：绘制第一视图组件的边框，所述边框为矩形；在所述第一视图组件上按照设定路径创建CAShapeLayer，所述CAShapeLayer为所述第一视图组件的蒙层。
- 根据权利要求5所述的布局方法，其特征在于，所述设定路径为：A(0，R)—〉B(W2，R)—〉C(W1，R)—〉D(W1，H+R)—〉E(W2，H+R)—〉F(0，H+R)—〉A(0，R)的闭合曲线；其中，以所述第一视图组件的边框的左上角顶点为坐标系的原点，AB与所述第一视图组件的上边框形成凸起曲线，BC、CD和DE为线段，EF与所述第一视图组件的下边框形成凸起曲线，R为凸起曲线的半径，W1为所述第一视图组件的边框的宽度，W2为凸起曲线的宽度，H为所述第一视图组件的边框的高度。
- 根据权利要求1所述的布局方法，其特征在于，所述方法还包括：接收用户发送的触控指令，所述触控指令用于变更被触控的视图组件的显示状态；在确定所述被触控的视图组件的显示状态为收缩状态时，将所述被触控的视图组件的显示状态由收缩状态调整为展开状态；在确定所述被触控的视图组件的显示状态为展开状态时，将所述被触控的视图组件的显示状态由展开状态调整为收缩状态。
- 根据权利要求7所述的布局方法，其特征在于，将所述被触控的视图组件的显示状态由收缩状态调整为展开状态，包括：调用ValueAnimatorSet，基于所述被触控的视图组件的显示位置和设置的高度属性值，将所述被触控的视图组件展开设定高度属性值对应的高度，视为将所述被触控的视图组件的显示状态由收缩状态调整为展开状态。
- 根据权利要求8所述的布局方法，其特征在于，在将所述被触控的视图组件展开设定高度前，所述方法还包括：确定所述布局容器中是否存在其他视图组件处于展开状态；若存在，则将所述其他视图组件的显示状态由展开状态调整为收缩状态。
- 根据权利要求8所述的布局方法，其特征在于，在将所述被触控的视图组件展开设定高度后，所述方法还包括：若ValueAnimatorSet中还包含纹理属性值，那么根据所述纹理属性值，在展开的所述被触控的视图组件中动态显示所述纹理属性值对应的纹理状态。
- 根据权利要求7所述的布局方法，其特征在于，将所述被触控的视图组件的显示状态由收缩状态调整为展开状态，包括：若所述被触控的视图组件中包含蒙层，那么调用TableView，增加所述被触控的视图组件的第一显示高度；根据增加的第一显示高度，调整所述蒙层的第二显示高度，所述第二显示高度与所述第一显示高度相同。
- 根据权利要求11所述的布局方法，其特征在于，所述方法还包括：根据布局逻辑和所述第一显示高度，将位于所述被触控的视图组件之后的其他视图组件的位置向下移动所述第一显示高度。
- 根据权利要求7所述的布局方法，其特征在于，在将所述被触控的视图组件的显示状态由展开状态调整为收缩状态后，所述方法还包括：在确定有空白区域出现时，根据所述布局容器中的布局逻辑，在所述空白区域中加载显示其他视图组件。
- 一种视图组件的布局方法，其特征在于，包括：确定布局容器中包含的第一视图组件和第二视图组件，所述第一视图组件与所述第二视图组件之间的间隔为负值；加载显示所述第一视图组件和所述第二视图组件，所述第一视图组件与所述第二视图组件呈层叠式布局。
- 根据权利要求14所述的布局方法，其特征在于，所述方法还包括：接收用户发送的触控指令，所述触控指令用于变更被触控的视图组件的显示状态；在确定所述被触控的视图组件的显示状态为收缩状态时，将所述被触控的视图组件的显示状态由收缩状态调整为展开状态；在确定所述被触控的视图组件的显示状态为展开状态时，将所述被触控的视图组件的显示状态由展开状态调整为收缩状态。
- 根据权利要求15所述的布局方法，其特征在于，将所述被触控的视图组件的显示状态由收缩状态调整为展开状态，包括：调用ValueAnimatorSet，基于所述被触控的视图组件的显示位置和设置的高度属性值，将所述被触控的视图组件展开设定高度属性值对应的高度，视为将所述被触控的视图组件的显示状态由收缩状态调整为展开状态。
- 根据权利要求16所述的布局方法，其特征在于，在将所述被触控的视图组件展开设定高度前，所述方法还包括：确定所述布局容器中是否存在其他视图组件处于展开状态；若存在，则将所述其他视图组件的显示状态由展开状态调整为收缩状态。
- 根据权利要求16所述的布局方法，其特征在于，在将所述被触控的视图组件展开设定高度后，所述方法还包括：若ValueAnimatorSet中还包含纹理属性值，那么根据所述纹理属性值，在展开的所述被触控的视图组件中动态显示所述纹理属性值对应的纹理状态。
- 一种视图组件的布局方法，其特征在于，包括：确定布局容器中包含的第一视图组件和第二视图组件，所述第一视图组件和所述第二视图组件上按照设定路径创建蒙层；加载显示所述第一视图组件和所述第二视图组件，所述第一视图组件与所述第二视图组件呈层叠式布局。
- 根据权利要求19所述的布局方法，其特征在于，所述设定路径为：A(0，R)—〉B(W2，R)—〉C(W1，R)—〉D(W1，H+R)—〉E(W2，H+R)—〉F(0，H+R)—〉A(0，R)的闭合曲线；其中，以所述第一视图组件的边框的左上角顶点为坐标系的原点，AB与所述第一视图组件的上边框形成凸起曲线，BC、CD和DE为线段，EF与所述第一视图组件的下边框形成凸起曲线，R为凸起曲线的半径，W1为所述第一视图组件的边框的宽度，W2为凸起曲线的宽度，H为所述第一视图组件的边框的高度。
- 根据权利要求19所述的布局方法，其特征在于，所述方法还包括：接收用户发送的触控指令，所述触控指令用于变更被触控的视图组件的显示状态；在确定所述被触控的视图组件的显示状态为收缩状态时，将所述被触控的视图组件的显示状态由收缩状态调整为展开状态；在确定所述被触控的视图组件的显示状态为展开状态时，将所述被触控的视图组件的显示状态由展开状态调整为收缩状态。
- 根据权利要求21所述的布局方法，其特征在于，将所述被触控的视图组件的显示状态由收缩状态调整为展开状态，包括：若所述被触控的视图组件中包含蒙层，那么调用TableView，增加所述被触控的视图组件的第一显示高度；根据增加的第一显示高度，调整所述蒙层的第二显示高度，所述第二显示高度与所述第一显示高度相同。
- 根据权利要求22所述的布局方法，其特征在于，所述方法还包括：根据布局逻辑和所述第一显示高度，将位于所述被触控的视图组件之后的其他视图组件的位置向下移动所述第一显示高度。
- 根据权利要求21所述的布局方法，其特征在于，在将所述被触控的视图组件的显示状态由展开状态调整为收缩状态后，所述方法还包括：在确定有空白区域出现时，根据所述布局容器中的布局逻辑，在所述空白区域中加载显示其他视图组件。
- 一种视图组件的布局设备，其特征在于，包括：确定单元，确定布局容器中包含的第一视图组件和第二视图组件；处理单元，加载显示所述第一视图组件和所述第二视图组件，所述第一视图组件与所述第二视图组件呈层叠式布局。
- 一种视图组件的布局设备，其特征在于，包括：确定单元，确定布局容器中包含的第一视图组件和第二视图组件，所述第一视图组件与所述第二视图组件之间的间隔为负值；处理单元，加载显示所述第一视图组件和所述第二视图组件，所述第一视图组件与所述第二视图组件呈层叠式布局。
- 一种视图组件的布局设备，其特征在于，包括：确定单元，确定布局容器中包含的第一视图组件和第二视图组件，所述第一视图组件和所述第二视图组件上按照设定路径创建蒙层；处理单元，加载显示所述第一视图组件和所述第二视图组件，所述第一视图组件与所述第二视图组件呈层叠式布局。
Applications Claiming Priority (2)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201710733304.2A CN109426495A (zh) | 2017-08-24 | 2017-08-24 | 一种视图组件的布局方法及设备 |
| CN201710733304.2 | 2017-08-24 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| WO2019037636A1 true WO2019037636A1 (zh) | 2019-02-28 |
Family
ID=65438414
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| PCT/CN2018/100650 Ceased WO2019037636A1 (zh) | 2017-08-24 | 2018-08-15 | 一种视图组件的布局方法及设备 |
Country Status (3)
| Country | Link |
|---|---|
| CN (1) | CN109426495A (zh) |
| TW (1) | TW201913351A (zh) |
| WO (1) | WO2019037636A1 (zh) |
Families Citing this family (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113238745B (zh) * | 2021-05-06 | 2025-05-16 | 北京沃东天骏信息技术有限公司 | 使用多端开发框架实现输入框的方法和装置 |
| CN114443198B (zh) * | 2022-01-26 | 2024-03-29 | 阿里巴巴（中国）有限公司 | 视图组件管理方法、装置、存储介质及计算机程序产品 |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102541537A (zh) * | 2011-12-01 | 2012-07-04 | 厦门雅迅网络股份有限公司 | 一种具有环绕效果的菜单容器控件的实现方法及装置 |
| CN102830972A (zh) * | 2012-08-14 | 2012-12-19 | 管重 | 互联网浏览器的多网页浏览装置 |
| CN103631865A (zh) * | 2013-11-01 | 2014-03-12 | 北京奇虎科技有限公司 | 网页生成方法及设备 |
| CN104050274A (zh) * | 2014-06-25 | 2014-09-17 | 国家电网公司 | 一种html页面嵌套方法及装置 |
Family Cites Families (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103488383B (zh) * | 2013-09-27 | 2017-01-04 | 深圳市金立通信设备有限公司 | 一种界面操作方法及终端设备 |
| CN105843494B (zh) * | 2015-01-15 | 2020-06-09 | 中兴通讯股份有限公司 | 一种实现区域屏幕截图的方法、装置和终端 |
| CN105955598A (zh) * | 2016-05-04 | 2016-09-21 | 深圳市凯立德科技股份有限公司 | 一种界面显示方法及装置 |
-
2017
- 2017-08-24 CN CN201710733304.2A patent/CN109426495A/zh active Pending
-
2018
- 2018-07-26 TW TW107125844A patent/TW201913351A/zh unknown
- 2018-08-15 WO PCT/CN2018/100650 patent/WO2019037636A1/zh not_active Ceased
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102541537A (zh) * | 2011-12-01 | 2012-07-04 | 厦门雅迅网络股份有限公司 | 一种具有环绕效果的菜单容器控件的实现方法及装置 |
| CN102830972A (zh) * | 2012-08-14 | 2012-12-19 | 管重 | 互联网浏览器的多网页浏览装置 |
| CN103631865A (zh) * | 2013-11-01 | 2014-03-12 | 北京奇虎科技有限公司 | 网页生成方法及设备 |
| CN104050274A (zh) * | 2014-06-25 | 2014-09-17 | 国家电网公司 | 一种html页面嵌套方法及装置 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN109426495A (zh) | 2019-03-05 |
| TW201913351A (zh) | 2019-04-01 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US9349205B2 (en) | Systems and methods for animating between collection views | |
| CN102356375B (zh) | 连续和不连续的属性的平滑布局动画 | |
| US9710149B2 (en) | Method and apparatus for displaying user interface capable of intuitively editing and browsing folder | |
| US10372304B2 (en) | Facilitating object set replication | |
| KR20200037887A (ko) | 합성 화상을 생성하는 방법 및 장치 | |
| CN107077347B (zh) | 视图管理架构 | |
| CN107704576A (zh) | 数据展示优化方法、装置、终端设备及存储介质 | |
| WO2016095728A1 (zh) | 一种多窗口显示方法及装置 | |
| CN109901902B (zh) | 界面显示方法、装置、计算机设备和存储介质 | |
| US20190073091A1 (en) | Dynamic display layout systems and methods | |
| TW201435713A (zh) | 在修改期間保留內容區域之佈局 | |
| WO2017088605A1 (zh) | 图片编辑中的图片显示控制方法及装置 | |
| CN107977342A (zh) | 一种文档对比方法及装置 | |
| CN108399646A (zh) | 一种图像渲染方法及装置 | |
| WO2017092430A1 (zh) | 基于虚拟现实应用的用户界面控件实现方法和装置 | |
| WO2019037636A1 (zh) | 一种视图组件的布局方法及设备 | |
| US9396581B2 (en) | Contact shadows in visual representations | |
| TW201541332A (zh) | 網格移動的顯示處理方法及其系統 | |
| US20200388082A1 (en) | Editing bezier patch by selecting multiple anchor points | |
| CN111210486A (zh) | 一种用于实现流光效果的方法和装置 | |
| CN107102832B (zh) | 图表中图形的显示方法及装置 | |
| WO2017097142A1 (zh) | 界面操作的处理方法、装置和智能终端 | |
| CN118113960A (zh) | 页面布局方法、装置、电子设备及存储介质 | |
| CN109947505A (zh) | 一种选中界面元素的图案切换方法及装置 | |
| CN115202553A (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: 18849074 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: 18849074 Country of ref document: EP Kind code of ref document: A1 |