Method, device and medium for viewing page hierarchical structure

Abstract

The present disclosure provides a method, device, and medium for viewing a page's hierarchical structure. The method includes: determining the view layers included in the current display interface, the coverage area borders of each control corresponding to each view layer, and the hierarchical structure between view layers; and displaying a three-dimensional rendering, wherein the three-dimensional rendering includes view layers located on different planes and conforming to the hierarchical structure, and the coverage area borders of controls belonging to the same view layer are located on the same plane. Displaying the three-dimensional rendering allows users to view the hierarchical structure of the view layers in the interface, the positional relationships of the controls, and compare them with the types of the controls in the original image. Under certain conditions, overdrawn areas can be identified, and the locations of problematic controls can be determined.

Description

Technical Field

[0001] This article relates to the field of mobile terminal data processing technology, and in particular to a method, device, and medium for viewing a page hierarchy structure. Background Art

[0002] The View layer in the Android system is used to express visual effects. From a drawing performance perspective, the fewer times a pixel is drawn, the less pressure on the graphics processing unit (GPU). During development, excessive drawing at the View layer is unavoidable.

[0003] When the frames per second (fps) set for the page in the Android system needs to reach 60, the Android system sends a vertical synchronization (Vertical Sync, referred to as Vsync) signal every 16.66 milliseconds (ms) to trigger the rendering of the user interface (UI). If each rendering is successful, a smoother picture can be displayed. In order to achieve the 60fps requirement, the GPU needs to complete the rendering operation of the current frame within 16.66 milliseconds after receiving Vsync. If the rendering time of the current frame after the GPU receives Vsync exceeds 16.66 milliseconds, the vertical synchronization mechanism will make the display hardware wait for the GPU to complete the raster rendering operation. The waiting time will cause the screen to pause visually to the user.

[0004] When you select the "Show GPU Overdraw" function in the GPU Overdraw option on a mobile terminal, you can determine the drawing areas with different overdraw levels.

[0005] By connecting the mobile terminal to a computer with Hierarychy view tool software installed, the information of the view layer on the current display interface of the mobile terminal can be viewed on the computer, but the view layer needs to be checked one by one, and the preview speed and positioning speed are slow. Summary of the Invention

[0006] To overcome the problems existing in the related art, this article provides a method, device and medium for viewing the hierarchical structure of a page.

[0007] According to a first aspect of an embodiment of this document, a method for displaying page view layout information is provided, which is applied to a mobile terminal and includes:

[0008] Determine the view layers contained in the current display interface, the coverage area borders of each control corresponding to each view layer, and the hierarchical structure between view layers;

[0009] A three-dimensional effect diagram is displayed, wherein the three-dimensional effect diagram includes view layers located in different planes and conforming to the hierarchical structure, and the coverage area borders of controls belonging to the same view layer are located in the same plane.

[0010] In one embodiment, displaying the three-dimensional effect image includes: displaying the attribute information of the control within the coverage area border of all controls in each viewing layer;

[0011] or;

[0012] The method further includes: receiving a signal for instructing to display property information of the control within a coverage area border of all controls in each view layer;

[0013] The display of the three-dimensional effect diagram includes: displaying the attribute information of the control within the coverage area border of all controls in each viewing layer;

[0014] The attribute information includes at least one of the following: name and type.

[0015] In one embodiment, the displaying of the three-dimensional effect image includes: displaying a border of a coverage area of ​​the control in a set color;

[0016] or,

[0017] The method further includes: receiving a set color selected by a user;

[0018] The displaying of the three-dimensional effect image includes: displaying the coverage area border of the control in the set color selected by the user.

[0019] In one embodiment, displaying the three-dimensional effect image includes: displaying the attribute information of the control within the coverage area border of all controls in the view layer that meets the first setting rule;

[0020] or;

[0021] The method further includes: receiving a signal for instructing to display attribute information of the control within a coverage area border of all controls in a view layer that meets a first setting rule;

[0022] The displaying of the three-dimensional effect diagram includes: displaying the attribute information of the control within the coverage area border of all controls in the view layer that meets the first setting rule;

[0023] The attribute information includes at least one of the following: name and type.

[0024] In one embodiment, displaying the three-dimensional effect image includes: displaying the control pattern within a border of a coverage area that conforms to all controls in a view layer including a graphic frame;

[0025] or;

[0026] The method further includes: receiving a pattern for indicating that the control is displayed within a coverage area border of all controls in the view layer including the frame;

[0027] The display of the three-dimensional effect diagram includes: displaying the control pattern within the coverage area border of all controls in the view layer including the graphic frame.

[0028] In one embodiment, the method further includes: receiving a single-finger sliding touch signal; and adjusting a display angle of the three-dimensional effect image according to the single-finger sliding touch signal.

[0029] In one embodiment, the method further includes: receiving a two-finger sliding touch signal; and adjusting a scaling ratio of the three-dimensional effect image according to the two-finger sliding touch signal.

[0030] According to a second aspect of the embodiments of this document, there is provided an apparatus for displaying page view layout information, which is applied to a mobile terminal and includes:

[0031] A determination module is used to determine the view layers contained in the current display interface, the coverage area borders of each control corresponding to each view layer, and the hierarchical structure between view layers;

[0032] The first display module is used to display a three-dimensional effect diagram, which includes view layers located in different planes and conforming to the hierarchical structure, and the coverage area frames of controls belonging to the same view layer are located in the same plane.

[0033] In one embodiment, displaying the three-dimensional effect image includes: displaying the attribute information of the control within the coverage area border of all controls in each viewing layer;

[0034] or;

[0035] The device further comprises:

[0036] A first receiving module is configured to receive a signal for instructing to display property information of a control within a coverage area border of all controls in each view layer;

[0037] The second display module is used to display the property information of the controls within the coverage area border of all controls in each view layer;

[0038] The attribute information includes at least one of the following: name and type.

[0039] In one embodiment, the displaying of the three-dimensional effect image includes: displaying a border of a coverage area of ​​the control in a set color;

[0040] or,

[0041] The device further comprises:

[0042] A fourth receiving module, configured to receive a set color selected by a user;

[0043] The fifth display module is used to display the coverage area border of the control in the set color selected by the user.

[0044] In one embodiment, displaying the three-dimensional effect image includes: displaying the attribute information of the control within the coverage area border of all controls in the view layer that meets the first setting rule;

[0045] or;

[0046] The device further comprises:

[0047] A second receiving module is configured to receive a signal for instructing to display the property information of the control within the coverage area border of all controls in the view layer that meets the first setting rule;

[0048] A third display module, configured to display attribute information of the controls within the coverage area borders of all controls in the view layer that conforms to the first setting rule;

[0049] The attribute information includes at least one of the following: name and type.

[0050] In one embodiment, displaying the three-dimensional effect image includes: displaying the control pattern within the coverage area border of all controls in the view layer including the graphic frame;

[0051] or;

[0052] The method further comprises:

[0053] A third receiving module is used to receive a pattern for indicating that the control is displayed within the border of the coverage area of ​​all controls in the view layer including the frame;

[0054] The fourth display module is used to display the control pattern within the coverage area frame of all controls in the view layer including the graphic frame.

[0055] In one embodiment, the device further comprises:

[0056] A fifth receiving module, configured to receive a single-finger sliding touch signal;

[0057] A sixth receiving module is configured to adjust a display angle of the three-dimensional effect image according to the single-finger sliding touch signal.

[0058] In one embodiment, the device further comprises:

[0059] A sixth receiving module, configured to receive a two-finger sliding touch signal;

[0060] A seventh receiving module is configured to adjust a zoom ratio of the three-dimensional effect image according to the two-finger sliding touch signal.

[0061] According to a third aspect of the embodiments of this document, there is provided an apparatus for displaying page view layout information, comprising:

[0062] processor;

[0063] a memory for storing processor-executable instructions;

[0064] The processor is configured to execute the executable instructions in the memory to implement the steps of the above method.

[0065] According to a fourth aspect of the embodiments of this document, a non-transitory computer-readable storage medium is provided, on which executable instructions are stored, and when the executable instructions are executed by a processor, the steps of the above method are implemented.

[0066] The technical solution provided by the embodiments of this article can include the following beneficial effects: displaying a three-dimensional rendering, allowing users to view the hierarchical structure of the view layer in the interface, the positional relationship of the controls, and comparing the types of each control in the original image. Under certain conditions, the over-drawn area can be known and the location of the problematic control can be determined.

[0067] It is to be understood that the foregoing general description and the following detailed description are exemplary and explanatory only and are not restrictive of the present invention. BRIEF DESCRIPTION OF THE DRAWINGS

[0068] The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the present invention and, together with the description, serve to explain the principles of the present invention.

[0069] Figure 1 is a flow chart showing a method for viewing a page hierarchy structure according to an exemplary embodiment;

[0070] Figure 2 This is a display interface of a three-dimensional view rendering application according to an exemplary embodiment;

[0071] Figure 3 This is a display interface of a three-dimensional view rendering application according to an exemplary embodiment;

[0072] Figure 4 This is a display interface of a three-dimensional view rendering application according to an exemplary embodiment;

[0073] Figure 5 This is a display interface of a three-dimensional view rendering application according to an exemplary embodiment;

[0074] Figure 6This is a display interface of a three-dimensional view rendering application according to an exemplary embodiment;

[0075] Figure 7 This is a display interface of a three-dimensional view rendering application according to an exemplary embodiment;

[0076] Figure 8 This is a display interface of a three-dimensional view rendering application according to an exemplary embodiment;

[0077] Figure 9 This is a display interface of a three-dimensional view rendering application according to an exemplary embodiment;

[0078] Figure 10 is a structural diagram of a device for viewing a page hierarchical structure according to an exemplary embodiment;

[0079] Figure 11 The figure is a structural diagram of a device for viewing a page hierarchical structure according to an exemplary embodiment. DETAILED DESCRIPTION

[0080] Exemplary embodiments will be described in detail herein, examples of which are illustrated in the accompanying drawings. In the following description, when referring to the drawings, identical numerals in different figures represent identical or similar elements unless otherwise indicated. The embodiments described in the following exemplary embodiments are not intended to represent all embodiments consistent with this disclosure. Rather, they are merely examples of apparatus and methods consistent with certain aspects of this disclosure, as detailed in the appended claims.

[0081] The present disclosure provides a method for displaying page view layout information. Figure 1 , Figure 1 FIG. 1 is a flow chart of a method for displaying page view layout information according to an exemplary embodiment. Figure 1 As shown, this method includes:

[0082] Step S11 , determining the view layers included in the current display interface, the coverage area of ​​each control corresponding to each view layer, and the hierarchical structure between the view layers.

[0083] Step S12 , displaying a three-dimensional rendering, wherein the three-dimensional rendering includes view layers located in different planes and conforming to the hierarchical structure, and the coverage area borders of controls belonging to the same view layer are located in the same plane.

[0084] In one embodiment, a 3D view rendering application is installed on a mobile terminal and enabled. The method for displaying page view layout information is implemented using the 3D view rendering application. The 3D view rendering application is enabled and loads the layout file for the current display interface. Upon successful loading, the application enters a normal operating mode. Upon a loading failure, the application remains in an abnormal operating mode. In normal operating mode, various editing tool objects of the 3D view rendering application are assigned to the currently active Activity component, causing the various editing tool functions to be displayed on the interface of the 3D view rendering application.

[0085] In one embodiment, the display interface of the 3D view rendering application includes two parts, a first part at the top, and a second part outside the first part. On the display interface of the 3D view rendering application, a 3D view rendering function switch control is set in the first part. When the user operates this control to turn off the 3D view rendering function, the original display interface of the mobile terminal is displayed in the second part, as shown in the example. Figure 2 shown. Figure 2 The display interface in the includes an icon, which has two levels of titles, namely the first-level title and the second-level title. When the icon is displayed, the detailed information of the first-level title and the second-level title of the icon are displayed on the right side of the icon. Figure 2 The contents of the first-level title and the second-level title displayed are for reference only. For example, in an actual application, the specific information of the first-level title is Consectertur Lectus, and the specific information of the second-level title is Lacus eu.

[0086] When the user operates this control to turn on the three-dimensional view rendering function, the three-dimensional display effect interface of the mobile terminal is displayed in the second part.

[0087] In this embodiment, a three-dimensional rendering is displayed, allowing the user to view the hierarchical structure of the view layer in the interface, the positional relationship of the controls, and compare the types of the controls in the original image. Under certain conditions, the over-drawn area can be identified and the location of the problematic control can be determined.

[0088] The present disclosure provides a method for displaying page view layout information, which includes: Figure 1 The method shown, and:

[0089] Displaying the 3D rendering in step S12 includes displaying control attribute information within the coverage area borders of all controls in each view layer. The attribute information includes at least one of the following: name and type. The name is a unique identifier for the control, and the type includes: image, text, etc.

[0090] In the 3D view rendering application, the default display mode of the 3D rendering image has been set to display the property information of the control within the coverage area border of all controls in the partial view layer. After the user operates this control to make the 3D view rendering function enter the normal operating state, the property information of the control is displayed within the coverage area border of all controls in the partial view layer in the displayed 3D rendering image.

[0091] In another embodiment, the default display mode of the 3D rendering image in the 3D view rendering application is to not display the attribute information of the control within the coverage area border of all controls in each view layer. The user needs to click the corresponding function option, such as SetDrawViewEnabled, to enable the 3D rendering image to display the attribute information of the control within the coverage area border of all controls in each view layer. Specifically:

[0092] When the three-dimensional effect diagram is displayed in step S12, the attribute information of the control is not displayed within the coverage area border of all controls in each view layer. Figure 3 shown. Figure 3 It includes 6 view layers, which include, from the root to the outside: the view layer corresponding to the root layout control, the view layer corresponding to the parent layout control, the view layer corresponding to the list layout control, the view layer corresponding to the layout control, the view layer of the picture control and the title container control, and the view layer corresponding to the title one control and the title two control. Figure 3 The property information of the control is not displayed in the image, but the hierarchical structure between view layers can be known. The position of the corresponding view layer in the hierarchical structure can be determined according to the position of the icon, first-level title and second-level title in the original image. After step S12, it also includes: receiving a signal for indicating that the property information of the control is displayed within the coverage area border of all controls in each view layer, that is, receiving a signal that sets the SetDrawViewEnabled option to be on. The property information of the control is displayed within the coverage area border of all controls in each view layer. Figure 4 As shown, corresponding to Figure 3 , which respectively indicates the attribute information corresponding to the six view layers. These six view layers include, from the root to the outside, the view layer corresponding to the root layout control, the view layer corresponding to the parent layout control, the view layer corresponding to the list layout control, the view layer corresponding to the layout control, the view layer of the image control and title container control pair, and the view layer corresponding to the title one control and title two controls. Figure 4The attribute information of the controls is displayed within the border of the coverage area of ​​all controls in each view layer. The attribute information of the corresponding controls in the first four view layers are: root layout control, parent layout control, list layout control, and layout control. The attribute information of the controls corresponding to the fifth view layer includes: picture control and title container control. The attribute information of the controls corresponding to the sixth view layer includes: title one control and title two control. In one embodiment, the name of the root layout control is linear_layout, the name of the parent layout control is item_pager, the name of the list layout control is list_view, the name of the layout control is item_linearlayout, the name of the picture control is image, the name of the title container control is item_title_linear_layout, the name of the title one control is item_title, and the name of the title two control is item_sub_title.

[0093] from Figure 4 You can intuitively get the attribute information of each control and the hierarchical structure between view layers. You can also determine that the corresponding controls are at the same level in the hierarchical structure based on the coverage area borders on the same plane.

[0094] In this embodiment, a 3D rendering is displayed, allowing users to view the hierarchical structure of the interface's view layer and the properties of the controls. Under certain conditions, the 3D rendering can be used to identify overdrawn areas and locate problematic controls. For example, if the coverage of an image-type control is smaller than that of a text-type control located above it, it can be determined that the coverage of the text-type control is improperly set.

[0095] The present disclosure provides a method for displaying page view layout information, which includes: Figure 1 Because most users want to see the name of the control's attribute information, a function option (SetDrawID) is specially set to display the name of the control.

[0096] When the three-dimensional rendering is displayed in step S12, the attribute information of the controls is not displayed within the borders of the coverage areas of all controls in each viewing layer.

[0097] After step S12, the method further includes: receiving a signal for instructing to display the name of the control within the coverage area border of all controls in each view layer, that is, receiving a signal for setting the SetDrawID option to be on. Step S14: displaying the name of the control within the coverage area border of all controls in each view layer.

[0098] The present disclosure provides a method for displaying page view layout information, which includes: Figure 1The method shown, and:

[0099] Displaying the three-dimensional effect image in step S12 includes: displaying the coverage area border of the control in a set color.

[0100] In another embodiment, a 3D rendering application has set a default display mode for 3D rendering images to display the borders of all control coverage areas in a default color (e.g., white when the display background is black). The user is required to select a corresponding function option to display the borders of the control coverage areas in the 3D rendering image in the user-selected color. For example, the border line color setting function (SetDrawColor) includes multiple set colors, such as white, red, green, and purple.

[0101] Specifically:

[0102] After step S12, the following steps are also included:

[0103] Step S13: receiving the set color selected by the user.

[0104] Step S14: displaying the border of the coverage area of ​​the control in the set color selected by the user.

[0105] The wireframe color can be customized by setting the border color function (SetDrawColor). The wireframe color can better highlight the desired three-dimensional effect. Users can set different colors to present contrast effects in different modes, making it easier for users to view and locate the view hierarchy.

[0106] The present disclosure provides a method for displaying page view layout information, which includes: Figure 1 The method shown, and:

[0107] Displaying the three-dimensional rendering in step S12 includes displaying attribute information of the control within the coverage area border of all controls in the view layer that meets the first setting rule. The attribute information includes at least one of the following: name and type. The name is a unique identifier of the control, and the type includes: image, text, etc.

[0108] In this way, only the control's attribute information is displayed within the border of the coverage area of ​​all controls in the partial view layer in the 3D rendering. For example, when the same control corresponds to multiple view layers, the view layer that meets the first setting rule is the bottom view layer or the top view layer.

[0109] When the default display mode of the three-dimensional rendering image in the three-dimensional view rendering application is set to display the property information of the control within the coverage area border of all controls in the view layer that meets the first setting rules, after the user starts the three-dimensional view rendering application, the property information of the control will be displayed within the coverage area border of all controls in the view layer that meets the first setting rules.

[0110] In another embodiment, the default display mode of the 3D rendering image in the 3D view rendering application is to not display the attribute information of the control within the coverage area border of all controls in each view layer. The user needs to click the corresponding function option, such as SetDrawViewPart, to display the attribute information of the control within the coverage area border of the control that meets the first setting rule in each view layer in the 3D rendering image. Specifically:

[0111] When the three-dimensional effect diagram is displayed in step S12, the attribute information of the control is not displayed within the coverage area border of all controls in each view layer. Figure 3 shown.

[0112] After step S12, the method further includes: receiving a signal for instructing to display the attribute information of the control within the coverage area frame of all controls in the view layer that meets the first setting rule. Displaying the attribute information of the control within the coverage area frame of all controls in the view layer that meets the first setting rule, such as Figure 5 Shown. Only Figure 4 In another embodiment, only the attribute information of the controls in the second view layer, the fifth view layer and the sixth view layer can be displayed. Figure 4 In another embodiment, only the attribute information of the control in the sixth view layer can be displayed. Figure 4 In another embodiment, only the attribute information of the control in the 5th view layer and the 6th view layer can be displayed. Figure 4 Property information of controls in the 4th, 5th, and 6th view layers.

[0113] The present disclosure provides a method for displaying page view layout information, which includes: Figure 1 The method shown, and:

[0114] Displaying the three-dimensional effect image in step S12 includes: displaying the control pattern within the coverage area frame of all controls in the view layer including the image frame. The image frame includes an icon frame and a text frame. The pattern includes an icon and text.

[0115] The default display method for 3D rendering images in the 3D view rendering application is to display the control images within the bounding box of the overlay area of ​​all controls in the view layer, including the frame. When the user launches the 3D view rendering application, the displayed 3D rendering image will display the control images within the bounding box of the overlay area of ​​all controls in the view layer, including the frame.

[0116] In another embodiment, the default display mode of the 3D rendering image in the 3D view rendering application is to not display the attribute information of the control within the coverage area border of all controls in each view layer. The user needs to click the corresponding function option to display the control image within the coverage area border of all controls in each view layer, including the frame. Specifically:

[0117] When the three-dimensional effect diagram is displayed in step S12, the control pattern is not displayed within the coverage area border of all controls in each viewing layer. Figure 3 shown.

[0118] After step S12, the method further includes: receiving a signal for instructing to display the pattern of the control within the coverage area border of all controls in the view layer including the frame. Displaying the pattern of the control within the coverage area border of all controls in the view layer including the frame, such as Figure 6 As shown, only the control patterns within the coverage area border of all controls in the 6th view layer including the image frame and the text frame are displayed.

[0119] In another embodiment, the property information and pattern of the control are displayed simultaneously within the coverage area frame of the corresponding control. Figure 7 As shown, in Figure 6 In addition, the control attribute information is displayed within the border of the coverage area of ​​all controls in the sixth view layer, which only displays the image frame and text frame. Among them, T1 is the attribute information of the image control, T2 is the attribute information of the title container control, T3 is the attribute information of the title 1 control, and T4 is the attribute information of the title 2 control.

[0120] Through this embodiment, a color-rich rendering can be displayed on the basis of a simple layout wireframe diagram.

[0121] The present disclosure provides a method for displaying page view layout information, which includes: Figure 1 The method shown, and:

[0122] The method further includes: receiving a single-finger sliding touch signal; and adjusting the display angle of the three-dimensional effect image according to the single-finger sliding touch signal. Figure 8 and Figure 9 shown. Figure 8 The display angle in the figure is the right side perspective of the 3D rendering. Figure 9 The display angle is the bottom viewing angle of the 3D rendering.

[0123] The user clicks the touch and slide control, and the 3D view rendering application obtains the pixel point touched by the user and rotates the 3D rendering to the corresponding angle. The angle and speed of rotation depend on the angle and speed of the user's click.

[0124] The present disclosure provides a method for displaying page view layout information, which includes: Figure 1 The method shown, and:

[0125] The method further includes: receiving a two-finger sliding touch signal; and adjusting the scaling ratio of the three-dimensional effect image according to the two-finger sliding touch signal.

[0126] When controls are nested or overlapped, users can slide with two fingers to allow the 3D view rendering application to zoom in or out of the 3D rendering, allowing users to see the details clearly.

[0127] In another embodiment, the three-dimensional view rendering application supports both single-finger sliding touch and double-finger sliding touch. Users can use single-finger sliding touch and double-finger sliding touch to display the three-dimensional rendering at different angles and accuracy, allowing users to observe at different angles and accuracy, thereby improving the user experience.

[0128] The present disclosure provides a device for displaying page view layout information. Figure 10 , Figure 10 FIG. 1 is a structural diagram of an apparatus for displaying page view layout information according to an exemplary embodiment. Figure 10 As shown, this method includes:

[0129] Determination module 1001, used to determine the view layers included in the current display interface, the coverage area borders of each control corresponding to each view layer, and the hierarchical structure between view layers;

[0130] The first display module 1002 is used to display a three-dimensional effect diagram, which includes view layers located in different planes and conforming to the hierarchical structure, and the coverage area frames of controls belonging to the same view layer are located in the same plane.

[0131] The present disclosure provides a device for displaying page view layout information, which includes: Figure 10 The device shown, and: displaying the three-dimensional effect diagram includes: displaying the attribute information of the control within the coverage area border of all controls in each viewing layer;

[0132] or;

[0133] The device further comprises:

[0134] A first receiving module is configured to receive a signal for instructing to display property information of a control within a coverage area border of all controls in each view layer;

[0135] The second display module is used to display the property information of the controls within the coverage area border of all controls in each view layer;

[0136] The attribute information includes at least one of the following: name and type.

[0137] The present disclosure provides a device for displaying page view layout information, which includes: Figure 10 The device shown, and: the displaying of the three-dimensional effect diagram includes: displaying the coverage area border of the control in a set color;

[0138] or,

[0139] The device further comprises:

[0140] A fourth receiving module, configured to receive a set color selected by a user;

[0141] The fifth display module is used to display the coverage area border of the control in the set color selected by the user.

[0142] The present disclosure provides a device for displaying page view layout information, which includes: Figure 10 The device shown, and: displaying the three-dimensional effect diagram includes: displaying the attribute information of the control within the coverage area border of all controls in the view layer that meets the first setting rule;

[0143] or;

[0144] The device further comprises:

[0145] A second receiving module is configured to receive a signal for instructing to display the property information of the control within the coverage area border of all controls in the view layer that meets the first setting rule;

[0146] A third display module, configured to display attribute information of the controls within the coverage area borders of all controls in the view layer that conforms to the first setting rule;

[0147] The attribute information includes at least one of the following: name and type.

[0148] The present disclosure provides a device for displaying page view layout information, which includes: Figure 10 The device shown, and: displaying the three-dimensional effect diagram includes: displaying the control pattern within the coverage area border of all controls in the view layer including the graphic frame;

[0149] or;

[0150] The method further comprises:

[0151] A third receiving module is used to receive a pattern for indicating that the control is displayed within the border of the coverage area of ​​all controls in the view layer including the frame;

[0152] The fourth display module is used to display the control pattern within the coverage area frame of all controls in the view layer including the graphic frame.

[0153] The present disclosure provides a device for displaying page view layout information, which includes: Figure 10 The device shown, and: the device also includes:

[0154] A fifth receiving module, configured to receive a single-finger sliding touch signal;

[0155] A sixth receiving module is configured to adjust a display angle of the three-dimensional effect image according to the single-finger sliding touch signal.

[0156] The present disclosure provides a device for displaying page view layout information, which includes: Figure 10 The device shown, and: the device also includes:

[0157] A sixth receiving module, configured to receive a two-finger sliding touch signal;

[0158] A seventh receiving module is configured to adjust a zoom ratio of the three-dimensional effect image according to the two-finger sliding touch signal.

[0159] An embodiment of the present disclosure provides a device for displaying page view layout information, the device comprising:

[0160] processor;

[0161] a memory for storing processor-executable instructions;

[0162] The processor is configured to execute the executable instructions in the memory to implement the steps of the above method.

[0163] In an embodiment of the present disclosure, a non-transitory computer-readable storage medium is provided, on which executable instructions are stored. When the executable instructions are executed by a processor, the steps of the above method are implemented.

[0164] Figure 11 1 is a block diagram of an apparatus 1100 for displaying page view layout information according to an exemplary embodiment. For example, the apparatus 1100 may be a mobile phone, a computer, a digital broadcast terminal, a messaging device, a game console, a tablet device, a medical device, a fitness device, a personal digital assistant, etc.

[0165] Reference Figure 11 , device 1100 may include one or more of the following components: a processing component 1102 , a memory 1104 , a power component 1106 , a multimedia component 1108 , an audio component 1110 , an input / output (I / O) interface 1112 , a sensor component 1114 , and a communication component 1116 .

[0166] The processing component 1102 generally controls the overall operation of the device 1100, such as operations associated with display, phone calls, data communications, camera operation, and recording operations. The processing component 1102 may include one or more processors 1120 to execute instructions to perform all or part of the steps of the above-described method. In addition, the processing component 1102 may include one or more modules to facilitate interaction between the processing component 1102 and other components. For example, the processing component 1102 may include a multimedia module to facilitate interaction between the multimedia component 1108 and the processing component 1102.

[0167] The memory 1104 is configured to store various types of data to support the operation of the device 1100. Examples of such data include instructions for any application or method operating on the device 1100, contact data, phone book data, messages, pictures, videos, etc. The memory 1104 can be implemented by any type of volatile or non-volatile storage device or a combination thereof, such as static random access memory (SRAM), electrically erasable programmable read-only memory (EEPROM), erasable programmable read-only memory (EPROM), programmable read-only memory (PROM), read-only memory (ROM), magnetic memory, flash memory, magnetic disk, or optical disk.

[0168] The power component 1106 provides power to the various components of the device 1100. The power component 1106 may include a power management system, one or more power supplies, and other components associated with generating, managing, and distributing power to the device 1100.

[0169] The multimedia component 1108 includes a screen that provides an output interface between the device 1100 and the user. In some embodiments, the screen may include a liquid crystal display (LCD) and a touch panel (TP). If the screen includes a touch panel, the screen may be implemented as a touch screen to receive input signals from the user. The touch panel includes one or more touch sensors to sense touches, slides, and gestures on the touch panel. The touch sensor can not only sense the boundaries of the touch or slide action, but also detect the duration and pressure associated with the touch or slide operation. In some embodiments, the multimedia component 1108 includes a front camera and / or a rear camera. When the device 1100 is in an operating mode, such as a shooting mode or a video mode, the front camera and / or the rear camera can receive external multimedia data. Each front camera and rear camera can be a fixed optical lens system or have a focal length and optical zoom capability.

[0170] The audio component 1110 is configured to output and / or input audio signals. For example, the audio component 1110 includes a microphone (MIC) that is configured to receive external audio signals when the device 1100 is in an operating mode, such as a call mode, a recording mode, and a voice recognition mode. The received audio signal can be further stored in the memory 1104 or transmitted via the communication component 1116. In some embodiments, the audio component 1110 also includes a speaker for outputting audio signals.

[0171] I / O interface 1112 provides an interface between processing component 1102 and peripheral interface modules, such as a keyboard, click wheel, buttons, etc. These buttons may include but are not limited to: a home button, volume buttons, a start button, and a lock button.

[0172] Sensor assembly 1114 includes one or more sensors for providing various aspects of the status assessment of device 1100. For example, sensor assembly 1114 can detect the open / closed state of device 1100, the relative positioning of components, such as the display and keypad of device 1100. Sensor assembly 1114 can also detect changes in the position of device 1100 or a component of device 1100, the presence or absence of user contact with device 1100, the orientation or acceleration / deceleration of device 1100, and changes in the temperature of device 1100. Sensor assembly 1114 can include a proximity sensor configured to detect the presence of nearby objects without any physical contact. Sensor assembly 1114 can also include an optical sensor, such as a CMOS or CCD image sensor, for use in imaging applications. In some embodiments, sensor assembly 1114 can also include an accelerometer, a gyroscope, a magnetic sensor, a pressure sensor, or a temperature sensor.

[0173] The communication component 1116 is configured to facilitate wired or wireless communication between the device 1100 and other devices. The device 1100 can access a wireless network based on a communication standard, such as WiFi, 2G or 3G, or a combination thereof. In an exemplary embodiment, the communication component 1116 receives a broadcast signal or broadcast-related information from an external broadcast management system via a broadcast channel. In an exemplary embodiment, the communication component 1116 also includes a near field communication (NFC) module to facilitate short-range communication. For example, the NFC module can be implemented based on radio frequency identification (RFID) technology, infrared data association (IrDA) technology, ultra-wideband (UWB) technology, Bluetooth (BT) technology and other technologies.

[0174] In an exemplary embodiment, the apparatus 1100 may be implemented by one or more application-specific integrated circuits (ASICs), digital signal processors (DSPs), digital signal processing devices (DSPDs), programmable logic devices (PLDs), field programmable gate arrays (FPGAs), controllers, microcontrollers, microprocessors, or other electronic components to perform the above-described methods.

[0175] In an exemplary embodiment, a non-transitory computer-readable storage medium including instructions is also provided, such as a memory 1104 including instructions, and the instructions can be executed by the processor 1120 of the apparatus 1100 to perform the above method. For example, the non-transitory computer-readable storage medium can be a ROM, a random access memory (RAM), a CD-ROM, a magnetic tape, a floppy disk, an optical data storage device, etc.

[0176] Other embodiments of the present invention will readily occur to those skilled in the art upon consideration of the specification and practice of the invention disclosed herein. This application is intended to cover any variations, uses, or adaptations of the present invention that follow the general principles of the present invention and include common knowledge or customary techniques in the art not disclosed herein. The description and examples are to be considered as exemplary only, with the true scope and spirit of the present invention being indicated by the following claims.

[0177] It should be understood that the present invention is not limited to the exact construction that has been described above and shown in the drawings, and that various modifications and changes may be made without departing from the scope thereof, which is limited only by the appended claims.

Claims

1. A method for displaying page view layout information, applied to a mobile terminal, characterized in that: include: Determine the view layers contained in the current display interface, the coverage area borders of each control corresponding to each view layer, and the hierarchical structure between view layers; Displaying a three-dimensional rendering, the three-dimensional rendering including view layers located in different planes and conforming to the hierarchical structure, with coverage area borders of controls belonging to the same view layer located in the same plane, and controls corresponding to coverage area borders located in the same plane located at the same level in the hierarchical structure, so as to demonstrate the hierarchical structure between the view layers and the positional relationship of the controls, and determine the overdraw area; The display of the three-dimensional effect diagram includes: displaying the attribute information of the control within the coverage area border of all controls in each view layer; The attribute information includes at least one of the following: name and type.

2. The method for displaying page view layout information according to claim 1, wherein: The method further includes receiving a signal for instructing to display property information of the control within the coverage area border of all controls in each viewing layer.

3. The method for displaying page view layout information according to claim 1, wherein: The displaying of the three-dimensional effect image includes: displaying the coverage area border of the control in a set color; or, The method further includes: receiving a set color selected by a user; The displaying of the three-dimensional effect image includes: displaying the coverage area border of the control in the set color selected by the user.

4. The method for displaying page view layout information according to claim 1, wherein: The displaying of the three-dimensional effect diagram includes: displaying the attribute information of the control within the coverage area border of all controls in the view layer that meets the first setting rule; or; The method further includes: receiving a signal for instructing to display attribute information of the control within a coverage area border of all controls in a view layer that meets a first setting rule; The displaying of the three-dimensional effect diagram includes: displaying the attribute information of the control within the coverage area border of all controls in the view layer that meets the first setting rule.

5. The method for displaying page view layout information according to claim 1, wherein: The displaying of the three-dimensional effect diagram comprises: displaying a pattern of the control within a border of a coverage area of ​​all controls in a view layer including a graphic frame; or; The method further includes: receiving a pattern for indicating that the control is displayed within a coverage area border of all controls in the view layer including the frame; The display of the three-dimensional effect diagram includes: displaying the control pattern within the coverage area border of all controls in the view layer including the graphic frame.

6. The method for displaying page view layout information according to claim 1, wherein: The method further includes: receiving a single-finger sliding touch signal; and adjusting a display angle of the three-dimensional effect image according to the single-finger sliding touch signal.

7. The method for displaying page view layout information according to claim 1, wherein: The method further includes: receiving a two-finger sliding touch signal; and adjusting the scaling ratio of the three-dimensional effect image according to the two-finger sliding touch signal.

8. A device for displaying page view layout information, applied to a mobile terminal, characterized in that: include: A determination module is used to determine the view layers contained in the current display interface, the coverage area borders of each control corresponding to each view layer, and the hierarchical structure between view layers; a first display module, configured to display a three-dimensional rendering, the three-dimensional rendering including view layers located in different planes and conforming to the hierarchical structure, wherein the coverage area borders of controls belonging to the same view layer are located in the same plane, and the controls corresponding to the coverage area borders located in the same plane are located at the same level in the hierarchical structure, so as to demonstrate the hierarchical structure between the view layers and the positional relationship of the controls, and determine the overdrawing area; The display of the three-dimensional effect diagram includes: displaying the attribute information of the control within the coverage area border of all controls in each view layer; The attribute information includes at least one of the following: name and type.

9. The device for displaying page view layout information according to claim 8, wherein: The device further comprises: The first receiving module is configured to receive a signal for instructing to display property information of a control within a coverage area border of all controls in each viewing layer.

10. The device for displaying page view layout information according to claim 8, wherein: The displaying of the three-dimensional effect image includes: displaying the coverage area border of the control in a set color; or, The device further comprises: A fourth receiving module, configured to receive a set color selected by a user; The fifth display module is used to display the coverage area border of the control in the set color selected by the user.

11. The device for displaying page view layout information according to claim 8, wherein: The displaying of the three-dimensional effect diagram includes: displaying the attribute information of the control within the coverage area border of all controls in the view layer that meets the first setting rule; or; The device further comprises: A second receiving module is configured to receive a signal for instructing to display the property information of the control within the coverage area border of all controls in the view layer that meets the first setting rule; The third display module is used to display the attribute information of the control within the coverage area frame of all controls in the view layer that meets the first setting rule.

12. The device for displaying page view layout information according to claim 8, wherein: The displaying of the three-dimensional effect diagram includes: displaying the pattern of the control within the coverage area frame of all controls in the view layer including the graphic frame; or; The device further comprises: A third receiving module is used to receive a pattern for indicating that the control is displayed within the border of the coverage area of ​​all controls in the view layer including the frame; The fourth display module is used to display the control pattern within the coverage area frame of all controls in the view layer including the graphic frame.

13. The device for displaying page view layout information according to claim 8, wherein: The device further comprises: A fifth receiving module, configured to receive a single-finger sliding touch signal; A sixth receiving module is configured to adjust a display angle of the three-dimensional effect image according to the single-finger sliding touch signal.

14. The device for displaying page view layout information according to claim 8, wherein: The device further comprises: A sixth receiving module, configured to receive a two-finger sliding touch signal; A seventh receiving module is configured to adjust a zoom ratio of the three-dimensional effect image according to the two-finger sliding touch signal.

15. A device for displaying page view layout information, characterized in that: include: processor; a memory for storing processor-executable instructions; The processor is configured to execute the executable instructions in the memory to implement the steps of the method according to any one of claims 1 to 7.

16. A non-transitory computer-readable storage medium having executable instructions stored thereon, characterized in that: When the executable instruction is executed by a processor, the steps of the method according to any one of claims 1 to 7 are implemented.

Images