CN111385629B - Interface layout method, smart television and storage medium - Google Patents
Interface layout method, smart television and storage medium Download PDFInfo
- Publication number
- CN111385629B CN111385629B CN201811634471.2A CN201811634471A CN111385629B CN 111385629 B CN111385629 B CN 111385629B CN 201811634471 A CN201811634471 A CN 201811634471A CN 111385629 B CN111385629 B CN 111385629B
- Authority
- CN
- China
- Prior art keywords
- sub
- views
- view
- combined
- interface
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
Images
Classifications
-
- H—ELECTRICITY
- H04—ELECTRIC COMMUNICATION TECHNIQUE
- H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
- H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
- H04N21/40—Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
- H04N21/43—Processing of content or additional data, e.g. demultiplexing additional data from a digital video stream; Elementary client operations, e.g. monitoring of home network or synchronising decoder's clock; Client middleware
- H04N21/431—Generation of visual interfaces for content selection or interaction; Content or additional data rendering
- H04N21/4312—Generation of visual interfaces for content selection or interaction; Content or additional data rendering involving specific graphical features, e.g. screen layout, special fonts or colors, blinking icons, highlights or animations
-
- H—ELECTRICITY
- H04—ELECTRIC COMMUNICATION TECHNIQUE
- H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
- H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
- H04N21/40—Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
- H04N21/47—End-user applications
- H04N21/485—End-user interface for client configuration
- H04N21/4858—End-user interface for client configuration for modifying screen layout parameters, e.g. fonts, size of the windows
Abstract
The invention discloses an interface layout method, a smart television and a storage medium, wherein the method comprises the following steps: receiving a layout instruction, and acquiring view data of an interface to be displayed, wherein the view data comprises a plurality of sub-views and corresponding parameters; combining two or more of the plurality of sub-views based on the view data to form one or more combined views; and performing layout display on the more than one combined view based on the layout instruction. The invention combines the views of the interface to be displayed according to a certain rule, controls the layout among a plurality of combined views and between the combined views and the uncombined views to meet the requirement of only crossing rows or only crossing columns, and then arranges the layout mode in a common view mode to generate the final waterfall flow, thereby meeting the requirement of a user on a personalized customized television interface.
Description
Technical Field
The invention relates to the technical field of televisions, in particular to an interface layout method, an intelligent television and a storage medium.
Background
The current smart television based on the android system has higher and higher market share, and in order to be suitable for the convenience of operation of a television-side remote controller, more and more television manufacturers make an interface layout into a waterfall flow (waterfall flow is also called waterfall flow type layout, which is a relatively popular website page layout, and the visual appearance of the waterfall flow is a heterogeneous multi-column layout, and as a page scroll bar rolls downwards, the layout can continuously load data blocks and is attached to the current tail part), the mode can be quickly switched up and down based on the remote controller, can infinitely increase the displayed content in the vertical direction, and can automatically recycle the memory space based on the waterfall flow of recleleview (a new control for displaying a large amount of data, reclelew is a new component in a subport-v 7 package and is a powerful sliding component, and compared with the classic ListView, the waterfall flow also has the function of item recycling and reusing), the problems of system blockage and the like caused by infinite increase of the memory are prevented.
However, based on the waterfall flow of recycleview, the current layout mode only supports horizontal layout and vertical layout, and the complex layout does not support, for example, the waterfall flow interface shown in fig. 1 (three views with the same size are sequentially placed in the first row, two views are sequentially placed in the second row, and one view is placed in the third row), only cross columns do not exist, so that the layout can be realized in a normal view mode through the recycleview layout, and for the case that both cross rows and cross columns exist in fig. 2, if the cross rows and the cross columns exist in the manner of fig. 1, the layout result is as shown in fig. 3 or fig. 4, such as view 1/view 2/view 3 in fig. 3 is placed in the first row, view 4 can only be placed in the second row, or such as view 4 in fig. 4 is placed behind view 3, and the layout effect in fig. 2 cannot be achieved. That is, the current layout mode cannot support a complex layout that spans rows and columns, and the limitation cannot customize a tv interface individually, so that the tv interface is uniform and cannot stand out in market competition. In addition, if the custom meets the complex layout of crossing rows and columns, the development task is heavy because a new layout mode needs to be reconstructed, and various unexpected problems exist, such as focus jump abnormity and the like.
Accordingly, the prior art is yet to be improved and developed.
Disclosure of Invention
The technical problem to be solved by the invention is that the layout of the television interface in the prior art is too monotonous, and the personalized customized television interface cannot be provided.
The technical scheme adopted by the invention for solving the technical problem is as follows:
an interface layout method, wherein the interface layout method comprises the following steps:
receiving a layout instruction, and acquiring view data of an interface to be displayed, wherein the view data comprises a plurality of sub-views and corresponding parameters;
combining two or more of the plurality of sub-views based on the view data to form one or more combined views;
and performing layout display on the more than one combined view based on the layout instruction.
The interface layout method, wherein combining two or more of the multiple sub-views based on the view data to form one or more combined views specifically includes:
selecting a corresponding policy based on the parameters of each of the sub-views will combine two or more of the plurality of sub-views to form one or more combined views.
The interface layout method, wherein selecting a corresponding strategy based on the parameters of each of the sub-views to combine two or more of the sub-views into one or more combined views comprises:
when the sizes of the sub-views are consistent, combining the two or more sub-views by adopting a first combination strategy to form more than one combined view;
and when at least two sub-views have different sizes, combining the two sub-views by adopting a second combination strategy to form more than one combined view.
The interface layout method, wherein when the sizes of each of the sub-views are consistent, combining the two or more sub-views into one or more combined views by using a first combination strategy comprises:
respectively acquiring the length ratio between the interface to be displayed and the sub-view and the width ratio between the interface to be displayed and the sub-view;
if the length ratio is an integer, combining the more than two sub-views based on the length of the interface to be displayed and the number of the sub-views; or
If the width ratio is an integer, combining the more than two sub-views based on the width of the interface to be displayed and the number of the sub-views; or
If the length ratio and the width ratio are both integers, combining the more than two sub-views based on the size of the interface to be displayed and the number of the sub-views;
and calculating the number of the sub-views which can be arranged in each row based on the size of the sub-views and the size of the interface required to be displayed.
The interface layout method, wherein when at least two of the sub-views have different sizes, combining the two or more sub-views by using a second combination strategy to form one or more combined views comprises:
traversing all the sub-views in the interface to be displayed, and acquiring the length ratio and the width ratio between the sub-views;
if the length of one sub-view in the sub-views is the sum of the lengths of other sub-views, the other sub-views are combined into at least one combined view; or
If the width of one sub-view in the sub-views is the sum of the widths of other sub-views, the other sub-views are combined into at least one combined view;
and laying out the obtained combined view and the sub-views which are not combined.
The layout method of the interface, wherein the combined view and the sub-view which is not combined meet the condition that the length is the same or the width is the same.
The layout method of the interface comprises the step of obtaining a combined view, which is a sub-view of the combined view, and the step of obtaining a sub-view of the combined view, wherein the number of the sub-views in the combined view is the minimum number on the premise that the length of the combined view is the same or the width of the combined view is the same as that of the sub-views which are not combined.
The interface layout method further comprises the following steps:
when a focus used for representing a selection instruction is displayed on the combined view, sub-views in the combined view are independently displayed, and the focus is displayed on any one of the sub-views.
An intelligent television, wherein the intelligent television comprises: the interface layout method comprises a memory, a processor and an interface layout program stored on the memory and capable of running on the processor, wherein the interface layout program realizes the steps of the interface layout method when being executed by the processor.
A storage medium, wherein the storage medium stores a layout program of an interface, and the layout program of the interface realizes the steps of the layout method of the interface as described above when executed by a processor.
The invention combines the sub-views in the display interface according to the relationship among the parameters to form more than one combined view, and then performs layout display on the more than one combined view, thereby meeting the requirements of diversified television interfaces.
Drawings
Fig. 1 is an effect diagram of implementing that only cross columns exist and no cross row view exists in a waterfall flow layout in the prior art;
FIG. 2 is an effect diagram of both cross-column and cross-row views in a waterfall flow layout;
FIG. 3 is a diagram of one effect achieved in accordance with the implementation of FIG. 1 in order to achieve the waterfall flow configuration of FIG. 2;
FIG. 4 is a diagram of another effect achieved in accordance with the implementation of FIG. 1 in order to achieve the waterfall flow configuration of FIG. 2;
FIG. 5 is a flow chart of a preferred embodiment of a method for layout of an interface in accordance with the present invention;
FIG. 6 is a schematic diagram of an interface after the layout of FIG. 2 is combined according to a preferred embodiment of the interface layout method of the present invention;
FIG. 7 is a diagram illustrating a common view of a UI design interface in accordance with a preferred embodiment of the interface layout method of the present invention;
FIG. 8 is a diagram illustrating the layout of rows and columns in a UI design according to a preferred embodiment of the interface layout method of the present invention;
FIG. 9 is a diagram illustrating the special processing of FIG. 8 combined into a combined view in a preferred embodiment of the interface layout method of the present invention;
FIG. 10 is a diagram of a combined view formed by minimizing the processing of the combined view by utilizing the waterfall flow memory automatic recycling mechanism to the maximum extent when FIG. 8 is specially processed and combined into the combined view in the preferred embodiment of the interface layout method of the present invention;
fig. 11 is a schematic operating environment diagram of a smart tv according to a preferred embodiment of the present invention.
Detailed Description
In order to make the objects, technical solutions and advantages of the present invention clearer and clearer, the present invention is further described in detail below with reference to the accompanying drawings and examples. It should be understood that the specific embodiments described herein are merely illustrative of the invention and are not intended to limit the invention.
As shown in fig. 5, the interface layout method according to the preferred embodiment of the present invention includes the following steps:
step S10, receiving a layout instruction, and acquiring view data of an interface to be displayed, wherein the view data comprises a plurality of sub-views and corresponding parameters.
In the present invention, the view of the interface to be displayed refers to a layout manner of a waterfall flow (such as the waterfall flow layout shown in fig. 1 or fig. 2), and specifically, in general, the layout is preferentially performed in a common view manner, and if the layout manner of the waterfall flow is a waterfall flow that only spans rows or only columns, the layout may be performed in a common view manner through a recycleview layout, and similarly, the layout may be performed after the sub-views are combined by using the first combination strategy in the present invention.
However, if the layout mode of the waterfall flow in fig. 2 is a waterfall flow that spans both rows and columns, it cannot be realized directly by a recycleview layout in a normal view mode, and then the layout is performed after the sub-views are combined by using the second combination strategy in the present invention.
Step S20, combining two or more sub-views in the plurality of sub-views based on the view data to form more than one combined view.
Specifically, the view of the interface to be displayed generally includes a plurality of sub-views (so as to meet the requirement of diversified layout of the television interface), after the view data of the interface to be displayed is obtained, it is equivalent to obtain a plurality of sub-views (number) and corresponding parameters, and then a corresponding policy is selected based on the parameters of each sub-view to combine two or more sub-views of the plurality of sub-views to form more than one combined view (special view).
Further, selecting a corresponding policy based on the parameters of each of the sub-views to combine two or more of the sub-views to form one or more combined views includes the following two ways:
the first method comprises the following steps: when the sizes of the sub-views are consistent, combining the two or more sub-views by adopting a first combination strategy to form more than one combined view;
and the second method comprises the following steps: and when at least two sub-views have different sizes, combining the two sub-views by adopting a second combination strategy to form more than one combined view.
The size includes a length and a width, for example, a length and a width of the interface to be displayed, or a length and a width of the sub-view.
When the sizes of the sub-views are consistent, combining the two or more sub-views by adopting a first combination strategy to form one or more combined views comprises:
respectively acquiring the length ratio between the interface to be displayed and the sub-view and the width ratio between the interface to be displayed and the sub-view; if the length ratio is an integer, combining the more than two sub-views based on the length of the interface to be displayed and the number of the sub-views; or if the width ratio is an integer, combining the more than two sub-views based on the width of the interface to be displayed and the number of the sub-views; or if the length ratio and the width ratio are both integers, combining the more than two sub-views based on the size of the interface to be displayed and the number of the sub-views; and calculating the number of the sub-views which can be arranged in each row based on the size of the sub-views and the size of the interface required to be displayed.
The combinations are combined in rows and columns satisfying the above conditions, and if not an integer, the layout is performed in the order of rows and columns.
For example, when the interface to be displayed is composed of a plurality of sub-views arranged in the same size, assuming that each row is 5 sub-views, and 5 rows (i.e. 5 rows and 5 columns) are provided together, and the length ratio between the interface to be displayed and the sub-views is 5:1, then the 5 sub-views in each row can be combined into one combined view, and then the 5 combined views can be combined transversely; the width ratio of the interface to be displayed to the sub-views is 5:1, so that 5 sub-views in each column can be combined into one combined view, and then the 5 combined views can be longitudinally combined; no matter the combination is transverse combination or longitudinal combination, the combined 5 combined views can be laid out in a common view mode through recycleview layout, the layout mode is simplified, and the layout speed is improved.
When at least two of the sub-views have different sizes, combining the two or more sub-views by using a second combination strategy to form one or more combined views comprises:
traversing all the sub-views in the interface to be displayed, and acquiring the length ratio and the width ratio between the sub-views; if the length of one sub-view in the plurality of sub-views is the sum of the lengths of other sub-views (for example, the length of one sub-view is the sum of the lengths of other two or three sub-views), the other sub-views are combined into at least one combined view; or if the width of one sub-view in the plurality of sub-views is the sum of the widths of other sub-views (for example, the width of one sub-view is the sum of the widths of other two or three sub-views), combining the other sub-views into at least one combined view; and laying out the obtained combined view and the sub-views which are not combined.
If the length of one of the sub-views is the sum of the lengths of the other sub-views, and the other sub-views are combined into at least one combined view, for example, the interface to be displayed includes four sub-views, the first row includes the first sub-view, the second row includes the second sub-view, the third sub-view and the fourth sub-view, and the length of the first sub-view is the sum of the lengths of the second sub-view, the third sub-view and the fourth sub-view, then the first sub-view remains unchanged, the second sub-view, the third sub-view and the fourth sub-view are combined into one combined view, then the combined view meets the condition that the length of the first sub-view is the same, at this time, the combined view and the first sub-view can be directly laid out to obtain the interface to be displayed, and the other conditions can be analogized.
Further, there may be a case where the sum of the lengths of several sub-views is equal to the first sub-view; the sum of the lengths of the sub-views is equal to a second sub-view, and the like, at this time, the sub-views are respectively combined with the sub-views of the first sub-view, and the sub-views corresponding to the second sub-view are combined, at this time, a plurality of first combined views and a plurality of second combined views can be obtained, at this time, further judgment is needed, if the length of the first sub-view is a multiple relation of the length of the second sub-view, the second sub-view and the second combined view need to be combined to obtain a final combined view, and then the final combined view and the first sub-view and the first combined view are laid out; it should be noted that there may be a third sub-view, a fourth sub-view, etc. of the same situation, and the combination may be performed by using a method similar to the foregoing method.
Wherein, if the width of one of the sub-views is the sum of the widths of the other sub-views, the other sub-views are combined into at least one combined view, for example, the interface to be displayed includes four sub-views, the first column includes a first sub-view, the second column includes a second sub-view, a third sub-view and a fourth sub-view from top to bottom, and the width (or height) of the first sub-view is the sum of the widths of the second sub-view, the third sub-view and the fourth sub-view, then the first sub-view remains unchanged, the second sub-view, the third sub-view and the fourth sub-view are combined into one combined view, then the combined view satisfies the condition that the width of the first sub-view is the same, and at this time, the interface to be displayed can be obtained by directly laying out the combined view and the first sub-view, other cases may be analogized.
Further, there may be a case where the sum of the widths of several sub-views is equal to the first sub-view; the sum of the widths of the sub-views is equal to a second sub-view, and the like, at this time, the first sub-view and the second sub-view are combined respectively, the second sub-view and the second sub-view corresponding to the second sub-view are combined, a plurality of first combined views and a plurality of second combined views can be obtained at this time, further judgment is needed at this time, if the width of the first sub-view is a multiple relation of the width of the second sub-view, the second sub-view and the second combined view need to be combined to obtain a final combined view, and then the final combined view and the first sub-view and the first combined view are laid out; it should be noted that there may be a third sub-view, a fourth sub-view, etc. of the same situation, and the combination may be performed by using a method similar to the foregoing method.
For example, when at least two sub-views in the whole view have different sizes, a second combination strategy is needed to combine the two or more sub-views to form one or more combined views, for example, the whole general view (i.e. the interface to be displayed) in fig. 2 includes 4 sub-views, i.e. view 1, view 2, view 3 and view 4, so that since the length of view 1 is twice that of view 2 and view 3, the length of view 1 is the same as that of view 4, and the width of view 1 is twice that of view 2, view 3 and view 4, the view 2, view 3 and view 4 can be combined to form a combined view (special view 2 in fig. 6), and the view 1 is used as a view alone (special view 1 in fig. 6), the combined view has the same length and width as that of view 1, after processing, the requirement of only crossing columns is satisfied between the views.
Wherein, the special view (for example, special view 2 in fig. 6) implements the method internally: the special view can be internally provided with a layout such as FrameLayout/RelativeLayout/ScollerView and the like, then an ideal complex layout (a layout which spans rows and columns) is arranged in the layout according to requirements, and then an internal focus moving function is realized, and compared with waterfall flow, the part of content is completely independent and is not influenced by the waterfall flow, and the specific realization method can be realized through an Android native interface.
Furthermore, each row of the waterfall flow can be randomly placed with a plurality of special views (combined views) according to needs, and common views (such as sub-views which are not combined) and special views can be placed in a mixed manner, so that the overall function of the waterfall flow is not influenced. For example, as shown in FIG. 6, View 1 of FIG. 2 is taken as a single sub-view (Special View 1: sub-views that need not be combined), and View 2/View 3/View 4 are combined as a combined view (Special View 2).
Taking fig. 2 as an example, view 1 needs to be implemented across rows, view 4 needs to be implemented across columns, and the original recycleview layout cannot meet the requirements of both row and column spanning, so that it is necessary to combine the view 1 and view 4, and then view the special view as a common view for re-layout. For example, view 1 is regarded as a special view (e.g. special view 1 in the left area of fig. 6), view 2, view 3, and view 4 constitute a combined view (e.g. special view 2 in the right area of fig. 6), and from the perspective of the original recycleview, only two views (special view 1 and special view 2) are inside, which meets the layout requirement of crossing columns and not crossing rows, and how to layout inside the special view 2, recycleview is not concerned.
That is, the multiple sub-views are combined into multiple combined views according to the multiple relation of the length and the width among the multiple sub-views, and the requirement of only crossing rows or only crossing columns is met among the multiple combined views or between the combined view and the non-combined sub-views, so that the heights or the widths of all the combined views are the same.
The standard recycleview waterfall flow only follows a cross-row or cross-column layout, does not support the layout requirements of cross-row and cross-column, analyzes the layout of fig. 2, and the width of view 2/3/4 is the same, while the width of view 1 is twice that of view 2, namely view 1 needs to be implemented across rows, and the length of view 4 is twice that of view 2 and view 3, namely view 4 needs to be implemented across columns. Aiming at the layout requirements of complicated row-crossing and column-crossing, a plurality of views can be combined into a combined view in a combination mode according to the specific length and width of the views, so that the combined view and other uncombined sub-views can meet the layout requirements of waterfall flow. To match the width of view 1, view 2/3/4 is combined together to form a combined view (special view 2), it can be seen that the combined view is the same width as view 1 and can be displayed in a row in parallel, while the previous view 2/3 and view 4 do not match in length, just things inside the combined view (special view 2), it is not concerned about how the inside is implemented for the waterfall flow, i.e., the inside of the combined view is a black box for the waterfall flow.
Each row of the waterfall flow can be randomly placed with a plurality of combined views according to the requirement, and can also be placed in a mixed manner, so that the overall function of the waterfall flow is not influenced. In addition, in order to utilize the waterfall flow memory automatic recovery mechanism to the maximum extent, the combined view needs to be processed in a minimized way, and the rule is as follows: on the premise that the length or the width of the combined view is the same as that of the sub-views which are not combined, the number of the sub-views in the combined view is the minimum number, that is, on the premise that the requirement is met, the inside of the combined view is minimized as much as possible, that is, the combined view includes the minimum number of the sub-views (because the way of combining the views when the requirement is met may be various), that is, the sub-views with the minimum number are included. For example, as shown in fig. 6, view 2/view 3/view 4 may be combined into a combined view, and the minimum number of sub-views in the first combined view is 3 (there is only one way of combination and therefore no selection is required).
Further explained below with other views, as shown in fig. 7, the UI design interface is a common UI design interface in project development, a UI designer can design various layout styles according to requirements, fig. 10 is a relatively regular interface, each sub-view has the same size, which can be understood as a common view, and the common view can be laid out in a common view manner through a recycleview layout, or more than two sub-views can be combined to form more than one combined view (the size of each sub-view is consistent) through a first combination strategy of the present invention, for example, the sub-views in each row are combined to form a combined view in fig. 7 and then laid out.
As in the view of fig. 8, there are cases where the sub-views are different in size, that is, there is a layout across rows and columns, so it is necessary to perform the layout using the combined view, and the sub-views are selected to form a plurality of combined views according to the relationship of sizes. The views are combined into a special view, such as the combination shown in fig. 9.
The specific combination is illustrated as follows: as shown in fig. 8, there are sub-views 1-16 (i.e. views 1-16 in fig. 8), each of which has different length and width, and in order to make the views have the same length or width (meet the requirement of crossing rows or columns), they can be combined into a combined view (i.e. special view) according to the length and width of each sub-view, such as three combined views (special view 1, special view 2, and special view 3 in fig. 9, respectively), where all sub-views are combined without leaving a separate sub-view, and the length and width of each combined view are guaranteed to be the same, the first combined view includes sub-view 1, sub-view 10, sub-view 11, and sub-view 13, the second combined view includes view 2, sub-view 3, and sub-view 13, and the third combined view includes sub-view 4, sub-view 5, Sub-view 6, sub-view 7, sub-view 8, sub-view 9, sub-view 14, sub-view 15, and sub-view 16.
In fig. 9, all the combined views are viewed as a whole placed in the waterfall flow, and the waterfall flow does not care how the inside of the combined view is laid out (only after the focus on a particular layout, the internal processing focus logic is entered).
Although the combination in fig. 9 has satisfied the requirement of only crossing columns and not crossing rows, the combined view may minimize the processing in order to make the most use of the waterfall flow memory automatic recycle mechanism. The aim is to minimize the inside of the combined view, i.e. to have the smallest number of sub-views, as much as possible, while satisfying the requirements. For this reason, the preferred combination is as shown in the following combination (preferred combination) of fig. 10, which ensures that the layout meets the requirement of not crossing rows across columns, and it can be seen that the sub-view 4 and the sub-view 7 are combined into one combined view, the sub-view 5 and the sub-view 8 are combined into one combined view, and the sub-view 6 and the sub-view 9 are combined into one combined view, which are all the same as the widths of the sub-view 1, the sub-view 2 and the sub-view 3 (in this case, none of the sub-view 1, the sub-view 2 and the sub-view 3 is combined and exists as a separate sub-view), and each length and width of the sub-view 10-the sub-view 16 are the same, and the layout is performed sequentially according to the common view, or the layout is combined into one combined view.
That is, on the premise that the length of the combined view is the same or the width of the combined view is the same as that of the non-combined sub-views, the number of the sub-views in the combined view is the minimum number.
And step S30, performing layout display on the more than one combined view based on the layout instruction.
And after the combination of the sub-views is finished, if all the sub-views are combined views, layout is carried out according to the combined views, and if the sub-views and the sub-views are combined views, layout is carried out according to the sub-views and the combined views, and the layout mode of the final waterfall flow is generated by arrangement.
Further, when a focus for representing a selection instruction is displayed on the combined view, sub-views in the combined view are independently displayed, and the focus is displayed on any one of the sub-views. That is, after obtaining the focus on the combined view, the focus is immediately transferred downward to the sub-view in the combined view, that is, for the entire waterfall flow, the focus may be directly obtained from the normal view, and for the combined view, the focus is immediately transferred downward to the sub-view inside the combined view.
Further, as shown in fig. 11, based on the layout method and apparatus of the interface, the present invention also provides a smart television, which includes a processor 10, a memory 20, and a display 30. Fig. 11 shows only some of the components of the smart television, but it is to be understood that not all of the shown components are required to be implemented, and that more or fewer components may be implemented instead.
The storage 20 may be an internal storage unit of the smart tv in some embodiments, for example, a hard disk or a memory of the smart tv. In other embodiments, the memory 20 may also be an external storage device of the Smart tv, such as a plug-in hard disk provided on the Smart tv, a Smart Media Card (SMC), a Secure Digital (SD) Card, a Flash memory Card (Flash Card), and so on. Further, the memory 20 may also include both an internal storage unit and an external storage device of the smart tv. The memory 20 is used for storing application software installed in the smart television and various types of data, such as program codes for installing the smart television. The memory 20 may also be used to temporarily store data that has been output or is to be output. In one embodiment, the memory 20 stores a layout program 40 of an interface, and the layout program 40 of the interface can be executed by the processor 10, so as to implement the layout method of the interface in the present application.
The processor 10 may be a Central Processing Unit (CPU), a microprocessor or other data Processing chip in some embodiments, and is used for running program codes stored in the memory 20 or Processing data, such as executing the layout method of the interface.
The display 30 may be an LED display, a liquid crystal display, a touch-sensitive liquid crystal display, an OLED (Organic Light-Emitting Diode) touch panel, or the like in some embodiments. The display 30 is used for displaying information on the smart television and for displaying a visual user interface. The components 10-30 of the smart television communicate with each other via a system bus.
In one embodiment, when the processor 10 executes the layout program 40 for the interface in the memory 20, the following steps are implemented:
receiving a layout instruction, and acquiring view data of an interface to be displayed, wherein the view data comprises a plurality of sub-views and corresponding parameters;
combining two or more of the plurality of sub-views based on the view data to form one or more combined views;
and performing layout display on the more than one combined view based on the layout instruction.
Combining two or more of the plurality of sub-views based on the view data to form one or more combined views specifically includes:
selecting a corresponding policy based on the parameters of each of the sub-views will combine two or more of the plurality of sub-views to form one or more combined views.
Selecting a corresponding policy based on the parameters of each of the sub-views to combine two or more of the plurality of sub-views into one or more combined views comprises:
when the sizes of the sub-views are consistent, combining the two or more sub-views by adopting a first combination strategy to form more than one combined view;
and when at least two sub-views have different sizes, combining the two sub-views by adopting a second combination strategy to form more than one combined view.
When the sizes of each sub-view are consistent, combining the two or more sub-views to form one or more combined views by adopting a first combination strategy comprises:
respectively acquiring the length ratio between the interface to be displayed and the sub-view and the width ratio between the interface to be displayed and the sub-view;
if the length ratio is an integer, combining the more than two sub-views based on the length of the interface to be displayed and the number of the sub-views; or
If the width ratio is an integer, combining the more than two sub-views based on the width of the interface to be displayed and the number of the sub-views; or
If the length ratio and the width ratio are both integers, combining the more than two sub-views based on the size of the interface to be displayed and the number of the sub-views;
and calculating the number of the sub-views which can be arranged in each row based on the size of the sub-views and the size of the interface required to be displayed.
When at least two of the sub-views have different sizes, combining the two or more sub-views to form one or more combined views by using a second combination strategy comprises:
traversing all the sub-views in the interface to be displayed, and acquiring the length ratio and the width ratio between the sub-views;
if the length of one sub-view in the sub-views is the sum of the lengths of other sub-views, the other sub-views are combined into at least one combined view; or
If the width of one sub-view in the sub-views is the sum of the widths of other sub-views, the other sub-views are combined into at least one combined view;
and laying out the obtained combined view and the sub-views which are not combined.
Wherein the combined view and the sub-view which is not combined meet the condition that the length is the same or the width is the same; and on the premise that the length of the combined view is the same or the width of the combined view is the same as that of the non-combined sub-views, the number of the sub-views in the combined view is the minimum number.
When a focus used for representing a selection instruction is displayed on the combined view, sub-views in the combined view are independently displayed, and the focus is displayed on any one of the sub-views.
The present invention also provides a storage medium, wherein the storage medium stores a layout program of an interface, and the layout program of the interface realizes the steps of the layout method of the interface when being executed by a processor.
In summary, the present invention provides an interface layout method, a smart television and a storage medium, where the method includes: receiving a layout instruction, and acquiring view data of an interface to be displayed, wherein the view data comprises a plurality of sub-views and corresponding parameters; combining two or more of the plurality of sub-views based on the view data to form one or more combined views; and performing layout display on the more than one combined view based on the layout instruction. The invention combines the views of the interface to be displayed according to a certain rule, controls the layout among a plurality of combined views and between the combined views and the uncombined views to meet the requirement of only crossing rows or only crossing columns, and then arranges the layout mode in a common view mode to generate the final waterfall flow, thereby meeting the requirement of a user on a personalized customized television interface.
Of course, it will be understood by those skilled in the art that all or part of the processes of the methods of the above embodiments may be implemented by a computer program instructing relevant hardware (such as a processor, a controller, etc.), and the program may be stored in a computer readable storage medium, and when executed, the program may include the processes of the above method embodiments. The storage medium may be a memory, a magnetic disk, an optical disk, etc.
It is to be understood that the invention is not limited to the examples described above, but that modifications and variations may be effected thereto by those of ordinary skill in the art in light of the foregoing description, and that all such modifications and variations are intended to be within the scope of the invention as defined by the appended claims.
Claims (9)
1. An interface layout method, comprising:
receiving a layout instruction, and acquiring view data of an interface to be displayed, wherein the view data comprises a plurality of sub-views and corresponding parameters;
combining two or more of the plurality of sub-views based on the view data to form one or more combined views;
selecting a corresponding policy based on the parameters of each of the sub-views to combine two or more of the plurality of sub-views into one or more combined views comprises:
when the sizes of the sub-views are consistent, combining the two or more sub-views by adopting a first combination strategy to form more than one combined view;
when the sizes of at least two sub-views are inconsistent, combining the two or more sub-views by adopting a second combination strategy to form more than one combined view;
and performing layout display on the more than one combined view based on the layout instruction.
2. The interface layout method according to claim 1, wherein combining two or more of the plurality of sub-views based on the view data to form one or more combined views specifically comprises:
selecting a corresponding policy based on the parameters of each of the sub-views will combine two or more of the plurality of sub-views to form one or more combined views.
3. The interface layout method of claim 1, wherein, when the size of each of the sub-views is consistent, combining the two or more sub-views into one or more combined views using a first combination strategy comprises:
respectively acquiring the length ratio between the interface to be displayed and the sub-view and the width ratio between the interface to be displayed and the sub-view;
if the length ratio is an integer, combining the more than two sub-views based on the length of the interface to be displayed and the number of the sub-views; or
If the width ratio is an integer, combining the more than two sub-views based on the width of the interface to be displayed and the number of the sub-views; or
If the length ratio and the width ratio are both integers, combining the more than two sub-views based on the size of the interface to be displayed and the number of the sub-views;
and calculating the number of the sub-views which can be arranged in each row based on the size of the sub-views and the size of the interface required to be displayed.
4. The interface layout method of claim 1, wherein when at least two of the sub-views have different sizes, combining the two or more sub-views into one or more combined views using a second combining strategy comprises:
traversing all the sub-views in the interface to be displayed, and acquiring the length ratio and the width ratio between the sub-views;
if the length of one sub-view in the sub-views is the sum of the lengths of other sub-views, the other sub-views are combined into at least one combined view; or
If the width of one sub-view in the sub-views is the sum of the widths of other sub-views, the other sub-views are combined into at least one combined view;
and laying out the obtained combined view and the sub-views which are not combined.
5. The layout method of the interface according to claim 3 or 4, wherein the combined view and the non-combined sub-view have the same length or the same width.
6. The interface layout method according to claim 5, wherein the number of sub-views in the combined view is the minimum number on the premise that the combined view and the non-combined sub-views have the same length or the same width.
7. The interface layout method of claim 1, further comprising:
when a focus used for representing a selection instruction is displayed on the combined view, sub-views in the combined view are independently displayed, and the focus is displayed on any one of the sub-views.
8. An intelligent television, characterized in that the intelligent television comprises: memory, a processor and a layout program of an interface stored on the memory and executable on the processor, the layout program of an interface implementing the steps of the layout method of an interface according to any one of claims 1 to 7 when executed by the processor.
9. A storage medium storing a layout program of an interface, the layout program of the interface implementing the steps of the layout method of the interface according to any one of claims 1 to 7 when executed by a processor.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201811634471.2A CN111385629B (en) | 2018-12-29 | 2018-12-29 | Interface layout method, smart television and storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201811634471.2A CN111385629B (en) | 2018-12-29 | 2018-12-29 | Interface layout method, smart television and storage medium |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN111385629A CN111385629A (en) | 2020-07-07 |
| CN111385629B true CN111385629B (en) | 2022-01-04 |
Family
ID=71218296
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201811634471.2A Active CN111385629B (en) | 2018-12-29 | 2018-12-29 | Interface layout method, smart television and storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111385629B (en) |
Families Citing this family (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112866819B (en) * | 2020-12-31 | 2023-04-18 | 百视通网络电视技术发展有限责任公司 | Waterfall flow floor-type display interaction method, medium and equipment based on reactive native |
Citations (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US8091036B1 (en) * | 2006-04-27 | 2012-01-03 | Oracle America, Inc. | GUI builder tool for designing cross platform layout |
| CN103513978A (en) * | 2012-07-02 | 2014-01-15 | Tcl集团股份有限公司 | Method and system for managing layout of application according to attribute information of application |
| CN104360798A (en) * | 2014-10-29 | 2015-02-18 | 宇龙计算机通信科技(深圳)有限公司 | Method and terminal for desktop arrangement |
| CN104794116A (en) * | 2014-01-16 | 2015-07-22 | 阿里巴巴集团控股有限公司 | Layout method and device for elements in page |
| CN107256149A (en) * | 2017-05-26 | 2017-10-17 | 北京小米移动软件有限公司 | The update method and device of user interface |
| CN107451145A (en) * | 2016-05-31 | 2017-12-08 | 北京京东尚科信息技术有限公司 | Rendered based on various dimensions multi-data source to generate the method and apparatus of dynamic page |
| CN107529081A (en) * | 2016-06-21 | 2017-12-29 | 阿里巴巴集团控股有限公司 | Focus switching method and apparatus |
| CN108334386A (en) * | 2017-01-20 | 2018-07-27 | 阿里巴巴集团控股有限公司 | A kind of layout method and system of view component |
Family Cites Families (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20160139868A1 (en) * | 2013-06-14 | 2016-05-19 | Samsung Electronics Co., Ltd. | Method and apparatus for displaying application data in wireless communication system |
-
2018
- 2018-12-29 CN CN201811634471.2A patent/CN111385629B/en active Active
Patent Citations (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US8091036B1 (en) * | 2006-04-27 | 2012-01-03 | Oracle America, Inc. | GUI builder tool for designing cross platform layout |
| CN103513978A (en) * | 2012-07-02 | 2014-01-15 | Tcl集团股份有限公司 | Method and system for managing layout of application according to attribute information of application |
| CN104794116A (en) * | 2014-01-16 | 2015-07-22 | 阿里巴巴集团控股有限公司 | Layout method and device for elements in page |
| CN104360798A (en) * | 2014-10-29 | 2015-02-18 | 宇龙计算机通信科技(深圳)有限公司 | Method and terminal for desktop arrangement |
| CN107451145A (en) * | 2016-05-31 | 2017-12-08 | 北京京东尚科信息技术有限公司 | Rendered based on various dimensions multi-data source to generate the method and apparatus of dynamic page |
| CN107529081A (en) * | 2016-06-21 | 2017-12-29 | 阿里巴巴集团控股有限公司 | Focus switching method and apparatus |
| CN108334386A (en) * | 2017-01-20 | 2018-07-27 | 阿里巴巴集团控股有限公司 | A kind of layout method and system of view component |
| CN107256149A (en) * | 2017-05-26 | 2017-10-17 | 北京小米移动软件有限公司 | The update method and device of user interface |
Non-Patent Citations (2)
| Title |
|---|
| 瀑布流布局的多种实现方式及其比较研究;董春侠;《电脑知识与技术》;20161014;第12卷(第25期);全文 * |
| 高度自适应横向瀑布流布局的原理与实现;李维强;《电脑与信息技术》;20181015;第26卷(第5期);全文 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN111385629A (en) | 2020-07-07 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US20220236866A1 (en) | Method and system for section-based editing of a website page | |
| CN106293777B (en) | Method for realizing development front-end interface control based on component type | |
| US20170357393A1 (en) | Layout System for Devices with Variable Display Screen Sizes and Orientations | |
| US20140019892A1 (en) | Systems and Methods for Generating Application User Interface with Practically Boundless Canvas and Zoom Capabilities | |
| US10073580B2 (en) | Apparatus and method for positioning windows on a display | |
| US9710149B2 (en) | Method and apparatus for displaying user interface capable of intuitively editing and browsing folder | |
| CN108696767B (en) | Barrage playing method and device, computer readable storage medium and terminal | |
| US20140337794A1 (en) | Smart insertion of applications into layouts | |
| US20130145321A1 (en) | Information processing apparatus, method of controlling display and storage medium | |
| CN109358851A (en) | Creation method, device and the computer readable storage medium of chart components | |
| US20140092143A1 (en) | Content bound graphic | |
| CN111385629B (en) | Interface layout method, smart television and storage medium | |
| CN106162302B (en) | Layout method and device for Launcher main interface and smart television | |
| CN110971953B (en) | Video playing method, device, terminal and storage medium | |
| US20190073091A1 (en) | Dynamic display layout systems and methods | |
| Lerner | At the forge: twitter bootstrap | |
| CN102105938B (en) | Show the music metadata in multiple level | |
| CN114564263A (en) | Page layout adjusting method and device | |
| CN116347699A (en) | Lamp effect control method of interactive lamp, electronic equipment and vehicle | |
| US20170220208A1 (en) | Electronic apparatus and control method thereof | |
| CN105426076A (en) | Information processing method and electronic equipment | |
| CN111258701B (en) | State icon control method, intelligent terminal and storage medium | |
| US20140184535A1 (en) | Method for Displaying Children Components in a Display that Operates at Different Screen Parameters and Orientations | |
| CN113238701A (en) | Questionnaire processing method, terminal and computer readable storage medium | |
| US7788634B2 (en) | Methods and systems for efficient behavior generation in software application development tool |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |