Interface display method and device, computer device, and storage medium

Abstract

The embodiment of the application belongs to the field of artificial intelligence, and relates to an interface display method. When an interface display request is received, electronic device information and interface display content used for interface display are acquired. When it is determined according to the electronic device information that the display screen of the electronic device is a special-shaped screen, model data of the special-shaped screen is acquired according to a preset sniffing mode. In a preset interface layout scheme, a target interface layout scheme matched with the model data is searched, and interface display elements are displayed according to the target interface layout scheme. In addition, the application also relates to blockchain technology. The device information of the display screen of each electronic device of different types and the interface layout scheme are stored in a blockchain. The application matches the corresponding interface layout scheme according to the identified special-shaped screen, so that the interface display elements can be adaptively displayed according to different shapes of the interface, the interface display effect is improved, and the adaptive efficiency of interface display is improved.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of artificial intelligence, and in particular to an interface display method and device, a computer device, and a storage medium. BACKGROUND

[0002] With the rapid development of technology, electronic devices with display functions are increasingly diversified, and are not limited to electronic devices including regular display screens, but also include electronic devices with irregularly shaped display screens such as curved screens and notch screens. However, there are generally two ways to display interface content, one is to directly display according to the basic interface of an application, that is, to display according to a regular interface, rather than to adaptively display according to the shape of the display screen of an electronic device, and the other is to forcibly stretch the basic interface to the same size as the display screen for display. These two interface display methods are prone to cause deformation of interface content display, resulting in distorted interface content display and poor display effect. SUMMARY

[0003] The embodiments of the present application aim to provide an interface display method and device, a computer device, and a storage medium to solve the problem of poor interface content display effect.

[0004] To solve the above technical problem, the embodiments of the present application provide an interface display method, which adopts the technical solution as follows:

[0005] When an interface display request is received, electronic device information and interface display elements used for interface display are obtained;

[0006] When it is determined according to the electronic device information that the display screen of the electronic device is a special-shaped screen, model data of the special-shaped screen is obtained according to a preset sniffing mode, wherein the sniffing mode is used to determine the area of the special-shaped screen;

[0007] In a preset interface layout scheme, a target interface layout scheme matching the model data is searched for;

[0008] The interface display elements are displayed according to the target interface layout scheme.

[0009] To solve the above technical problem, the embodiments of the present application also provide an interface display device, which adopts the technical solution as follows:

[0010] The obtaining module is configured to, when an interface display request is received, obtain electronic device information and interface display elements used for interface display;

[0011] The sniffing module is configured to, when it is determined according to the electronic device information that the display screen of the electronic device is a special-shaped screen, obtain model data of the special-shaped screen according to a preset sniffing mode, wherein the sniffing mode is used to determine the area of the special-shaped screen;

[0012] The searching module is configured to search for a target interface layout scheme matching the model data from preset interface layout schemes.

[0013] The displaying module is configured to display the interface display element according to the target interface layout scheme.

[0014] To solve the above technical problems, the embodiment of the application further provides a computer device, comprising a memory and a processor, the memory stores computer readable instructions, and the processor executes the computer readable instructions to realize the steps of the interface display method.

[0015] To solve the above technical problems, the embodiment of the application further provides a computer readable storage medium, the computer readable storage medium stores computer readable instructions, and the computer readable instructions are executed by the processor to realize the steps of the interface display.

[0016] Compared with the prior art, the embodiment of the application has the following beneficial effects:

[0017] By receiving the interface display request, the electronic device information and the interface display content are obtained; when it is determined according to the electronic device information that the display screen of the electronic device is a special-shaped screen, the model data of the special-shaped screen is obtained according to a preset sniffing mode, wherein the sniffing mode is used to determine the area of the special-shaped screen; in the preset interface layout scheme, a target interface layout scheme matching the model data is searched for; and the interface display element is displayed according to the target interface layout scheme. According to the application, the interface layout scheme corresponding to the different special-shaped screens is matched according to the recognized electronic device information, so that the interface display element is not only reasonably displayed according to the display screen of different shapes, but also the best interface layout scheme is found through the searching method, which not only improves the interface display effect, but also improves the adaptive efficiency of the interface display. BRIEF DESCRIPTION OF DRAWINGS

[0018] To more clearly illustrate the schemes in the application, the following will briefly introduce the drawings needed in the description of the embodiments of the application. Obviously, the drawings in the following description are some embodiments of the application, and other drawings can be obtained by those skilled in the art without creative labor.

[0019] Figure 1 is an exemplary system architecture diagram to which the application can be applied;

[0020] Figure 2 is a flowchart of one embodiment of the interface display method of the application;

[0021] Figure 3 is a schematic diagram of different special-shaped screens in the embodiment of the application;

[0022] Figure 4 is a schematic diagram of a coordinate system in which the special-shaped screen in the embodiment of the present application is located;

[0023] Figure 5 is a flow chart of a specific implementation of step S202;

[0024] Figure 6 is a schematic diagram of a display effect of the arrangement attribute of the layout unit in the embodiment of the present application;

[0025] Figure 7 is a schematic diagram of one of the display effects in the interface layout scheme of the upper special-shaped screen in the embodiment of the present application;

[0026] Figure 8 is a structural schematic diagram of one embodiment of the interface display device according to the present application;

[0027] Figure 9 is a structural schematic diagram of one embodiment of the computer device according to the present application. DETAILED DESCRIPTION

[0028] Unless otherwise defined, all technical and scientific terms used herein have the same meaning as commonly understood by one of ordinary skill in the art to which this application belongs; the terminology used in the description herein is for the purpose of describing particular embodiments only and is not intended to be limiting of the present application; the description and claims of this application as well as the above abstract are intended to cover any and all adaptations or variations of the present application; therefore, it is manifestly intended that this application be limited only by the following claims. In this document, the terms "comprise" and "comprising" and the like are used in their open-ended sense, and specifically do not exclude the presence of other elements than the ones listed. The terms "first", "second" and the like, as used in the description and the claims, do not have any specific meaning, and are used only to distinguish between different objects.

[0029] Reference herein to "an embodiment" means that a particular feature, structure, or characteristic described in connection with the embodiment is included in at least one embodiment of the application. The appearances of the phrase "in an embodiment" in various places in the specification are not necessarily all referring to the same embodiment, nor are they necessarily all directed to the same embodiment, or to a single alternative embodiment. It is expressly understood that any of the embodiments described herein can be incorporated into any other embodiment.

[0030] In order for those skilled in the art to better understand the scheme of the present application, the technical solutions in the embodiments of the present application will be described clearly and completely in conjunction with the drawings as follows.

[0031] As Figure 1As shown, the system architecture 100 can include terminal devices 101, 102, 103, a network 104 and a server 105. The network 104 is a medium for providing communication links between the terminal devices 101, 102, 103 and the server 105. The network 104 can include various connection types, such as wired, wireless communication links or optical fiber cables, etc.

[0032] A user can use the terminal devices 101, 102, 103 to interact with the server 105 through the network 104 to receive or send messages, etc. Various communication client applications can be installed on the terminal devices 101, 102, 103, such as web browser applications, shopping applications, search applications, instant messaging tools, email clients, social platform software, etc.

[0033] The terminal devices 101, 102, 103 can be various electronic devices with display screens and supporting web browsing, including but not limited to smart phones, tablet computers, e-book readers, MP3 (Moving Picture Experts Group Audio Layer III) players, MP4 (Moving Picture Experts Group Audio Layer IV) players, laptop computers and desktop computers, etc.

[0034] The server 105 can be a server providing various services, such as a background server supporting the pages displayed on the terminal devices 101, 102, 103.

[0035] It should be noted that the interface display method provided by the embodiments of the present application is generally executed by a server / terminal device, and accordingly, the interface display apparatus is generally provided in a server / terminal device.

[0036] It should be understood that Figure 1 The number of terminal devices, networks and servers in

[0037] With reference to Figure 2 , a flow chart of one embodiment of the interface display method of the present application is shown. The interface display method includes the following steps:

[0038] S201: When receiving an interface display request, obtaining electronic device information and interface display elements for interface display.

[0039] In the present embodiment, the interface display method is run on an electronic device (for example Figure 1The interface display request can be obtained by a wired connection or a wireless connection, so that the interface is displayed on the electronic device according to the interface display request. It should be noted that the wireless connection can include, but is not limited to, 3G / 4G / 5G connection, WiFi connection, Bluetooth connection, WiMA interface display connection, Zigbee connection, UWB (ultra wideband) connection, and other now known or future developed wireless connection methods.

[0040] The interface display request is used to indicate that the current electronic device performs a visualization operation on the interface display element. The interface display request carries electronic device information of the current electronic device, and the electronic device information includes, but is not limited to, the electronic device name, the brand, the production batch, the resolution of the electronic device display screen, the display screen size, the display screen type, the operating system, and the system version. The interface display element can be a text, a static pattern, or a dynamic video to be displayed.

[0041] In some embodiments, for example, after the user selects a text (i.e., an interface display element) in the display screen of the electronic device and clicks the display control, the front end of the electronic device generates an interface display request based on the selected display element and the click operation of the display control, and sends the interface display request to the electronic device terminal. The electronic device terminal reads the interface display request to obtain the interface display element and the electronic device information of the interface display.

[0042] S202: When it is determined according to the electronic device information that the display screen of the electronic device is a special-shaped screen, model data of the special-shaped screen is obtained according to a preset sniffing mode, wherein the sniffing mode is used to determine the area of the special-shaped screen.

[0043] The special-shaped screen is an irregularly shaped display screen, such as Figure 3 As shown in Figure 3 are schematic diagrams of different special-shaped screens in the embodiments of the present application. The special-shaped screen can be classified according to the area position of the irregular shape, such as Figure 3 As shown, the upper special-shaped screen, the lower special-shaped screen, the left special-shaped screen, the right special-shaped screen, and the multi-directional special-shaped screen are sequentially represented.

[0044] When the display screen type is read from the electronic device information as a special-shaped screen, the size of the irregular area in the special-shaped screen is calculated by the sniffing mode, and then the model data of the special-shaped screen is constructed by the modeling tool and the size of the irregular area. The sniffing mode refers to constructing the model data of the special-shaped screen by obtaining the height value corresponding to each point in the special-shaped screen, and then constructing the model data according to the height value corresponding to each point. The model data reflects the area of the special-shaped screen, that is, the area of the special-shaped screen is determined.

[0045] To facilitate the representation of irregularly shaped screens, this application embodiment defaults to taking the intersection of the uppermost boundary (or its extension) and the leftmost boundary (or its extension) of the displayable portion of the screen as the origin. Figure 4 As shown, Figure 4 This is a schematic diagram of the coordinate system of the irregularly shaped screen in the embodiments of this application, with the uppermost boundary of the irregularly shaped screen as the x-axis and the leftmost boundary as the y-axis.

[0046] It should be noted that, Figure 4 This is just one implementation of the coordinate system for irregularly shaped screens. Alternatively, the origin can be set based on the intersection points of other boundaries of the irregularly shaped screen.

[0047] In some implementations, when the irregular screen is an upper irregular screen, a sniffing method is used to obtain the height range of the upper irregular part of the displayable area, for example, the height range is 0dp to 20dp, and the coordinates of each point in the area of ​​the irregular screen on the x-axis of a preset coordinate system (i.e. the width of the irregular screen), so as to construct the model data of the upper irregular screen.

[0048] In some implementations, when the irregular screen is a left-side irregular screen, a sniffing method is used to obtain the width range of the left irregular part of the displayable area, such as the height range of 0dp to 100dp, and the y-coordinate of each point in the area of ​​the irregular screen on the preset coordinate system (i.e., the height of the irregular screen), so as to construct the model data of the left-side irregular screen.

[0049] In some implementations, when the irregular screen is a right-side irregular screen, a sniffing method is used to obtain the width range of the right-side irregular part of the displayable area, for example, the height range is 1100dp to 1200dp, as well as the y-coordinate of each point in the area of ​​the irregular screen on the preset coordinate system (i.e., the width of the irregular screen), so as to construct the model data of the right-side irregular screen.

[0050] In some implementations, when the irregular screen is a bottom irregular screen, a sniffing method is used to obtain the height range of the bottom irregular part of the displayable area, for example, the height range is 2700dp to 2080dp, and the coordinates of each point in the area of ​​the irregular screen on the x-axis of a preset coordinate system (i.e. the width of the irregular screen), so as to construct the model data of the bottom irregular screen.

[0051] In some implementations, when the irregular screen is a multi-sided irregular screen, the model data for each side of the multi-sided irregular screen can refer to the construction methods of the left irregular screen, the upper irregular screen, the right irregular screen, and the lower irregular screen, which will not be repeated here.

[0052] Continue to refer to Figure 5 , Figure 5is a flowchart of one specific implementation of step S202. When it is determined according to the electronic device information that the display screen of the electronic device is a special-shaped screen, the model data of the special-shaped screen is acquired according to a preset sniffing mode, and the specific steps are as follows:

[0053] S2021: When the total width and total height of the display screen are acquired from the electronic device information, the total width is divided into multiple unit widths, and each unit width is taken as a point.

[0054] Specifically, by reading the screen size of the electronic device information, the total width of the display screen is acquired, for example, the total width of the display screen is 1080px and the total height is 1920px. In the embodiment of the present application, when the total width of the display screen is known as x, the unit width size is set as m, for a regular display screen, the total width can be divided into x / m=n unit widths of equal size. For a special-shaped screen, there are some incomplete unit widths m*a in the multiple unit widths, where a is the proportion of the unit width, and at this time the total width is x=m*(n-1)+m*a. As shown in 4-a of FIG. 4, taking the topmost special-shaped diagram as an example, the top end of the topmost boundary along the line intersects with the top end of the leftmost boundary along the line to obtain the origin O, so as to construct the current coordinate system, where each gray grid on the coordinate system represents a unit width, and each unit width is taken as a point. The position of the display screen in the x-axis of the coordinate system can be calculated by using the unit width, Figure 4 Figure 4 The distance from the point O to the point Q shown in 4-a of FIG. 4 is the total width, and the distance from the point O to the point C is the total height of the display screen.

[0055] S2022: The distance between each point and the top end of the display screen is taken as a first distance.

[0056] Specifically, according to the position of each point in the coordinate system, the distance between each point and the top end of the display screen is acquired as a first distance.

[0057] S2023: The first distance of each point is subtracted from the total height respectively to obtain the height value of each point.

[0058] In the embodiment of the present application, a set can be established to store the height value of each point, and the set takes the total width of the special-shaped screen as the dimension, for example, the width of the special-shaped screen is 1080px, and each unit width is set to 1, that is, the set can store the height value of 1080 points. The topmost boundary of the special-shaped screen is taken as the x-axis, and the leftmost boundary is taken as the y-axis, each point is traversed from the position where no special-shaped area appears, and the height value of the acquired point is written into the corresponding position of the set.

[0059] As shown in Figure 4 ​As shown in 4-a of FIG. 4, the total height h of the special-shaped screen is the distance between point O and point Q, and the total width is the distance between point O and point C, that is, 5 unit widths. Starting from the point where point C is located (that is, the first point) and ending at the point where point D is located (that is, the fifth point), the first distance h1 of point C can be obtained as the distance between point A and point C, and the first distance h5 of point D can be obtained as the distance between point D and point B. The first distance h2 of the second point, the first distance h3 of the third point, and the first distance h4 of the fourth point are obtained in the same way as the first distance of the point where point C is located or the point where point D is located. Here, the set of the special-shaped screen can be represented as K = (h-h1, h-h2, h-h3, h-h4, h-h5).

[0060] It should be noted that the height value of the point here is the height value of each point in the special-shaped region of the upper special-shaped screen, that is, the height value of each point of the curve AB shown in 4-a of FIG. 4. Figure 4

[0061] By dividing the total width into a plurality of unit widths when obtaining the total width and the total height of the display screen from the electronic device information, taking each unit width as a point, taking the distance between each point and the top end of the display screen as a first distance, and subtracting the first distance of each point from the total height to obtain the height value of each point, the model data of the region of the special-shaped screen is constructed according to the height value of each point. Not only improves the accuracy of obtaining the size of the special-shaped screen, but also improves the efficiency of constructing the region of the special-shaped screen.

[0062] S2024: Constructing model data of the region of the special-shaped screen according to the height value of each point.

[0063] The height value corresponding to each point is used to construct the model data of the region of the special-shaped screen, that is, the size of the region of the special-shaped screen is constructed, as shown in the region of each type of special-shaped screen shown in 4-b of FIG. 4. Figure 3

[0064] In some embodiments, another specific implementation of step S202 can include the following:

[0065] When the total height of the display screen is not detected by the electronic device information, the display screen is divided into a preset number of rows;

[0066] Taking the row with the longest width as a reference row, and dividing the reference row into a plurality of points;

[0067] Obtaining the distance between each point in the reference row and the top end of the display screen as a second distance, and obtaining the maximum second distance as a third distance from the second distance, and the remaining second distances as fourth distances;

[0068] ​​Subtract the fourth distance of each point from the third distance, and take the absolute value of the subtraction result to obtain the height value of each point.

[0069] Specifically, when the electronic device information does not include the total height of the display screen, the methods for determining the total height of the display screen include: establishing a coordinate system by intersecting the top edge of the topmost boundary of the display screen and the top edge of the leftmost boundary; dividing the display screen into multiple rows by using the unit width as the row width; randomly reading the width of a preset number of rows, or reading the row width by taking the row corresponding to the first preset number of terms of the Fibonacci sequence, or traversing each row of the display screen and taking the row with the longest width as the reference row; dividing the reference row into multiple points according to the unit width and determining the distance from each point to the top of the display screen to obtain the second distance of each point; taking the maximum second distance as the total height of the display screen (i.e., the third distance), and then taking the remaining second distance as the fourth distance; subtracting the third distance from the fourth distance of each point, and taking the absolute value of the subtraction result to obtain the height value of each point.

[0070] like Figure 4 As shown in 4-a, from the traversal rows, we can obtain the reference. From the reference rows, we know that the second distance includes the distance between point E and point O (here, let's call it H1), the distance between point H and point I (here, let's call it H2), and the distance between point F and point Q (here, let's call it H3). We know that H2 is the largest, so we take H2 as the third distance. The height value corresponding to point E is |H1-H2|, and the height value corresponding to point F is |H3-H2|. The height values ​​of other points in the reference rows are obtained in the same way as above, and the height values ​​of each point are stored in a set. The set can be represented as K = (|H1-H2|, ..., |H3-H2|).

[0071] Even if the total height of the display screen cannot be obtained from the electronic device information using the above method, a reference row can be determined by traversing the rows, which improves the efficiency of reading the row length. At the same time, the height value of the point can be calculated by determining the total height, which improves the accuracy of obtaining the height value.

[0072] S203: In the preset interface layout schemes, find the target interface layout scheme that matches the model data.

[0073] The preset interface layout scheme can be a display strategy that users or developers design and upload to the cloud server. The interface layout scheme includes layout strategies for normal displays and various irregularly shaped screens.

[0074] When the model data of the special-shaped screen of the electronic device is obtained through electronic device information and through sniffing, a similar interface layout scheme is found through cloud computing and big data technology, and the user or the developer can modify the matched interface layout scheme to obtain a target interface layout scheme, thereby improving the query efficiency of the interface layout scheme.

[0075] In some embodiments, the application can upload the finally determined target interface layout scheme to a cloud server, and the uploaded content includes electronic device information related to the target interface layout scheme, such as electronic device type, model data of the special-shaped screen (i.e., reference special-shaped model), display screen size, and target interface layout scheme, so as to enrich the data of the interface layout scheme and provide more choices for subsequent matching of the special-shaped screen to the interface layout scheme, thereby improving the accuracy of the matching.

[0076] In some embodiments, the preset interface layout scheme includes various electronic device types, reference special-shaped models corresponding to the electronic device types, and interface layout strategies of the reference special-shaped models.

[0077] In the preset interface layout scheme, the target interface layout scheme matching the model data is found, including:

[0078] When the electronic device information matches the electronic device type, the model data is matched with the reference special-shaped model corresponding to the electronic device type.

[0079] When the matching results are the same, the interface layout strategy of the reference special-shaped model is obtained, and the interface layout strategy is used as the target layout interface scheme.

[0080] The electronic device type can be the brand type to which the electronic device belongs or the various models corresponding to the brand type, and the interface layout scheme of the brand type and model can be found in the cloud server according to the brand type and model.

[0081] The electronic device type to be matched by reading the electronic device information is matched, the reference special-shaped model of the electronic device type is obtained, and the similarity between the reference special-shaped model and the model data of the special-shaped screen of the current electronic device is calculated. The similarity can be calculated by template matching, feature matching, or deep learning algorithm, which is not limited here. When the similarity is greater than or equal to a preset threshold, i.e., the matching results are the same, the interface layout strategy of the reference special-shaped model is obtained and sent to the terminal for recommendation.

[0082] Further, the interface layout strategy of the reference special-shaped model can include multiple strategies, and when there are multiple interface layout strategies, the selected interface layout strategy by the user is used as the target layout interface scheme.

[0083] In some embodiments, the preset interface layout scheme includes each reference special-shaped model and an interface layout strategy of the reference special-shaped model.

[0084] In the preset interface layout scheme, searching for a target interface layout scheme matching the model data further includes:

[0085] When the electronic device information does not match the electronic device type, matching the model data with each reference special-shaped model;

[0086] When the matching results are different, searching for a reference special-shaped model in proportional relationship with the model data;

[0087] Adjusting an interface layout strategy of the reference special-shaped model in proportional relationship to obtain a target interface layout scheme.

[0088] Specifically, when the corresponding electronic device information is matched, the model data of the special-shaped screen is matched with all reference special-shaped models in the cloud server by the above-mentioned similarity calculation method. When the similarity is less than a preset threshold, it means that the same reference special-shaped model cannot be matched. At this time, the reference special-shaped model with a similarity within a certain range can be scaled down or up by a certain proportion, so that the reference special-shaped model and the model data are of the same size, and the scaled or enlarged reference special-shaped model is matched with the model data. If the matching is successful, it means that the model data and the reference special-shaped model are in proportional relationship, and the interface layout scheme of the reference special-shaped model is obtained. The interface layout scheme is adjusted according to the proportional relationship, for example, the interface display elements in the interface layout scheme are scaled up or down at the same proportion, and the adjusted interface layout strategy is taken as a target interface layout scheme.

[0089] In some embodiments, after the interface layout strategy of the reference special-shaped model in proportional relationship is adjusted to obtain a target interface layout scheme, the method further includes:

[0090] Saving the adjusted interface layout strategy to a database for storing interface layout schemes.

[0091] Specifically, the adjusted interface layout strategy, the proportional relationship, the model data of the special-shaped screen, the electronic device information, etc. are uploaded to the cloud server as information of the interface layout strategy of a new reference special-shaped model.

[0092] The interface layout strategy includes arrangement attributes of the entire parent layout, a row, a column, and each layout unit. The parent layout is the outermost layout of the entire display screen, and the arrangement attribute of the entire parent layout is a constraint on the overall display of the entire layout. The arrangement attribute of the parent layout includes, but is not limited to, center display, left upper alignment, right lower alignment, row scaling padding, up-down-left-right clipping, and scaling display.

[0093] Specifically, the arrangement attribute of the row is a constraint on the overall display of the row, for example, center display, left or right alignment, row scaling padding, up-down-left-right clipping, and scaling display. The arrangement attribute of the column is the same as that of the row, which will not be described here again.

[0094] S204: Displaying the interface display element according to the target interface layout scheme.

[0095] Specifically, the layout unit refers to the interface display element to be displayed, which can be a pattern, a row of arranged patterns, a column of arranged patterns, or a plurality of rows and columns of simultaneously arranged patterns. The arrangement attribute of the layout unit is a display constraint on a single unit, and the specific arrangement attribute is the same as the arrangement attribute of the row or column, which will not be described here again. For example, Figure 6 FIG. 2 shows the display effect of the arrangement attribute of the layout unit in the embodiment of the present application, and shows the display effect of the layout unit in the center, left upper, and right lower positions.

[0096] In the embodiment of the present application, the model data of the special-shaped screen is used to layout the interface display element according to the arrangement attribute and in combination with the area of the special-shaped screen.

[0097] In some embodiments, the target interface layout scheme includes at least one of the displacement processing, the scaling processing, and the clipping processing of the interface display element in the special-shaped screen.

[0098] Displaying the interface display element according to the target interface layout scheme includes:

[0099] Dividing the area of the special-shaped screen into a special-shaped area and a non-special-shaped area;

[0100] When the target interface layout scheme includes the displacement processing, the interface display element is displaced to the boundary between the special-shaped area and the non-special-shaped area, and the interface is displayed;

[0101] When the target interface layout scheme includes the scaling processing, the interface display element is scaled down according to a first preset ratio, and the scaled-down interface display element is displayed;

[0102] When the target interface layout scheme includes the clipping processing, the interface display element is clipped according to a second preset ratio, and the clipped interface display element is displayed.

[0103] The shifting process includes right shift, left shift, down shift, and up shift.

[0104] In this embodiment, the target interface layout scheme for the irregularly shaped screen can be processed through row attributes or individually by setting a preset number of layout unit arrangement attributes. Specifically, the whole-row adaptation display includes downward shifting, spacing, cropping, and scaling. The downward shifting process can start by shifting the top row of the display screen down a preset number of rows, thus starting the layout from a non-irregular area. For example... Figure 4 As shown in Figure 4-a, the layout begins from row L1 downwards, causing the interface display elements to be laid out from row L1 downwards, resulting in the following layout effect: Figure 7 As shown. Interval processing uses the model data of the irregularly shaped screen. Interface display elements are not deployed in the areas of the irregularly shaped screen, and the gaps between the irregularly shaped screen areas and the interface display elements can also be left un-deployed. The layout effect is as follows. Figure 7 As shown. Alternatively, scaling can be performed to ensure that the interface elements are displayed normally in irregularly shaped screens without compromising their integrity. Scaling is suitable for interface layout elements that are generally text content, i.e., non-graphic content. Cropping can be performed based on the size of the interface elements. For example, if a row contains 5 interface elements, occupying a width of 900dp, and the total length of the row is 1080dp, and a 6th interface element with a width of 200dp needs to be displayed in the same row, the row cannot accommodate the 6th element. In this case, the second preset ratio of the left and right sides of the 6th interface element can be used to crop it so that the cropped 6th interface element can be displayed in the row. For example, if only the width of the 6th interface element is retained (1080dp – 900dp = 180dp), i.e., the size is reduced to 200dp – 180dp = 20dp, then this 20dp is cropped according to the left and right ratio of 1:1.

[0105] In this embodiment, the target interface layout scheme for the irregularly shaped screen on the left can be achieved through operations such as right-shifting, cropping, spacing, and scaling. Specifically, right-shifting can move a preset number of columns to the right from the irregularly shaped area while keeping the rows unchanged, starting the layout process, for example, from... Figure 4L2 of 4-b in the right layout, can be normal display if each row of L2 to the right can be normal display. If the row can not be completely displayed through the right shift processing, the interface display elements in the row can be scaled to be completely displayed. The scaling processing is to scale the interface display elements in the row according to a first preset scale, such as 0.5, 1 or 1.5, to completely display the interface display elements. The interval processing is to not deploy interface display elements in the special-shaped area.

[0106] In the embodiment of the present application, the target interface layout scheme of the right special-shaped screen can be processed by the row attribute, or can be processed separately by setting the attribute of a preset number of interface display elements. For example, when the row where the interface element is located is not moved, if it can still be completely displayed normally, it is displayed normally, otherwise the entire row can be scaled so that the interface display elements can be completely displayed. The left shift processing of the right special-shaped screen can move the special-shaped area to the left by a preset number of columns and keep the row unchanged, and then start the layout. In addition, the adaptive display mode of the right special-shaped screen can also include interval processing, cropping processing and scaling processing, and the specific processing mode is the same as the description of the interface layout scheme of the left special-shaped screen, which will not be repeated here.

[0107] In the embodiment of the present application, the target interface layout scheme of the lower special-shaped screen can be used to layout the interface display elements in the following way: normally layout the interface display elements in the entire row of the special-shaped screen, and when the number of interface display elements exceeds the size of the display screen, set a sliding progress bar at the outermost layer of the display screen to display the interface display elements normally. The upshift processing of the lower special-shaped screen can start the layout by moving the row at the bottom end of the display screen up by a preset number of rows, so that the layout starts from the non-special-shaped area. The adaptive display mode of the lower special-shaped screen can also include interval processing, cropping processing and scaling processing, and the specific layout processing mode is the same as the description of the interface layout scheme of the upper special-shaped screen, which will not be repeated here.

[0108] In the embodiment of the present application, the target interface layout scheme of the multi-sided special-shaped screen is to layout the interface display elements according to the interface layout scheme of each side. When the left special-shaped area of the multi-sided special-shaped screen is used to layout the interface display elements, the interface layout scheme of the left special-shaped screen is used. When the right special-shaped area of the multi-sided special-shaped screen is used to layout the interface display elements, the interface layout scheme of the right special-shaped screen is used. When the upper special-shaped area of the multi-sided special-shaped screen is used to layout the interface display elements, the interface layout scheme of the upper special-shaped screen is used. When the lower special-shaped area of the multi-sided special-shaped screen is used to layout the interface display elements, the interface layout scheme of the lower special-shaped screen is used. The specific layout processing mode of each side is the same as the description of the interface layout scheme of each special-shaped screen, which will not be repeated here.

[0109] In the embodiment of the present application, when the interface display request is received, the electronic device information and the interface display content for interface display are obtained; when it is determined according to the electronic device information that the display screen of the electronic device is a special-shaped screen, the model data of the special-shaped screen is obtained according to a preset sniffing mode, wherein the sniffing mode is used to determine the area of the special-shaped screen; in a preset interface layout scheme, a target interface layout scheme matching the model data is searched; and the interface display elements are displayed according to the target interface layout scheme, that is, the interface of the different special-shaped screens corresponding to the recognized electronic device information is matched with the corresponding interface layout scheme according to the present application, so that the interface display elements are not only reasonably displayed according to the display screens of different shapes, but also the best interface layout scheme is found through the searching method, which not only improves the interface display effect, but also improves the adaptive efficiency of interface display.

[0110] The embodiment of the present application can acquire and process related data based on artificial intelligence technology. Artificial intelligence (AI) is the use of digital computers or computer-controlled machines to simulate, extend and expand human intelligence, perceive the environment, acquire knowledge and use knowledge to obtain the best results.

[0111] The basic technology of artificial intelligence generally includes technologies such as sensors, special artificial intelligence chips, cloud computing, distributed storage, big data processing technology, operation / interaction system, mechatronics, etc. The software technology of artificial intelligence mainly includes computer vision technology, robot technology, biometric technology, speech processing technology, natural language processing technology, and machine learning / deep learning, etc. A person skilled in the art can understand that all or part of the processes in the above-mentioned embodiment methods can be completed by computer readable instructions instructing related hardware, and the computer readable instructions can be stored in a computer readable storage medium. When the program is executed, it can include the processes of the above-mentioned embodiments of each method. Among them, the storage medium can be a magnetic disk, an optical disk, a read-only memory (ROM) and other non-volatile storage media, or a random access memory (RAM) and the like.

[0112] It should be understood that although each step in the flowchart of the accompanying drawings is shown in sequence according to the direction of the arrow, these steps are not necessarily executed in sequence according to the direction of the arrow. Unless explicitly stated herein, the execution of these steps is not strictly limited in sequence, and they can be executed in other sequences. Moreover, at least part of the steps in the flowchart of the accompanying drawings can include multiple sub-steps or multiple stages, which are not necessarily executed at the same time, but can be executed at different times, and the execution sequence is not necessarily sequential, but can be alternately executed with at least part of other steps or sub-steps or stages of other steps.

[0113] Further referring to Figure 8 , as an implementation of the method shown in the above Figure 2 , the present application provides an embodiment of an interface display device, which corresponds to the method embodiment shown in Figure 2 , and the device can be specifically applied to various electronic devices.

[0114] As shown in Figure 8 , the interface display device 800 described in the embodiment includes an acquisition module 801, a sniffing module 802, a searching module 803, and a display module 804. Among them:

[0115] The acquisition module 801 is configured to acquire electronic device information and interface display elements for interface display when receiving an interface display request.

[0116] The sniffing module 802 is configured to acquire model data of the special-shaped screen according to a preset sniffing mode when it is determined according to the electronic device information that the display screen of the electronic device is a special-shaped screen, wherein the sniffing mode is used to determine the area of the special-shaped screen.

[0117] The searching module 803 is configured to search for a target interface layout scheme matching the model data in a preset interface layout scheme.

[0118] The display module 804 is configured to display the interface display elements according to the target interface layout scheme.

[0119] In some embodiments, the sniffing module 802 includes:

[0120] A width dividing unit is configured to acquire the total width of the display screen according to the electronic device information, and divide the total width into multiple unit widths.

[0121] A point acquiring unit is configured to take each unit width as a point, and acquire a height value corresponding to each point.

[0122] A model constructing unit is configured to construct the model data of the area of the special-shaped screen according to the height value corresponding to each point.

[0123] In some embodiments, the point position acquisition unit comprises:

[0124] a region division sub-unit configured to divide the display screen into a plurality of regions in a top-to-bottom direction, each region being composed of a preset number of rows;

[0125] a width acquisition sub-unit configured to acquire, from the regions, a row with the longest width as a reference row;

[0126] a height acquisition sub-unit configured to acquire a vertical height of the reference row to the top of the display screen and a minimum height of each point position in the reference row to the top of the display screen;

[0127] a height determination sub-unit configured to subtract the minimum height from the vertical height to obtain a height value of each point position.

[0128] In some embodiments, the target interface layout scheme comprises at least one of a shift processing, a scaling processing and a clipping processing of the interface display element in the special-shaped screen, and the display module 804 comprises:

[0129] a special-shaped screen division unit configured to divide a region of the special-shaped screen into a special-shaped region and a non-special-shaped region;

[0130] a shift unit configured to, when the target interface layout scheme comprises the shift processing, shift the interface display element to a boundary between the special-shaped region and the non-special-shaped region and perform interface display;

[0131] a scaling unit configured to, when the target interface layout scheme comprises the scaling processing, scale down the interface display element according to a first preset ratio and perform interface display on the scaled-down interface display element;

[0132] a clipping unit configured to, when the target interface layout scheme comprises the clipping processing, clip the interface display element according to a second preset ratio and perform interface display on the clipped interface display element.

[0133] In some embodiments, the preset interface layout scheme comprises various electronic device types, reference special-shaped models corresponding to the electronic device types and interface layout strategies of the reference special-shaped models, and the search module 803 comprises:

[0134] a first matching unit configured to, when the electronic device information matches the electronic device type, match the model data with a reference special-shaped model corresponding to the electronic device type;

[0135] a first acquisition unit configured to, when the matching results are the same, acquire the interface layout strategy of the reference special-shaped model to take the interface layout strategy as the target layout interface scheme.

[0136] In some embodiments, the preset interface layout scheme includes the respective reference special-shaped models and the interface layout strategies of the reference special-shaped models, and the searching module 803 further includes:

[0137] a second matching unit configured to match the model data with the respective reference special-shaped models when the electronic device information does not match the electronic device type;

[0138] a searching unit configured to search for a reference special-shaped model in proportional relationship with the model data when the matching results are different;

[0139] an adjusting unit configured to perform an adjusting operation on the interface layout strategy of the reference special-shaped model in proportional relationship, and to use the adjusted interface layout strategy as the target interface layout scheme.

[0140] In some embodiments, the interface display device further includes:

[0141] a saving module configured to save the adjusted interface layout strategy into a database for storing interface layout schemes.

[0142] As to the interface display device in the above embodiments, the specific manners in which the respective modules perform operations have been described in detail in the embodiments of the method, and thus will not be described in detail here.

[0143] To solve the above technical problems, the embodiments of the present application further provide a computer device. For details, please refer to Figure 9 , Figure 9 The basic structure block diagram of the computer device in the present embodiment is shown in FIG. 9.

[0144] The computer device 9 includes a memory 91, a processor 92, and a network interface 93 which are communicatively connected through a system bus. It should be noted that only the computer device 9 with components 91-93 is shown in the figure, but it should be understood that it is not required to implement all the shown components, and more or fewer components can be alternatively implemented. Among them, those skilled in the art can understand that the computer device herein is a device capable of automatically performing numerical calculation and / or information processing according to pre-set or stored instructions, and its hardware includes but is not limited to microprocessors, application specific integrated circuits (ASICs), field programmable gate arrays (FPGAs), digital signal processors (DSPs), embedded devices, etc.

[0145] The computer device can be a desktop computer, a notebook computer, a palm computer, a cloud server, or the like. The computer device can interact with a user through a keyboard, a mouse, a remote controller, a touchpad, a voice control device, or the like.

[0146] The memory 91 includes at least one type of readable storage medium, such as a flash memory, a hard disk, a multimedia card, a card-type memory (e.g., an SD or D interface display memory, or the like), a random access memory (RAM), a static random access memory (SRAM), a read-only memory (ROM), an electrically erasable programmable read-only memory (EEPROM), a programmable read-only memory (PROM), a magnetic memory, a magnetic disk, an optical disk, or the like. In some embodiments, the memory 91 can be an internal storage unit of the computer device 9, such as a hard disk or a memory of the computer device 9. In other embodiments, the memory 91 can also be an external storage device of the computer device 9, such as a plug-in hard disk, a smart media card (SMC), a secure digital (SD) card, a flash card, or the like. Of course, the memory 91 can include both an internal storage unit and an external storage device of the computer device 9. In this embodiment, the memory 91 is generally used to store an operating system and various application software installed in the computer device 9, such as computer readable instructions of the interface display method, or the like. In addition, the memory 91 can also be used to temporarily store various data that has been output or will be output.

[0147] The processor 92 can be a central processing unit (CPU), a controller, a microcontroller, a microprocessor, or other data processing chip in some embodiments. The processor 92 is generally used to control the overall operation of the computer device 9. In this embodiment, the processor 92 is used to run computer readable instructions or process data stored in the memory 91, such as computer readable instructions of the interface display method.

[0148] The network interface 93 can include a wireless network interface or a wired network interface, and is generally used to establish a communication connection between the computer device 9 and other electronic devices.

[0149] The present application also provides another embodiment, i.e., a computer readable storage medium storing computer readable instructions, which can be executed by at least one processor to make the at least one processor perform the steps of the interface display method as described above.

[0150] Through the description of the above embodiments, those skilled in the art can clearly understand that the above-mentioned example methods can be realized by means of software and a necessary general hardware platform, and of course, they can also be realized by hardware, but in many cases, the former is a better embodiment. Based on such understanding, the technical solutions of the present application can be embodied in the form of a software product in essence or in the form of a part of the prior art that contributes to the present application. The computer software product is stored in a storage medium (such as a ROM / RAM, a magnetic disk, or an optical disk) and includes a plurality of instructions for causing an end device (which can be a mobile phone, a computer, a server, an air conditioner, or a network device) to execute the methods described in the various embodiments of the present application.

[0151] Obviously, the above-described embodiments are only some of the embodiments of the present application, not all the embodiments, and the drawings show the preferred embodiments of the present application, but do not limit the patent scope of the present application. The present application can be implemented in many different forms, and conversely, the purpose of providing these embodiments is to make the disclosure of the present application more thorough and comprehensive. Although the present application has been described in detail with reference to the foregoing embodiments, those skilled in the art can still modify the technical solutions recorded in the foregoing specific embodiments or equivalently replace some of the technical features. Any equivalent structure made by using the content of the specification and drawings, directly or indirectly applied to other related technical fields, is also within the scope of the patent protection of the present application.

Claims

1. An interface display method characterized by, The method comprises the following steps: When receiving an interface display request, obtaining electronic device information and interface display elements for interface display; When it is determined according to the electronic device information that the display screen of the electronic device is a special-shaped screen, obtaining model data of the special-shaped screen according to a preset sniffing mode, wherein the sniffing mode is used to determine the area of the special-shaped screen; In a preset interface layout scheme, a target interface layout scheme matching the model data is found; According to the target interface layout scheme, the interface display elements are displayed; When it is determined according to the electronic device information that the display screen of the electronic device is a special-shaped screen, obtaining model data of the special-shaped screen according to a preset sniffing mode, wherein the sniffing mode is used to determine the area of the special-shaped screen; When the total width and total height of the display screen are obtained from the electronic device information, the total width is divided into multiple unit widths, and each unit width is taken as a point; The distance between each point and the top end of the display screen is taken as the first distance; The first distance of each point is subtracted from the total height to obtain the height value of each point; According to the height value of each point, the model data of the area of the special-shaped screen is constructed; According to the position of each point in the coordinate system, the distance between each point and the top end of the display screen is obtained as the first distance.

2. The interface display method of claim 1, wherein, When it is determined according to the electronic device information that the display screen of the electronic device is a special-shaped screen, obtaining model data of the special-shaped screen according to a preset sniffing mode, wherein the sniffing mode is used to determine the area of the special-shaped screen; When the total height of the display screen is not detected by the electronic device information, the display screen is divided into a preset number of rows; The row with the longest width is taken as the reference row, and the reference row is divided into multiple points; The distance from each point in the reference row to the top end of the display screen is taken as the second distance, and the maximum second distance is taken as the third distance, and the remaining second distances are taken as the fourth distances; The fourth distance of each point is subtracted from the third distance, and the absolute value of the subtraction result is taken to obtain the height value of each point.

3. The interface display method of claim 1, wherein, The target interface layout scheme includes at least one of the shift processing, scaling processing and cropping processing of the interface display elements in the special-shaped screen; According to the target interface layout scheme, the interface display elements are displayed, which comprises: The area of the special-shaped screen is divided into a special-shaped area and a non-special-shaped area; When the target interface layout scheme includes shift processing, the interface display elements are translated to the boundary of the special-shaped area and the non-special-shaped area, and the interface is displayed; When the target interface layout scheme includes scaling processing, the interface display elements are scaled down according to a first preset ratio, and the scaled interface display elements are displayed; When the target interface layout scheme includes cropping processing, the interface display elements are cropped according to a second preset ratio, and the cropped interface display elements are displayed.

4. The interface display method of claim 1, wherein, The preset interface layout scheme includes various electronic device types, reference special-shaped models corresponding to the electronic device types, and interface layout strategies of the reference special-shaped models, The target interface layout scheme matching the model data is searched in the preset interface layout scheme, including: When the electronic device information matches the electronic device type, the model data is matched with a reference special-shaped model corresponding to the electronic device type; When the matching results are the same, the interface layout strategy of the reference special-shaped model is acquired, and the interface layout strategy is taken as the target layout interface scheme.

5. The interface display method of claim 1, wherein, The preset interface layout scheme includes each reference special-shaped model and the interface layout strategy of the reference special-shaped model, The target interface layout scheme matching the model data is searched in the preset interface layout scheme, and further including: When the electronic device information does not match the electronic device type, the model data is matched with each reference special-shaped model; When the matching results are different, a reference special-shaped model in proportional relationship with the model data is searched; An adjustment operation is performed on the interface layout strategy of the reference special-shaped model in proportional relationship, and the interface layout strategy after the adjustment operation is taken as the target interface layout scheme.

6. The interface display method of claim 5, wherein, After the adjustment operation is performed on the interface layout strategy of the reference special-shaped model in proportional relationship, and the interface layout strategy after the adjustment operation is taken as the target interface layout scheme, the method further includes: The interface layout strategy after the adjustment operation is saved into a database for storing the interface layout scheme.

7. An interface display device, characterized by Including: An acquisition module is configured to acquire electronic device information and interface display elements for interface display when receiving an interface display request; A sniffing module is configured to acquire model data of a special-shaped screen of an electronic device according to a preset sniffing mode when determining that the display screen of the electronic device is a special-shaped screen according to the electronic device information, wherein the sniffing mode is used to determine the area of the special-shaped screen; A search module is configured to search for a target interface layout scheme matching the model data in a preset interface layout scheme; A display module is configured to display the interface display elements according to the target interface layout scheme; The sniffing module is specifically configured to divide the total width of the display screen into a plurality of unit widths when acquiring the total width and total height of the display screen from the electronic device information, and take each unit width as a point; take the distance between each point and the top end of the display screen as the first distance; subtract the first distance of each point from the total height to obtain the height value of each point; and construct the model data of the area of the special-shaped screen according to the height value of each point. The distance between each point and the top end of the display screen is acquired as the first distance according to the position of each point in the coordinate system.

8. A computer device including a memory and a processor, the memory storing computer readable instructions, and the processor implementing the steps of the interface display method of any one of claims 1 to 6 when executing the computer readable instructions.

9. A computer-readable storage medium, characterized in that, The computer readable storage medium stores computer readable instructions, and the computer readable instructions are executed by the processor to implement the steps of the interface display method of any one of claims 1 to 6.

Images