TW201913351A - Layout method and device for view component - Google Patents

Abstract

Disclosed are a layout method and device for a view component, comprising: determining a first view component and a second view component included in a layout container; loading and displaying the first view component and the second view component, wherein the first view component and the second view component are in a stacked layout. That is to say, the technical solution provided by the embodiment of the present application can effectively realize the stacked layout between different view components in a layout container, thereby effectively improving the visual effect of a user, and increasing the compactness among different view components compared with a tiled layout. When a certain attribute of a product object is displayed, the user can quickly determine the difference, enhancing the user experience of the product object.

Description

View component layout method and device

The present invention relates to the field of Internet information processing technology and computer technology, and in particular, to a layout method and device for a view component.

The client's user interface (UI) is the object that the user operates when the user interacts with the client. The UI is composed of view components. The client layouts the views in the UI according to different layout logics, and different layout styles can be implemented. Currently, the common layout style is tiled. As shown in Figure 1, it is a schematic diagram of a tile pattern that is common in the prior art. As can be seen from Figure 1, 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. However, when displaying certain attributes of the product object through the view component, 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.

In view of this, the embodiment of the present invention 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. The embodiment of the present invention adopts the following technical solution: The embodiment of the present invention provides a layout method of a view component, including: determining a first view component and a second view component included in a layout container; loading and displaying the first view component and the first A two-view component, the first view component and the second view component being in a stacked layout. The embodiment of the present invention further provides a layout method of the view component, comprising: determining a first view component and a second view component included in the layout container, wherein a gap between the first view component and the second view component is a negative value 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 invention further provides a layout method of a view component, including: determining a first view component and a second view component included in a layout container, wherein the first view component and the second view component create a mask according to a set path 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 invention further provides a layout device of a view component, comprising: a determining unit, determining a first view component and a second view component included in the layout container; a processing unit, loading and displaying the first view component and the second A view component, the first view component and the second view component being in a stacked layout. The embodiment of the present invention further provides a layout device of a view component, including: a determining unit, determining a first view component and a second view component included in the layout container, between the first view component and the second view component The interval 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 invention further provides a layout device of a view component, including: a determining unit, determining a first view component and a second view component included in the layout container, and setting the first view component and the second view component according to the setting a path creation mask; a processing unit that loads and 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 at least one technical solution adopted by the embodiment of the present invention can achieve the following beneficial effects: by determining a first view component and a 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 are in a stacked layout. That is to say, the technical solution provided by the embodiment of the present invention 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 of the product, when displaying certain attributes of the product object, enables the user to quickly determine the difference and enhance the user experience of the product object.

In order to achieve the purpose of the case, The embodiment of the present invention provides a layout method and device for a view component, By determining the first view component and the second view component included in the layout container; Loading displays the first view component and the second view component, The first view component and the second view component are in a stacked layout. That is, The technical solution provided by the embodiment of the present invention can effectively realize the cascading layout between different view components in the layout container. Effectively improve the user's visual effects, Compared to the tile layout, Increased compactness between different view components, When displaying a property of a product object, Allowing users to quickly determine the difference, Improve user experience with product objects.   It should be noted, The layout container described in the embodiment of the present invention can be understood as a collection of view components. Multiple view components are included in the layout container. And the layout container contains the layout logic for these view components, The layout logic here contains the order in which the view components are arranged (for example: Linear alignment, etc.), Relative positional relationship between different view components, and many more. The layout of the view components contained in the layout container can be achieved through the layout controller.  For the purposes of this case, Technical solutions and advantages are more clear, In the following, the technical solution of the present case will be clearly understood in combination with the specific embodiment of the present invention and the corresponding drawings. Completely described. Obviously, The described embodiment is only a part of the embodiment of the present invention. Rather than all embodiments. Based on the embodiment in the present case, All other embodiments obtained by those of ordinary skill in the art without creative efforts, Both belong to the scope of protection of this case.  The following is combined with the drawings. The technical solutions provided by the embodiments of the present invention are described in detail.  FIG. 2 is a schematic flow chart of a method for laying out a view component according to an embodiment of the present disclosure. The method can be as follows.  Step 201: Determine the first view component and the second view component contained in the layout container.  In the embodiment of the present invention, Before determining the first view component and the second view component included in the layout container, The method further includes:  Draw the first view component and the second view component.  Due to different operating systems, Then the way to draw the view component is different. Here, the operating system is described as an example of the Android operating system and the iOS operating system.  The following uses the operating system as an Android operating system as an example to illustrate how to draw the first view component and the second view component.   First of all, Draws the border of the first view component and the border of the second view component.  In the embodiment of the present invention, the borders of the first view component and the second view component may be regular shapes. It can also be an irregular shape. There is no specific limit here.  Take the irregular shape as an example to draw the border of the view component. first step, Initialize the width value of the view component, Height value, The radius value of the rounded corners, Set the border brush Paint, Color brush Paint (here contains settings for anti-aliasing, Hollow and other parameters).  The second step, Create a border drawing path Path, The color draw path Path.  The starting point of the drawing path is the arc of the upper left corner of the drawing rectangle. The drawing order is: Draw the arc in the upper left corner of the rectangle, Draw the top edge of the raised polygon, Draw the arc in the lower right corner of the raised polygon, Draw the right side of the raised polygon, Draw the top edge of the rectangle, Draw the arc in the upper right corner of the rectangle, Draw the right side of the rectangle, Draw the arc in the lower right corner of the rectangle, Draw the bottom of the rectangle, Draw the arc in the lower left corner of the rectangle, Draw the left side of the rectangle, Go back to the beginning.   third step, Draw borders and draw colors through canvas Canvas. the fourth step, Draw a shadow around the view component.  FIG. 2( a ) is a schematic diagram of a drawing path of a view component provided by an embodiment of the present invention.  The view component drawn in the above manner can be seen from Fig. 2(a).  Secondly, Call the category interval Item Decoration, The interval between the first view component and the second view component is set to a negative value.   specifically, If the style of the border of 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, The size value of the spacing between the first view component and the second view component is then set to the height of the bump.  In the embodiment of the present invention, the scalability and the customizable characteristics of the RecyclerView split line are utilized. By inheriting the ItemDecoration abstraction method, And override its getItemOffset() method, Set the value of the split line between different view components (between adjacently distributed view components) to a negative value, The interval between two view components of the adjacent distribution corresponding to the tile logic is set to a negative value, Thereby the two view components of the adjacent distribution form an overlay effect.   and then, Use the adapter to set up multiple such view components, Then multiple view components in the layout container corresponding to the adapter can form a stacked cascading layout.  Let's take the operating system as an example of the iOS operating system to illustrate how to draw the first view component.   First of all, Draw the border of the first view component, The frame is a rectangle.  Secondly, Creating a CAShapeLayer according to the set path on the first view component, The CAShapeLayer is a layer of the first view component.   among them, The set path is:  A (0, R) -> B (W2, R) -> C (W1, R) -> D (W1, H+R)—>E(W2, H+R)—>F(0, H+R)—>A(0, a closed curve of R);   among them, Taking the top left vertex of the border of the first view component as 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 EF forms a convex curve with the lower frame of the first view component. R is the radius of the convex curve, W1 is the width of the border of the first view component, W2 is the width of the convex curve, H is the height of the border of the first view component.  FIG. 2(b) is a schematic diagram of a drawing path of a view component provided by an embodiment of the present invention.  The view component drawn in the above manner can be seen from Fig. 2(b).  Step 202: Loading displays the first view component and the second view component, The first view component and the second view component are in a stacked layout.  In the embodiment of the present invention, If the first view component and the second view component are obtained by using the drawing path shown in FIG. 2(a), Then after loading and displaying the first view component and the second view component, The first view component and the second view component are in a stacked layout. As shown in Figure 3, A schematic diagram of a stacked layout provided by an embodiment of the present invention.  As can be seen from Figure 3, The first view component and the second view component are superimposed.  For each view component shown in Figure 3, You can perform operations on these view components. Implement the expansion and contraction of view components.  Preferably, The method further includes:  Receiving touch commands sent by the user, The touch instruction is used to change a display state of the touched view component;  When it is determined 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;  When it is determined that the display state of the touched view component is an expanded state, Adjusting the display state of the touched view component from an expanded state to a contracted state.  Here, the display state of a single view component changes as an example.  When the display state of the touched view component is adjusted from the contracted state to the expanded state, Call ValueAnimatorSet, Based on the display position of the touched view component and the set height attribute value, Expanding the touched view component to a height corresponding to a set height attribute value, It is considered that the display state of the touched view component is adjusted from a contracted state to an expanded state.  Fig. 3 (a) is a schematic view showing the unfolded state of the view assembly in the stacked layout shown in Fig. 3 of the embodiment of the present invention.  Preferably, After the touched view component is expanded to a set height, The method further includes:  If the ValueAnimatorSet also contains texture property values, Then according to the texture attribute value, Dynamically displaying the texture state corresponding to the texture attribute value in the expanded touched view component.   here, If the touch command sent by the user is received again, Since the display state of the touched view component is an expanded state at this time, Then, the display state of the touched view component is adjusted from the expanded state to the contracted state. As shown in Figure 3(b), A schematic diagram of the collapsed state of the view assembly in the stacked layout shown in FIG. 3 of the embodiment of the present invention.  In the embodiment of the present invention, Before expanding the touched view component to a set height, The method further includes:  Determining whether there are other view components in the layout container in an expanded state;  If it exists, Then, the display state of the other view components is adjusted from the expanded state to the contracted state.  That is, Switching between expansion and contraction can be implemented between different view components.   E.g: When the first view component corresponding to the current touch command is above the second view component of the last touch operation, The height of the first view component is increased, At the same time, the display height of the second view component is reduced, Simulate an animation that forms a downward stretch, At this time, the display state of the first view component is adjusted from the contracted state to the expanded state. The display state of the second view component is adjusted from the expanded state to the contracted state.  Another example: When the first view component corresponding to the current touch command is below the second view component of the last touch operation, The height of the first view component is increased, At the same time, the display height of the second view component is reduced, The simulation forms an upward stretched animation, At this time, the display state of the first view component is adjusted from the contracted state to the expanded state. The display state of the second view component is adjusted from the expanded state to the contracted state.  In the embodiment of the present invention, If the first view component and the second view component are obtained by using the drawing path shown in FIG. 2(b), Then after loading and displaying the first view component and the second view component, The first view component and the second view component are in a stacked layout. As shown in Figure 4, A schematic diagram of a stacked layout provided by an embodiment of the present invention.  As can be seen from Figure 4, The first view component and the second view component are superimposed.  For each view component shown in Figure 4, You can perform operations on these view components. Implement the expansion and contraction of view components.  Preferably, The method further includes:  Receiving touch commands sent by the user, The touch instruction is used to change a display state of the touched view component;  When it is determined 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;  When it is determined that the display state of the touched view component is an expanded state, Adjusting the display state of the touched view component from an expanded state to a contracted state.  Here, the display state of a single view component changes as an example.  When the display state of the touched view component is adjusted from the contracted state to the expanded state, Call TableView, Increasing a first display height of the touched view component;  According to the increased first display height, Adjusting the second display height of the mask on the touched view component, The second display height is the same as the first display height.  4(a) is a schematic view showing the unfolded state of the view assembly in the stacked layout shown in FIG. 4 of the embodiment of the present invention.  Preferably, The method further includes:  According to the layout logic and the first display height, Moving the position of the other view components located behind the touched view component down the first display height.  Preferably, The method further includes:  In order to prevent the size of the gray background from being consistent with the size of the display component of the view component in the tableview, Can start a listen event, The listen event is used to calculate the change in the display content size of the view component. And according to the change in the size of the display content, Adjust the size of the gray background, Make the gray background consistent with the display content size of the view component.   here, If the touch command sent by the user is received again, Since the display state of the touched view component is an expanded state at this time, Then, the display state of the touched view component is adjusted from the expanded state to the contracted state. As shown in Figure 4(b), A schematic diagram of the collapsed state of the view assembly in the stacked layout shown in FIG. 4 of the embodiment of the present invention.  Preferably, After adjusting the display state of the touched view component from the expanded state to the contracted state, The method further includes:  When it is determined that a blank area appears, According to the layout logic in the layout container, Loading and displaying other view components in the blank area.  Through the technical solutions provided by the embodiments of the present invention, By determining the first view component and the second view component included in the layout container; Loading displays the first view component and the second view component, The first view component and the second view component are in a stacked layout. That is, The technical solution provided by the embodiment of the present invention can effectively realize the cascading layout between different view components in the layout container. Effectively improve the user's visual effects, Compared to the tile layout, Increased compactness between different view components, When displaying a property of a product object, Allowing users to quickly determine the difference, Improve user experience with product objects.  FIG. 5 is a schematic flow chart of a method for laying out a view component according to an embodiment of the present disclosure. The method can be as follows.  Step 501: Determining the first view component and the second view component contained in the layout container, The interval between the first view component and the second view component is a negative value.  Step 502: Loading displays the first view component and the second view component, The first view component and the second view component are in a stacked layout.  Step 503: Receiving touch commands sent by the user, 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, Expanding the touched view component to a height corresponding to a set height attribute value, It is considered that the display state of the touched view component is adjusted from a contracted state to an expanded state.  Preferably, Before expanding the touched view component to a set height, The method further includes:  Determining whether there are other view components in the layout container in an expanded state;  If it exists, Then, the display state of the other view components is adjusted from the expanded state to the contracted state.  Preferably, After the touched view component is expanded to a set height, The method further includes:  If the ValueAnimatorSet also contains texture property values, Then according to the texture attribute value, Dynamically displaying the texture state corresponding to the texture attribute value in the expanded touched view component.  Step 505: When it is determined that the display state of the touched view component is an expanded state, Adjusting the display state of the touched view component from an expanded state to a contracted state.  FIG. 6 is a schematic flowchart diagram of a layout method of a view component according to an embodiment of the present disclosure. The method can be as follows.  Step 601: Determining the first view component and the second view component contained in the layout container, A mask is created on the first view component and the second view component according to a set path.  Step 602: Loading displays the first view component and the second view component, The first view component and the second view component are in a stacked layout.  Preferably, The set path is:  A (0, R) -> B (W2, R) -> C (W1, R) -> D (W1, H+R)—>E(W2, H+R)—>F(0, H+R)—>A(0, a closed curve of R);   among them, Taking the top left vertex of the border of the first view component as 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 EF forms a convex curve with the lower frame of the first view component. R is the radius of the convex curve, W1 is the width of the border of the first view component, W2 is the width of the convex curve, H is the height of the border of the first view component.  Step 603: Receiving touch commands sent by the user, 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, Call TableView, Increasing a first display height of the touched view component.  Step 605: According to the increased first display height, Adjusting the second display height of the mask layer, The second display height is the same as the first display height.  Step 606: According to the layout logic and the first display height, Moving the position of the other view components located behind the touched view component down the first display height.  Preferably, After adjusting the display state of the touched view component from the expanded state to the contracted state, The method further includes:  When it is determined that a blank area appears, According to the layout logic in the layout container, Loading and displaying other view components in the blank area.  Step 607: When it is determined that the display state of the touched view component is an expanded state, Adjusting the display state of the touched view component from an expanded state to a contracted 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: Determining unit 701 and processing unit 702, among them:  Determining unit 701, Determining a first view component and a second view component included in the layout container;  Processing unit 702, Loading displays the first view component and the second view component, The first view component and the second view component are in a stacked layout.  In another embodiment of the present disclosure, The layout device further includes: Drawing unit 703, among them:  The drawing unit 703, Before determining the first view component and the second view component included in the layout container, Draw the first view component and the second view component.  In another embodiment of the present disclosure, The drawing unit 703 draws a first view component and a second view component, include:  Drawing a border of the first view component and a border of the second view component;  Call the category interval Item Decoration, The interval between the first view component and the second view component is set to a negative value.  In another embodiment of the present disclosure, The drawing unit 703, If the style of the border of 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, The size value of the spacing between the first view component and the second view component is then set to the height of the bump.  In another embodiment of the present disclosure, The drawing unit 703 draws a first view component, include:  Draw the border of the first view component, The frame is rectangular;  Create a CAShapeLayer on the first view component according to the set path, The CAShapeLayer is a layer of the first view component.  In another embodiment of the present disclosure, The set path is:  A (0, R) -> B (W2, R) -> C (W1, R) -> D (W1, H+R)—>E(W2, H+R)—>F(0, H+R)—>A(0, a closed curve of R);   among them, Taking the top left vertex of the border of the first view component as 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 EF forms a convex curve with the lower frame of the first view component. R is the radius of the convex curve, W1 is the width of the border of the first view component, W2 is the width of the convex curve, H is the height of the border of the first view component.  In another embodiment of the present disclosure, The layout device further includes: Receiving unit 704 and adjusting unit 705, among them:  The receiving unit 704, Receiving touch commands sent by the user, The touch instruction is used to change a display state of the touched view component;  The adjusting unit 705, When it is determined 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;  When it is determined that the display state of the touched view component is an expanded state, Adjusting the display state of the touched view component from an expanded state to a contracted state.  In another embodiment of the present disclosure, The adjusting unit 705 adjusts the display state of the touched view component from a contracted state to an expanded state. include:  Call ValueAnimatorSet, Based on the display position of the touched view component and the set height attribute value, Expanding the touched view component to a height corresponding to a set height attribute value, It is considered that the display state of the touched view component is adjusted from a contracted state to an expanded state.  In another embodiment of the present disclosure, The adjusting unit 705 before expanding the touched view component to a set height, Determining whether there are other view components in the layout container in an expanded state;  If it exists, Then, the display state of the other view components is adjusted from the expanded state to the contracted state.  In another embodiment of the present disclosure, After the adjustment unit 705 expands the touched view component to a set height, If the ValueAnimatorSet also contains texture property values, Then according to the texture attribute value, Dynamically displaying the texture state corresponding to the texture attribute value in the expanded touched view component.  In another embodiment of the present disclosure, The adjusting unit 705 adjusts the display state of the touched view component from a contracted state to an expanded state. include:  If the touched view component includes a mask layer, Then call TableView, Increasing a first display height of the touched view component;  According to the increased first display height, Adjusting the second display height of the mask layer, The second display height is the same as the first display height.  In another embodiment of the present disclosure, The adjusting unit 705, According to the layout logic and the first display height, Moving the position of the other view components located behind the touched view component down the first display height.  In another embodiment of the present disclosure, The layout device further includes: Loading unit 706, among them:  The loading unit 706, After adjusting the display state of the touched view component from the expanded state to the contracted state, When it is determined that a blank area appears, According to the layout logic in the layout container, Loading and displaying other view components in the blank area.   It should be noted, The layout device provided by the embodiment of the present invention can be implemented by software. It can also be implemented in hardware. There is no specific limit here. The layout device determines the first view component and the second view component included in the layout container; Loading displays the first view component and the second view component, The first view component and the second view component are in a stacked layout. That is, The technical solution provided by the embodiment of the present invention can effectively realize the cascading layout between different view components in the layout container. Effectively improve the user's visual effects, Compared to the tile layout, Increased compactness between different view components, When displaying a property of a product object, Allowing users to quickly determine the difference, Improve user experience with product objects.  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: Determining unit 801 and processing unit 802, among them:  Determining unit 801, Determining the first view component and the second view component contained in the layout container, The interval between the first view component and the second view component is a negative value;  Processing unit 802, Loading displays the first view component and the second view component, The first view component and the second view component are in a stacked layout.  In another embodiment of the present disclosure, The layout device further includes: Receiving unit 803 and adjusting unit 804, among them:  The receiving unit 803, Receiving touch commands sent by the user, The touch instruction is used to change a display state of the touched view component;  The adjusting unit 804, When it is determined 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;  When it is determined that the display state of the touched view component is an expanded state, Adjusting the display state of the touched view component from an expanded state to a contracted state.  In another embodiment of the present disclosure, The adjusting unit 804 adjusts the display state of the touched view component from a contracted state to an expanded state. include:  Call ValueAnimatorSet, Based on the display position of the touched view component and the set height attribute value, Expanding the touched view component to a height corresponding to a set height attribute value, It is considered that the display state of the touched view component is adjusted from a contracted state to an expanded state.  In another embodiment of the present disclosure, The adjusting unit 804, Before expanding the touched view component to a set height, Determining whether there are other view components in the layout container in an expanded state;  If it exists, Then, the display state of the other view components is adjusted from the expanded state to the contracted state.  In another embodiment of the present disclosure, The adjusting unit 804, After the touched view component is expanded to a set height, If the ValueAnimatorSet also contains texture property values, Then according to the texture attribute value, Dynamically displaying the texture state corresponding to the texture attribute value in the expanded touched view component.   It should be noted, The layout device provided by the embodiment of the present invention can be implemented by software. It can also be implemented in hardware. There is no specific limit here. The layout device can effectively realize the cascading layout between different view components in the layout container through the technical solution provided by the embodiment of the present invention. Effectively improve the user's visual effects, Compared to the tile layout, Increased compactness between different view components, When displaying a property of a product object, Allowing users to quickly determine the difference, Improve user experience with product objects.  FIG. 9 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: Determining unit 901 and processing unit 902, among them:  Determining unit 901, Determining the first view component and the second view component contained in the layout container, Creating a mask layer according to the set path on the first view component and the second view component;  Processing unit 902, Loading displays the first view component and the second view component, The first view component and the second view component are in a stacked layout.  In another embodiment of the present disclosure, The set path is:  A (0, R) -> B (W2, R) -> C (W1, R) -> D (W1, H+R)—>E(W2, H+R)—>F(0, H+R)—>A(0, a closed curve of R);   among them, Taking the top left vertex of the border of the first view component as 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 EF forms a convex curve with the lower frame of the first view component. R is the radius of the convex curve, W1 is the width of the border of the first view component, W2 is the width of the convex curve, H is the height of the border of the first view component.  In another embodiment of the present disclosure, The layout device further includes: Receiving unit 903 and adjusting unit 904, among them:  The receiving unit 903, Receiving touch commands sent by the user, The touch instruction is used to change a display state of the touched view component;  The adjusting unit 904, When it is determined 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;  When it is determined that the display state of the touched view component is an expanded state, Adjusting the display state of the touched view component from an expanded state to a contracted state.  In another embodiment of the present disclosure, The adjusting unit 904 adjusts the display state of the touched view component from a contracted state to an expanded state. include:  If the touched view component includes a mask layer, Then call TableView, Increasing a first display height of the touched view component;  According to the increased first display height, Adjusting the second display height of the mask layer, The second display height is the same as the first display height.  In another embodiment of the present disclosure, The adjusting unit 904, According to the layout logic and the first display height, Moving the position of the other view components located behind the touched view component down the first display height.  In another embodiment of the present disclosure, The layout device further includes: Loading unit 905, among them:  The loading unit 905, After adjusting the display state of the touched view component from the expanded state to the contracted state, When it is determined that a blank area appears, According to the layout logic in the layout container, Loading and displaying other view components in the blank area.   It should be noted, The layout device provided by the embodiment of the present invention can be implemented by software. It can also be implemented in hardware. There is no specific limit here. The layout device can effectively realize the cascading layout between different view components in the layout container through the technical solution provided by the embodiment of the present invention. Effectively improve the user's visual effects, Compared to the tile layout, Increased compactness between different view components, When displaying a property of a product object, Allowing users to quickly determine the difference, Improve user experience with product objects.  Those skilled in the art should understand that Embodiments of the invention may be provided as a method, system, Or a computer program product. therefore, The invention can adopt a completely hardware embodiment, Full software embodiment, Or in the form of an embodiment combining soft and hardware aspects. and, The present invention may employ computer usable storage media (including but not limited to disk storage, in one or more of the computer usable code contained therein. CD-ROM, The form of computer program product implemented on optical memory, etc.).  The present invention is directed to a method in accordance with an embodiment of the present invention, Equipment (system), And a flowchart and/or block diagram of a computer program product. It will be understood that each of the processes and/or blocks in the flowcharts and/or block diagrams can be implemented by computer program instructions. And a combination of processes and/or blocks in the flowcharts and/or block diagrams. These computer program instructions can be provided to a general purpose computer, Dedicated computer, An embedded processor or other processor of a programmable data processing device to produce a machine, The instructions executed by a processor of a computer or other programmable data processing device cause means for implementing the functions specified in one or more of the flow or blocks and/or blocks of the block diagram.  These computer program instructions can also be stored in computer readable memory that can boot a computer or other programmable data processing device to operate in a particular manner. Causing an instruction stored in the computer readable memory to produce an article of manufacture including the instruction device, The instruction means implements the functions specified in one or more flows of the flowchart or in a block or blocks of the flowchart.  These computer program instructions can also be loaded onto a computer or other programmable data processing device. Enabling a series of operational steps on a computer or other programmable device to produce computer-implemented processing, Thus, instructions executed on a computer or other programmable device provide steps for implementing the functions specified in one or more of the flow or the flow and/or block of the block.  In a typical configuration, The computing device includes one or more processors (CPUs), Input/output interface, Network interface and memory.  The memory may include non-permanent memory in a computer readable medium. In the form of random access memory (RAM) and/or non-volatile memory, Such as read only memory (ROM) or flash memory (flash RAM). Memory is an example of a computer readable medium.  Computer readable media includes both permanent and non-permanent, Removable and non-removable media can be stored by any method or technique. The information can be computer readable instructions, Data structure, Program modules or other materials. Examples of computer storage media include, But 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, CD-ROM only read-only memory (CD-ROM), Digital versatile disc (DVD) or other optical storage, Magnetic cassette tape, Tape storage or other magnetic storage device or any other non-transportable media, Can be used to store information that can be accessed by a computing device. As defined in this article, The computer readable medium does not include a temporary storage computer readable medium (transitory media). Such as modulated data signals and carriers.  It should also be noted that The term "includes", "Include" or any other variation thereof is intended to cover a non-exclusive inclusion, Thus a process that includes a series of elements, method, Goods or equipment include not only those elements, It also includes other elements that are not explicitly listed. Or is it also included for this process, method, The elements inherent in the goods or equipment. Without more restrictions, An element defined by the statement "includes one..." Does not exclude the process of including the elements, method, There are additional identical elements in the item or device.  Those skilled in the art should understand that Embodiments of the present disclosure can be provided as a method, System or computer program product. therefore, This case can be implemented in a completely hardware embodiment. A fully software embodiment or a combination of embodiments of the software and hardware aspects. and, The present invention may employ computer-usable storage media (including but not limited to disk storage, in one or more of the computer-usable program code included therein. CD-ROM, The form of computer program product implemented on optical memory, etc.).  The above is only the embodiment of the present case. It is not intended to limit the case. For those skilled in the art, There are various changes and changes in this case. Any modifications made within the spirit and principles of the case, Equivalent replacement, Improvement, etc. All should be included in the scope of the patent application in this case.

701‧‧‧determination unit

702‧‧‧Processing unit

703‧‧‧ drawing unit

704‧‧‧ receiving unit

705‧‧‧Adjustment unit

706‧‧‧Loading unit

801‧‧‧determination unit

802‧‧‧Processing unit

803‧‧‧ receiving unit

804‧‧‧Adjustment unit

901‧‧‧determination unit

902‧‧‧Processing unit

903‧‧‧ Receiving unit

904‧‧‧Adjustment unit

905‧‧‧Loading unit

The drawings described herein are provided to provide a further understanding of the present invention and constitute a part of the present invention. The illustrative embodiments of the present invention and the description thereof are used to explain the present invention and do not constitute an undue limitation of the present invention. In the drawings: FIG. 1 is a schematic diagram of a tile pattern commonly seen in the prior art; FIG. 2 is a schematic flow chart of a layout method of a view component according to an embodiment of the present invention; FIG. 2(a) is a view provided by an embodiment of the present invention. FIG. 2(b) is a schematic diagram of a drawing path of a view component provided by an embodiment of the present invention; FIG. 3 is a schematic diagram of a stacked layout provided by an embodiment of the present invention; FIG. 3(a) is an implementation of the present invention. FIG. 3(b) is a schematic view showing the contracted state of the view component in the stacked layout shown in FIG. 3 according to the embodiment of the present invention; FIG. 4 is a schematic view of the embodiment of the present invention. Figure 4 (a) is a schematic view showing the unfolded state of the view component in the stacked layout shown in Figure 4 of the present embodiment; Figure 4 (b) is a stacked layout shown in Figure 4 of the embodiment of the present invention; Schematic diagram of the contraction state of the middle view component; FIG. 5 is a schematic flow chart of a layout method of the view component provided by the embodiment of the present invention 6 is a schematic flow chart of a layout component of a view component according to an embodiment of the present invention; FIG. 7 is a schematic structural diagram of a layout component of a view component according to an embodiment of the present invention; FIG. 8 is 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 invention.

Claims (27)

A layout method of a view component, comprising: determining a first view component and a second view component included in a layout container; loading and displaying the first view component and the second view component, the first view The component and the second view component are in a stacked layout. The layout method of claim 1, wherein before determining the first view component and the second view component included in the layout container, the method further comprises: drawing the first view component and the second view component. The layout method of claim 2, wherein the drawing the first view component and the second view component comprises: drawing a border of the first view component and a border of the second view component; calling the category interval Item Decoration, The interval between the first view component and the second view component is set to a negative value. The layout method of claim 3, wherein the method further comprises: if a style of a border of the first view component and a style of a border of the second view component are an upper left corner of the upper border/ A raised rectangle in the upper right corner, then the size of the interval between the first view component and the second view component is set to the height of the bump. The layout method of claim 2, wherein the drawing the first view component comprises: drawing a border of the first view component, the border being a rectangle; creating a CAShapeLayer according to the set path on the first view component The CAShapeLayer is a layer of the first view component. The layout method according to claim 5, wherein the set path is: A(0, R) -> B(W2, R) -> C(W1, R) -> D (W1, H +R)—>E(W2,H+R)—>F(0,H+R)—>A (0,R) closed curve; wherein, the top left corner of the border of the first view component For 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, and EF forms a convex curve with the lower frame of the first view component, and R is convex. The radius of the curve, W1 is the width of the frame of the first view component, W2 is the width of the convex curve, and H is the height of the frame of the first view component. The method of claim 1, wherein the method further comprises: receiving a touch command sent by a user, wherein the touch command is used to change a display state of the touched view component; When the display state of the touched view component is a contracted state, the display state of the touched view component is adjusted from a contracted state to an expanded state; determining that the displayed state of the touched view component is expanded In the state, the display state of the touched view component is adjusted from the expanded state to the contracted state. According to the layout method of claim 7, wherein the display state of the touched view component is adjusted from a contracted state to an expanded state, including: calling a ValueAnimatorSet based on the touched view component Displaying the position and the set height attribute value, and expanding the height corresponding to the set height attribute value by the touched view component is regarded as adjusting the display state of the touched view component from the contracted state to the expanded state. The layout method of claim 8, wherein before the displaying the touched view component is expanded to a set height, the method further comprises: determining whether other view components are in an expanded state in the layout container. ; If present, adjusts the display state of the other view components from the expanded state to the collapsed state. The layout method of claim 8, wherein after the touched view component is expanded to a set height, the method further comprises: if the ValueAnimatorSet further includes a texture attribute value, according to the texture The attribute value dynamically displays the texture state corresponding to the texture attribute value in the expanded touched view component. According to the layout method of claim 7, wherein the display state of the touched view component is adjusted from a contracted state to an expanded state, including: if the touched view component includes a mask layer And then calling the TableView to increase the first display height of the touched view component; adjusting the second display height of the mask according to the increased first display height, the second display height and the first The display height is the same. The layout method of claim 11, wherein the method further comprises: positioning the other view components located behind the touched view component according to the layout logic and the first display height Moving the first display height downward. According to the layout method of claim 7, wherein after the display state of the touched view component is adjusted from the expanded state to the contracted state, the method further includes: when determining that a blank area appears Displaying other view components in the blank area according to layout logic in the layout container. A layout method of a view component, comprising: determining a first view component and a second view component included in a layout container, wherein a spacing between the first view component and the second view component is a negative value; 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 method of claim 14, wherein the method further comprises: receiving a touch command sent by a user, wherein the touch command is used to change a display state of the touched view component; When the display state of the touched view component is a contracted state, the display state of the touched view component is adjusted from a contracted state to an expanded state; determining that the displayed state of the touched view component is expanded In the state, the display state of the touched view component is adjusted from the expanded state to the contracted state. According to the layout method of claim 15, wherein the display state of the touched view component is adjusted from a contracted state to an expanded state, comprising: calling a ValueAnimatorSet based on the touched view component Displaying the position and the set height attribute value, and expanding the height corresponding to the set height attribute value by the touched view component is regarded as adjusting the display state of the touched view component from the contracted state to the expanded state. The layout method of claim 16, wherein before the displaying the touched view component is expanded to a set height, the method further comprises: determining whether other view components are in an expanded state in the layout container. ; If present, adjusts the display state of the other view components from the expanded state to the collapsed state. The layout method of claim 16, wherein after the touched view component is expanded to a set height, the method further comprises: if the ValueAnimatorSet further includes a texture attribute value, according to the texture The attribute value dynamically displays the texture state corresponding to the texture attribute value in the expanded touched view component. A layout method of a view component, comprising: determining a first view component and a second view component included in a layout container, wherein the first view component and the second view component create a mask layer according to a set path; 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 layout method according to claim 19, wherein the set path is: A(0, R) -> B(W2, R) -> C(W1, R) -> D (W1, H +R)—>E(W2,H+R)—>F(0,H+R)—>A (0,R) closed curve; wherein, the top left corner of the border of the first view component For 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, and EF forms a convex curve with the lower frame of the first view component, and R is convex. The radius of the curve, W1 is the width of the frame of the first view component, W2 is the width of the convex curve, and H is the height of the frame of the first view component. The method of claim 19, wherein the method further comprises: receiving a touch command sent by a user, the touch command being used to change a display state of the touched view component; When the display state of the touched view component is a contracted state, the display state of the touched view component is adjusted from a contracted state to an expanded state; determining that the displayed state of the touched view component is expanded In the state, the display state of the touched view component is adjusted from the expanded state to the contracted state. The layout method according to claim 21, wherein the display state of the touched view component is adjusted from a contracted state to an expanded state, including: if the touched view component includes a mask layer And then calling the TableView to increase the first display height of the touched view component; adjusting the second display height of the mask according to the increased first display height, the second display height and the first The display height is the same. The layout method according to claim 22, wherein the method further comprises: positioning a position of the other view component located behind the touched view component according to the layout logic and the first display height Moving the first display height downward. According to the layout method of claim 21, after the display state of the touched view component is adjusted from the expanded state to the contracted state, the method further includes: when determining that a blank area occurs Displaying other view components in the blank area according to layout logic in the layout container. A layout device of a view component, comprising: a determining unit, determining a first view component and a second view component included in a layout container; a processing unit, loading and displaying the first view component and the second view component The first view component and the second view component are in a stacked layout. A layout device of a view component, comprising: a determining unit, determining a first view component and a second view component included in a layout container, wherein an interval between the first view component and the second view component is a processing unit that loads and displays the first view component and the second view component, the first view component and the second view component being in a stacked layout. A layout device of a view component, comprising: a determining unit, determining a first view component and a second view component included in a layout container, wherein the first view component and the second view component are created according to a set path a processing unit that loads and displays the first view component and the second view component, the first view component and the second view component being in a stacked layout.