WO2019037636A1 - 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

Layout method and device for view component

The present application claims the priority of the Chinese Patent Application Serial No. No. No. No. No. No. No. No. No. No. No. No.

Technical field

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.

Background technique

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. 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.

Summary of the invention

In view of this, 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.

The embodiments of the present application adopt the following technical solutions:

An embodiment of the present application provides a method for laying out a view component, including:

Determining a first view component and a 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 being in a stacked layout.

The embodiment of the present application further provides a method for laying out a view component, including:

Determining a first view component and a second view component included in the layout container, the interval between the first view component and the second view component being 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 application further provides a method for laying out a view component, including:

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;

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 above at least one technical solution adopted by the embodiment of the present application can achieve the following beneficial effects:

Determining 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 in a cascading 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.

DRAWINGS

The drawings described herein are intended to provide a further understanding of the present application, and are intended to be a part of this application. In the drawing:

1 is a schematic view of a tile pattern that is common in the prior art;

2 is a schematic flowchart of a method for laying out a view component according to an embodiment of the present application;

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;

3 is a schematic diagram of a stacked layout provided by an embodiment of the present application;

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;

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;

4 is a schematic diagram of another stacked layout provided by an embodiment of the present application;

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;

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.

Detailed ways

For the purpose 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.

It should be noted that 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.

The technical solutions of the present application will be clearly and completely described in the following with reference to the specific embodiments of the present application and the corresponding drawings. It is apparent that the described embodiments are only a part of the embodiments of the present application, and not all of them. All other embodiments obtained by a person of ordinary skill in the art based on the embodiments of the present application without departing from the inventive scope are the scope of the present application.

The technical solutions provided by the embodiments of the present application are described in detail below with reference to the accompanying drawings.

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.

In the embodiment of the present application, 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.

Because of the different operating systems, the way to draw view components is different. Here, 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.

First, draw the border of the first view component and the border of 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.

Take the irregular shape as an example to draw the border of the view component. 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 view component drawn by the above method can be seen from Fig. 2(a).

Next, 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.

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, 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.

In the embodiment of the present application, the scalability and the customizable characteristics of the RecyclerView split line are utilized. By inheriting the ItemDecoration abstract method and overloading its getItemOffset() method, the value of the split line between different view components (between adjacently distributed 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.

Further, by using the adapter to set up a plurality of such view components, 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.

First, draw a border of the first view component, which is a rectangle.

Next, 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.

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 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, and BC, CD and DE are line segments, EF and the first 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, and 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.

The view component drawn by the above method can be seen from Fig. 2(b).

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.

In the embodiment of the present application, if the first view component and the second view component are obtained by using the drawing path shown in FIG. 2( a ), 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 FIG. 3 , which is a schematic diagram of a stacked layout provided by an embodiment of the present application.

As can be seen from Figure 3, the first view component and the second view component are superimposed.

For each of the view components shown in FIG. 3, operations can be performed on these view components to implement expansion and contraction of the view components.

Preferably, the method further comprises:

Receiving a touch command sent by the user, where the touch command is used to change a display state of the touched view component;

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;

When it is determined that the display state of the touched view component is an expanded state, the display state of the touched view component is adjusted 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, 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.

Preferably, after the touched view component is expanded to a set height, the method further includes:

If the value of the texture attribute is further included in the ValueAnimatorSet, the texture state corresponding to the texture attribute value is dynamically displayed in the expanded touched view component according to the texture attribute value.

Here, if the touch command sent by the user is received again, since the display state of the touched view component is the expanded state at this time, the display state of the touched view component is adjusted from the expanded state to The contracted state, as shown in 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.

In the embodiment of the present application, before the touched view component is expanded to a set height, the method further includes:

Determining whether there are other view components in the layout container in an expanded state;

If present, the display state of the other view components is adjusted from the expanded state to the collapsed state.

That is, the switching operation of expansion and contraction can be implemented between different view components.

For example, 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, 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.

For 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, 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.

In the embodiment of the present application, if the first view component and the second view component are obtained by using the drawing path shown in FIG. 2( b ), 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 FIG. 4 , which is a schematic diagram of a stacked layout provided by an embodiment of the present application.

As can be seen from Figure 4, the first view component and the second view component are superimposed.

For each of the view components shown in FIG. 4, operations can be performed on these view components to implement expansion and contraction of the view components.

Preferably, the method further comprises:

Receiving a touch command sent by the user, where the touch command is used to change a display state of the touched view component;

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;

When it is determined that the display state of the touched view component is an expanded state, the display state of the touched view component is adjusted 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, the TableView is invoked to increase the first display height of the touched view component;

Adjusting a second display height of the mask on the touched view component according to the increased first display height, the second display height being the same as the first display height.

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.

Preferably, the method further comprises:

Depending on the layout logic and the first display height, the position of the other view components located behind the touched view component is moved down the first display height.

Preferably, the method further comprises:

In order to prevent the size of the gray background from being consistent with the display content size of the view component in the tableview, 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.

Here, if the touch command sent by the user is received again, since the display state of the touched view component is the expanded state at this time, the display state of the touched view component is adjusted from the expanded state to The contracted state, as shown in 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.

Preferably, after the display state of the touched view component is adjusted from the expanded state to the contracted state, the method further includes:

When it is determined that a blank area appears, other view components are loaded and displayed in the blank area according to layout logic in the layout container.

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.

Preferably, before the method of 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 present, the display state of the other view components is adjusted from the expanded state to the collapsed state.

Preferably, after the touched view component is expanded to a set height, the method further includes:

If the value of the texture attribute is further included in the ValueAnimatorSet, 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.

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, R) closed curve;

Wherein, 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, and BC, CD and DE are line segments, EF and the first 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, and 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.

Preferably, after the display state of the touched view component is adjusted from the expanded state to the contracted state, the method further includes:

When it is determined that a blank area appears, other view components are loaded and displayed in the blank area according to layout logic in the layout container.

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.

In another embodiment of the present application, 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.

In another embodiment of the present application, the drawing unit 703 draws the first view component and the second view component, including:

Drawing a border of the first view component and a border of the second view component;

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.

In another embodiment of the present application, 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.

In another embodiment of the present application, the drawing unit 703 draws the first view component, including:

Drawing a border of the first view component, the border being a rectangle;

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.

In another embodiment of the present application, 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 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, and BC, CD and DE are line segments, EF and the first 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, and H is the border of the first view component. the height of.

In another embodiment of the present application, 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;

When it is determined that the display state of the touched view component is an expanded state, the display state of the touched view component is adjusted from an expanded state to a contracted state.

In another embodiment of the present application, the adjusting unit 705 adjusts the display state of the touched view component from a contracted state to an expanded state, including:

Calling the ValueAnimatorSet, based on the display position of the touched view component and the set height property value, expanding the touched view component to a height corresponding to the set height attribute value, and treating the touched The display state of the view component is adjusted from the contracted state to the expanded state.

In another embodiment of the present application, 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;

If present, the display state of the other view components is adjusted from the expanded state to the collapsed state.

In another embodiment of the present application, after the touched view component is expanded to a set height, if the ValueAnimatorSet further includes a texture attribute value, 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.

In another embodiment of the present application, the adjusting unit 705 adjusts the display state of the touched view component from a contracted state to an expanded state, including:

If the touched view component includes a mask layer, then calling the TableView to increase the first display height of the touched view component;

Adjusting a second display height of the mask according to the increased first display height, the second display height being the same as the first display height.

In another embodiment of the present application, 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.

In another embodiment of the present application, the layout device further includes: a loading unit 706, wherein:

The loading unit 706, 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.

It should be noted that 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 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.

In another embodiment of the present application, 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;

When it is determined that the display state of the touched view component is an expanded state, the display state of the touched view component is adjusted from an expanded state to a contracted state.

In another embodiment of the present application, the adjusting unit 804 adjusts the display state of the touched view component from a contracted state to an expanded state, including:

Calling the ValueAnimatorSet, based on the display position of the touched view component and the set height property value, expanding the touched view component to a height corresponding to the set height attribute value, and treating the touched The display state of the view component is adjusted from the contracted state to the expanded state.

In another embodiment of the present application, 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;

If present, the display state of the other view components is adjusted from the expanded state to the collapsed state.

In another embodiment of the present application, 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.

It should be noted that 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.

In another embodiment of the present application, 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 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, and BC, CD and DE are line segments, EF and the first 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, and H is the border of the first view component. the height of.

In another embodiment of the present application, 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;

When it is determined that the display state of the touched view component is an expanded state, the display state of the touched view component is adjusted from an expanded state to a contracted state.

In another embodiment of the present application, the adjusting unit 904 adjusts the display state of the touched view component from a contracted state to an expanded state, including:

If the touched view component includes a mask layer, then calling the TableView to increase the first display height of the touched view component;

Adjusting a second display height of the mask according to the increased first display height, the second display height being the same as the first display height.

In another embodiment of the present application, 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.

In another embodiment of the present application, 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.

It should be noted that 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.

Those skilled in the art will appreciate that 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.

The present invention has been described with reference to flowchart illustrations and/or block diagrams of methods, apparatus (system), and computer program products according to embodiments of the invention. It will be understood that each flow and/or block of the flowchart illustrations and/or FIG. These computer program instructions can be provided to a processor of a general purpose computer, special purpose computer, embedded processor, or other programmable data processing device to produce a machine for the execution of instructions for execution by a processor of a computer or other programmable data processing device. Means for implementing the functions specified in one or more of the flow or in a block or blocks of the flow chart.

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.

In a typical configuration, a computing device includes one or more processors (CPUs), input/output interfaces, network interfaces, and 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. 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. As defined herein, computer readable media does not include temporary storage of computer readable media, such as modulated data signals and carrier waves.

It is also to be understood that the terms "comprises" or "comprising" or "comprising" or any other variations are intended to encompass a non-exclusive inclusion, such that a process, method, article, Other elements not explicitly listed, or elements that are inherent to such a process, method, commodity, or equipment. An element defined by the phrase "comprising a ..." does not exclude the presence of additional equivalent elements in the process, method, item, or device including the element.

Those skilled in the art will appreciate that embodiments of the present application can be provided as a method, system, or computer program product. Thus, 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. Moreover, 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.

The above description is only an embodiment of the present application and is not intended to limit the application. Various changes and modifications can be made to the present application by those skilled in the art. Any modifications, equivalents, improvements, etc. made within the spirit and scope of the present application are intended to be included within the scope of the appended claims.

Claims (27)

1. A layout method of a view component, comprising:

   Determining a first view component and a 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 being in a stacked layout.
2. The layout method according to claim 1, wherein before determining the first view component and the second view component included in the layout container, the method further comprises:

   Draw the first view component and the second view component.
3. The layout method according to 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;

   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.
4. The layout method according to claim 3, wherein the method further comprises:

   And 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, then the first view component and the second view are The size of the interval between components is set to the height of the bump.
5. The layout method according to claim 2, wherein the drawing the first view component comprises:

   Drawing a border of the first view component, the border being a rectangle;

   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.
6. The layout method according to claim 5, wherein the setting 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 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, and BC, CD and DE are line segments, EF and the first 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, and H is the border of the first view component. the height of.
7. The layout method according to claim 1, wherein the method further comprises:

   Receiving a touch command sent by the user, where the touch command is used to change a display state of the touched view component;

   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;

   When it is determined that the display state of the touched view component is an expanded state, the display state of the touched view component is adjusted from an expanded state to a contracted state.
8. The layout method according to claim 7, wherein the display state of the touched view component is adjusted from a contracted state to an expanded state, including:

   Calling the ValueAnimatorSet, based on the display position of the touched view component and the set height property value, expanding the touched view component to a height corresponding to the set height attribute value, and treating the touched The display state of the view component is adjusted from the contracted state to the expanded state.
9. The layout method according to claim 8, wherein the method further comprises: before expanding the touched view component to a set height, the method further comprising:

   Determining whether there are other view components in the layout container in an expanded state;

   If present, the display state of the other view components is adjusted from the expanded state to the collapsed state.
10. The layout method according to claim 8, wherein after the touched view component is expanded to a set height, the method further includes:

    If the value of the texture attribute is further included in the ValueAnimatorSet, the texture state corresponding to the texture attribute value is dynamically displayed in the expanded touched view component according to the texture attribute value.
11. The layout method according to 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, then calling the TableView to increase the first display height of the touched view component;

    Adjusting a second display height of the mask according to the increased first display height, the second display height being the same as the first display height.
12. The layout method according to claim 11, wherein the method further comprises:

    Depending on the layout logic and the first display height, the position of the other view components located behind the touched view component is moved down the first display height.
13. The layout method according to 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 it is determined that a blank area appears, other view components are loaded and displayed in the blank area according to layout logic in the layout container.
14. A layout method of a view component, comprising:

    Determining a first view component and a second view component included in the layout container, the interval between the first view component and the second view component being 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.
15. The layout method according to claim 14, wherein the method further comprises:

    Receiving a touch command sent by the user, where the touch command is used to change a display state of the touched view component;

    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;

    When it is determined that the display state of the touched view component is an expanded state, the display state of the touched view component is adjusted from an expanded state to a contracted state.
16. The layout method according to claim 15, wherein the display state of the touched view component is adjusted from a contracted state to an expanded state, including:

    Calling the ValueAnimatorSet, based on the display position of the touched view component and the set height property value, expanding the touched view component to a height corresponding to the set height attribute value, and treating the touched The display state of the view component is adjusted from the contracted state to the expanded state.
17. The layout method according to claim 16, wherein before the unfolding the touched view component to a set height, the method further comprises:

    Determining whether there are other view components in the layout container in an expanded state;

    If present, the display state of the other view components is adjusted from the expanded state to the collapsed state.
18. The layout method according to claim 16, wherein after the touched view component is expanded to a set height, the method further comprises:

    If the value of the texture attribute is further included in the ValueAnimatorSet, the texture state corresponding to the texture attribute value is dynamically displayed in the expanded touched view component according to the texture attribute value.
19. A layout method of a view component, comprising:

    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;

    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.
20. The layout method according to claim 19, wherein the setting 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 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, and BC, CD and DE are line segments, EF and the first 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, and H is the border of the first view component. the height of.
21. The layout method according to claim 19, wherein the method further comprises:

    Receiving a touch command sent by the user, where the touch command is used to change a display state of the touched view component;

    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;

    When it is determined that the display state of the touched view component is an expanded state, the display state of the touched view component is adjusted from an expanded state to a contracted state.
22. 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, then calling the TableView to increase the first display height of the touched view component;

    Adjusting a second display height of the mask according to the increased first display height, the second display height being the same as the first display height.
23. The layout method according to claim 22, wherein the method further comprises:

    Depending on the layout logic and the first display height, the position of the other view components located behind the touched view component is moved down the first display height.
24. The layout method according to claim 21, 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 it is determined that a blank area appears, other view components are loaded and displayed in the blank area according to layout logic in the layout container.
25. A layout device of a view component, comprising:

    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.
26. A layout device of a view component, comprising:

    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.
27. A layout device of a view component, comprising:

    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.

Images