CN105812881B - A kind of window processing method, system and the television set of user interface - Google Patents
A kind of window processing method, system and the television set of user interface Download PDFInfo
- Publication number
- CN105812881B CN105812881B CN201410843233.8A CN201410843233A CN105812881B CN 105812881 B CN105812881 B CN 105812881B CN 201410843233 A CN201410843233 A CN 201410843233A CN 105812881 B CN105812881 B CN 105812881B
- Authority
- CN
- China
- Prior art keywords
- window
- width
- frame
- user interface
- distance
- 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
Abstract
The present invention is suitable for field of television, provide a kind of window processing method of user interface, it include: the background picture that the window of user interface is respectively set under focus condition and under non-focus state, window is different from the border effect of background picture under non-focus state in the background picture under focus condition；Obtain the border width of window background picture；Border width is set by the Edge Distance of window；The actual size for all windows that user interface includes is obtained, and calculates the size of user interface according to the Edge Distance of the actual size of window and window；It is laid out window on a user interface according to the size of user interface and the actual size of window, determines the position of each window opposing user interfaces；The state rendering context picture of each window is corresponded on each window that user interface is laid out；The corresponding content of window is plotted in the content area of each window.Through the invention, View refresh rate and UI performance can be effectively improved.
Description
Technical field
The invention belongs to window processing method, system and the television sets of field of television more particularly to a kind of user interface.
Background technique
In the intelligent television field for being based on Android (Android), it is different from mobile phone, the screen resolution of television set is than hand
Machine is much bigger.And current 4K screen has become mainstream configuration.But it is constant in hardware performance due to significantly improving for physical picture element
In the case where, it can greatly drag down the refresh rate of UI (User Interface, user interface).Therefore UI performance is promoted more and more
It is important.The main interface application of TV is one of application the most complicated in smart television.Element and animation in main interface compare
More, the requirement to performance is also high.Fig. 1 show the mainstay of current smart television main interface, and main interface includes 7 view
(window).Fig. 2 show presentation mode after view obtains focus.Selected view executes display bezel, executes amplification
Animation, and show hatching effect, it is presented with prominent.
On Android, after View obtains focus, the general way of presentation of View is to replace the background picture of View,
That is focus and when non-focus state, background is not to cut figure using same；But this way cannot achieve the effect of Fig. 2
Fruit because effect shaded area shown in Fig. 2 is very big, and can cover surrounding View.It is common to do to reach this effect
Method is the upper layer of view to be fitted in using shade and frame as individual view, and View usually shown in Fig. 2 is largely
Combine View.It is well known that the more view hierarchical structure the more complicated, the time that system rendering needs is also longer.Therefore this
Method can reduce the refresh rate of View, namely reduce the performance of UI.Moreover, because frame and View are not belonging to the same carrier,
When doing amplification animation, need to open two animation threads, first is that two animations can not accomplish complete synchronization, that is to say, that side
Frame and View perfect can not be bonded during animation, and effect is had a greatly reduced quality, second is that two animation threads also increase system
The consumption of resource.
Summary of the invention
The purpose of the present invention is to provide window processing method, system and the television sets of a kind of user interface, it is intended to solve
The problem of method of the prior art can reduce the refresh rate of View, reduce UI performance.
In a first aspect, the present invention provides a kind of window processing methods of user interface, which comprises
Background picture of the window of user interface under focus condition and under non-focus state is respectively set, window is in focus
Background picture under state is different from the border effect of background picture under non-focus state；
Obtain the border width of window background picture；
The border width is set by the Edge Distance of window；
The actual size for all windows that user interface includes is obtained, and according to the edge of the actual size of window and window
Distance calculates the size of user interface；
It is laid out window on a user interface according to the size of user interface and the actual size of window, determines that each window is opposite
The position of user interface；
The state rendering context picture of each window is corresponded on each window that user interface is laid out；
The content of window is plotted in the content area of each window.
Second aspect, the present invention provides a kind of Window Processing Systems of user interface, the system comprises:
First setup module, for back of the window of user interface under focus condition and under non-focus state to be respectively set
Scape picture, window are different from the border effect of background picture under non-focus state in the background picture under focus condition；
First obtains module, for obtaining the border width of window background picture；
Second setup module, for setting the border width for the Edge Distance of window；
Computing module, for obtaining the actual size for all windows that user interface includes, and according to the practical ruler of window
Very little and window Edge Distance calculates the size of user interface；
Layout modules, for being laid out window on a user interface according to the size of user interface and the actual size of window,
Determine the position of each window opposing user interfaces；
First drafting module, for corresponding to the state rendering context of each window on each window that user interface is laid out
Picture；
Second drafting module, for the content of window to be plotted in the content area of each window.
The third aspect, the present invention provides a kind of television sets of Window Processing Systems including the user interface.
In the present invention, since window is on the side of the background picture under focus condition and the background picture under non-focus state
Frame effect is different, i.e., frame and windows content region belong to a window carrier, therefore are not present when executing and amplifying animation
There is the problem of imperfect fitting, effect is presented and is improved, and only reduces system resources consumption with an animation thread.
And reduce the hierarchical structure of window, to optimize UI performance, the refresh rate of UI is improved, and then promote user experience.
Detailed description of the invention
Fig. 1 is the mainstay interface schematic diagram of current smart television main interface.
Fig. 2 is presentation mode schematic diagram after view obtains focus.
Fig. 3 is the window processing method flow chart for the user interface that the embodiment of the present invention one provides.
Fig. 4 is background picture schematic diagram of the window under focus condition.
Fig. 5 is the user interface schematic diagram comprising multiple windows.
Fig. 6 is the structural schematic diagram of the Window Processing Systems of user interface provided by Embodiment 2 of the present invention.
Specific embodiment
In order to which the purpose of the present invention, technical solution and beneficial effect is more clearly understood, below in conjunction with attached drawing and implementation
Example, the present invention will be described in further detail.It should be appreciated that specific embodiment described herein is only used to explain this hair
It is bright, it is not intended to limit the present invention.
In order to illustrate technical solutions according to the invention, the following is a description of specific embodiments.
Embodiment one:
Referring to Fig. 3, the embodiment of the present invention one provide user interface window processing method the following steps are included:
S101, background picture of the window of user interface under focus condition and under non-focus state, window is respectively set
It is different from the border effect of background picture under non-focus state in the background picture under focus condition, focus in this present embodiment
Background picture under state is the figure of cutting with hatching effect frame, as shown in Figure 2；
In the embodiment of the present invention one, window is in the back of background picture and window under focus condition under non-focus state
The dimensions of scape picture is identical, but effect is different, for example, background picture of the window under non-focus state be transparent picture or
Non-displaypart (i.e. frame) in person's background picture is transparent.When window obtains focus and loses focus, automatically update
Background picture.Background picture of the window under focus condition and under non-focus state is to meet what Android was standardized
NinePatchDrawable picture (is commonly called as: 9 figures of point).NinePatchDrawable supports lossless stretching, therefore focus is not
With that can be applicable on the window of size, that is, the background picture being arranged is suitable for all windows of user interface.The reality of each window
Border size includes the content area and periphery frame of centre, such as shown in the dotted line frame in Fig. 2, and under non-focus state
Background picture is identical as the actual size of the background picture of focus condition, only under non-focus state background picture frame portion
It is transparent, display content area.The content area refers to the region that image is shown in window.
S102, the border width for obtaining window background picture；
Referring to Fig. 4, the border width of background picture of the window under focus condition be respectively window content area away from
From cutting figure (i.e. window is in the background picture under focus condition) left edge, top edge, right hand edge, with a distance from lower edge, use respectively
LeftPadding, topPadding, rightPadding and bottomPadding are indicated.
S103, the Edge Distance of window is set to the border width, the Edge Distance is content area apart from institute
State the distance of the frame of actual size；
In the embodiment of the present invention one, S103 in BlockView class specifically, increase the side that attribute is used to save window
Edge distance.Rect data types to express (such as: Rect outPadding) can be used.Increase a method simultaneously for the window to be arranged
The Edge Distance (such as: setOutPadding (Rect)) of mouth.If the border width of all windows is all the same in user interface,
Four Edge Distances of all windows are disposed as the border width；If the border width of each window is not in user interface
Together, then the border width of each window is respectively corresponded the Edge Distance is arranged.In the present embodiment, with the border width of each window
It is illustrated for identical.
S104, the actual size for obtaining all windows that user interface includes, and according to the actual size and window of window
Edge Distance calculate user interface size；
In the embodiment of the present invention one, S104 specifically includes the following steps:
All windows for including in traverse user interface, obtain the actual size of all windows, and actual size includes practical
Height and developed width；
It is calculated using the following equation the size of user interface, wherein WidthparentIndicate the width of user interface,
HeightparentIndicate the height of user interface, WidthchildNIt indicates to be located in user interface in N number of window of a line, window
The developed width of mouth N, HeightchildNIt indicates to be located in user interface in N number of window of same row, the actual height of window N,
LeftPadding, topPadding, rightPadding and bottomPadding respectively indicate window left side width of frame, on
Border width, the right width of frame, following width of frame.Incorporated by reference to Fig. 4 and Fig. 5.Positioned at 2 windows of same row point in user interface
It is not window 6 and window 2,5 windows being located in user interface with a line are window 1, window 2, window 3,4 and of window respectively
Window 5.
Widthparent=(Widthchild1+Widthchild2+...+WidthchildN)-(leftPadding+
rightPadding)×N
Heightparent=(Heightchild1+Heightchild2+...+HeightchildN)-(topPadding+
bottomPadding)×N
S105, it is laid out window on a user interface according to the size of user interface and the actual size of window, determines each window
The position of mouth opposing user interfaces.
The part frame of window after layout is superimposed in adjacent window apertures, but the content area between adjacent window apertures is adjacent
And non-overlapping.
It is laid out window in the user interface in order to realize, needs to confirm that each window is opposite in the user interface
Position is referring to come the position that determines each window opposing user interfaces with adjacent window apertures in the embodiment of the present invention one:
leftN=rightN-1-leftPaddingN-rightPaddingN-1
topN=bottomN-1-topPaddingN-bottomPaddingN-1
rightN=leftN+widthN
bottomN=topN+heightN
Wherein, leftN、topN、rightN、bottomNThe left frame opposing user interfaces for respectively indicating n-th window are left
The distance of frame, the distance of upper side frame opposing user interfaces upper side frame, the distance of left frame opposing user interfaces left frame, bottom edge
The distance of frame opposing user interfaces boundary frame area；rightN-1Indicate the left frame of the left side adjacent window apertures of n-th window with respect to user
The distance of interface left frame, bottomN-1Indicate the boundary frame area opposing user interfaces bottom edge of the top adjacent window apertures of n-th window
The distance of frame；widthNIndicate the developed width of window N, heightNIndicate the actual height of window N；leftPaddingN、
topPaddingNRespectively indicate the left side width of frame and top width of frame of window N；rightPaddingN-1、
bottomPaddingN-1Respectively indicate the right width of frame (namely left side adjacent window apertures of the left side adjacent window apertures of n-th window
Content area distance cuts the width of figure right hand edge), the following width of frame of the top adjacent window apertures of n-th window (namely top phase
The content area distance of adjacent window cuts the width of figure lower edge).
Behind the position for calculating each window opposing user interfaces by above-mentioned formula, the layout of each window, cloth can be realized
The effect of office is as shown in figure 5, the part frame of window can be added in adjacent window apertures, but the content zone section of adjacent window apertures
It is only adjacent without being superimposed.
S106, the state rendering context picture that each window is corresponded on each window that user interface is laid out.
Wherein, the S106 specifically: the window in user interface is in focus condition or non-focus state, for being in
Window under non-focus state, the corresponding background picture for drawing the window under non-focus state；For under focus condition
Window, corresponding window of drawing wants the background picture under focus condition.
In the embodiment of the present invention one, due to having pre-set each window of user interface in step s101 in focus
Therefore background picture under state and non-focus state when drawing each window, directly corresponds to the state (focus/non-coke of window
Point) it chooses corresponding background picture and is drawn.And due to the exact layout in step 105 to each window, so that
The content area of each window at drafting is adjacent not to be overlapped, only exist in window under focus condition part frame can be added to it is adjacent
Window, and have the effect of highlighting focus condition, specific effect is as shown in Figure 2；If all windows are in non-focus state,
Each window effect drawn out is as shown in Figure 1.
S107, the content area that the content of window is plotted in each window.
The content includes the child window of picture, text or nesting, these contents are all that superposition is plotted in background picture
On.By its four frame, at a distance from practical four frames of window { left, top, right, bottom } is determined the content area,
Wherein:
Left=leftPadding
Top=topPadding
Right=width-rightPadding
Bottom=height-bottomPadding
Wherein, for the left frame of left expression content area at a distance from the practical left frame of window, top indicates content area
Upper side frame at a distance from the practical upper side frame of window, right indicate content area left frame at a distance from the practical left frame of window,
Bottom indicates the lower frame of content area at a distance from the practical lower frame of window；leftPadding,topPadding,
RightPadding and bottomPadding respectively indicate the left side width of frame of window, top width of frame, the right width of frame, under
Border width；Width indicates that the developed width of window, height indicate the actual height of window.
In the embodiment of the present invention one, since window is in the background picture under focus condition and the background under non-focus state
The border effect of picture is different, i.e., frame and windows content region belong to a window carrier, therefore amplify animation executing
When there is no occur imperfect fitting the problem of, present effect be improved, and only use an animation thread, reduce system provide
Source consumption.And reduce the hierarchical structure of window, to optimize UI performance, the refresh rate of UI is improved, and then promote user
Experience.
Embodiment two:
Fig. 6 shows the composed structure of the Window Processing Systems of user interface provided by Embodiment 2 of the present invention, in order to just
In explanation, only parts related to embodiments of the present invention are shown.
The Window Processing Systems of the user interface can be operate in each smart machine (such as television set) software unit,
The unit that hardware cell or software and hardware combine can also be used as independent pendant and be integrated into the smart machine.
Referring to Fig. 6, the Window Processing Systems of user interface provided by Embodiment 2 of the present invention include: the first setup module
11, the first acquisition module 12, the second setup module 13, computing module 14, layout modules 15, the second drafting module 16 and second are drawn
Molding block 17, wherein
First setup module 11, for the window of user interface to be respectively set under focus condition and under non-focus state
Background picture, window is different from the border effect of background picture under non-focus state in the background picture under focus condition, in
In the present embodiment background picture of the window under focus condition be there is hatching effect frame cut figure；
In the embodiment of the present invention two, window is in the back of background picture and window under focus condition under non-focus state
The dimensions of scape picture is identical, but effect is different, for example, background picture of the window under non-focus state be transparent picture or
Non-displaypart (i.e. frame) in person's background picture is transparent.When window obtains focus and loses focus, automatically update
Background picture.Background picture of the window under focus condition and under non-focus state is to meet what Android was standardized
NinePatchDrawable picture (is commonly called as: 9 figures of point).NinePatchDrawable supports lossless stretching, therefore focus is not
With that can be applicable on the window of size, that is, the background picture being arranged is suitable for all windows of user interface.The reality of each window
Border size includes the content area and periphery frame of centre, such as shown in the dotted line frame in Fig. 2, and under non-focus state
Background picture is identical as the actual size of the background picture of focus condition, only under non-focus state background picture frame portion
It is transparent, display content area.The content area refers to the region that image is shown in window.
First obtains module 12, for obtaining the border width of window background picture；
Referring to Fig. 4, the border width of background picture of the window under focus condition be respectively window content area away from
From cutting figure (i.e. window is in the background picture under focus condition) left edge, top edge, right hand edge, with a distance from lower edge, use respectively
LeftPadding, topPadding, rightPadding and bottomPadding are indicated.
Second setup module 13, for setting the border width for the Edge Distance of window, the Edge Distance is
The distance of frame of the content area apart from the actual size；
In the embodiment of the present invention two, specifically, increase in BlockView class attribute be used to save the edge of window away from
From.Rect data types to express (such as: Rect outPadding) can be used.Increase a method simultaneously for the window to be arranged
Edge Distance (such as: setOutPadding (Rect)).If the border width of all windows is all the same in user interface, by institute
There are four Edge Distances of window to be disposed as the border width；If the border width of each window is different in user interface,
The border width of each window is respectively corresponded the Edge Distance is arranged.It is identical with the border width of each window in the present embodiment
For be illustrated.
Computing module 14, for obtaining the actual size for all windows that user interface includes, and according to the reality of window
The size of the Edge Distance of size and window calculating user interface；
Layout modules 15, for being laid out window on a user interface according to the size of user interface and the actual size of window
Mouthful, determine the position of each window opposing user interfaces；
First drafting module 16, the state for corresponding to each window on each window that user interface is laid out draw back
Scape picture；
Wherein, first drafting module 16 is specifically used for: the window in user interface is in focus condition or non-focus
State, for the window under non-focus state, the corresponding background picture for drawing the window under non-focus state；For place
Window under focus condition, corresponding window of drawing want the background picture under focus condition.
In the embodiment of the present invention two, since the first setup module 11 has pre-set each window of user interface in coke
Therefore background picture under dotted state and non-focus state when drawing each window, directly corresponds to the state (focus/non-of window
Focus) it chooses corresponding background picture and is drawn.And since layout modules 15 are to the exact layout of each window, so that
The content area of each window at drafting is adjacent not to be overlapped, only exist in window under focus condition part frame can be added to it is adjacent
Window, and have the effect of highlighting focus condition, specific effect is as shown in Figure 2；If all windows are in non-focus state,
Each window effect drawn out is as shown in Figure 1.
Second drafting module 17, for the content of window to be plotted in the content area of each window.
In the embodiment of the present invention two, the content area is by its four frame at a distance from practical four frames of window
{ left, top, right, bottom } is determined, in which:
Left=leftPadding
Top=topPadding
Right=width-rightPadding
Bottom=height-bottomPadding
Wherein, for the left frame of left expression content area at a distance from the practical left frame of window, top indicates content area
Upper side frame at a distance from the practical upper side frame of window, right indicate content area left frame at a distance from the practical left frame of window,
Bottom indicates the lower frame of content area at a distance from the practical lower frame of window；leftPadding,topPadding,
RightPadding and bottomPadding respectively indicate the left side width of frame of window, top width of frame, the right width of frame, under
Border width；Width indicates that the developed width of window, height indicate the actual height of window.
In the embodiment of the present invention two, the computing module 14 is specifically included:
Second obtains module, and all windows for including in traverse user interface obtain the actual size of all windows,
Actual size includes actual height and developed width；
Computational submodule, for being calculated using the following equation the size of user interface, wherein WidthparentIndicate user circle
The width in face, HeightparentIndicate the height of user interface, WidthchildNIt indicates to be located in user interface with the N number of of a line
In window, the developed width of window N, HeightchildNIt indicates to be located in user interface in N number of window of same row, window N's
Actual height, leftPadding, topPadding, rightPadding and bottomPadding respectively indicate the left side of window
Width of frame, top width of frame, the right width of frame, following width of frame,
Widthparent=(Widthchild1+Widthchild2+...+WidthchildN)-(leftPadding+
rightPadding)×N
Heightparent=(Heightchild1+Heightchild2+...+HeightchildN)-(topPadding+
bottomPadding)×N。
In the embodiment of the present invention two, the position of each window opposing user interfaces is determined so that adjacent window apertures are reference:
leftN=rightN-1-leftPaddingN-rightPaddingN-1
topN=bottomN-1-topPaddingN-bottomPaddingN-1
rightN=leftN+widthN
bottomN=topN+heightN
Wherein, leftN、topN、rightN、bottomNThe left frame opposing user interfaces for respectively indicating n-th window are left
The distance of frame, the distance of upper side frame opposing user interfaces upper side frame, the distance of left frame opposing user interfaces left frame, bottom edge
The distance of frame opposing user interfaces boundary frame area；rightN-1Indicate the left frame of the left side adjacent window apertures of n-th window with respect to user
The distance of interface left frame, bottomN-1Indicate the boundary frame area opposing user interfaces bottom edge of the top adjacent window apertures of n-th window
The distance of frame；widthNIndicate the developed width of window N, heightNThe actual height of window N；leftPaddingN、
topPaddingNRespectively indicate the left side width of frame and top width of frame of window N；rightPaddingN-1、
bottomPaddingN-1Respectively indicate the right width of frame (namely left side adjacent window apertures of the left side adjacent window apertures of n-th window
Content area distance cuts the width of figure right hand edge), the following width of frame of the top adjacent window apertures of n-th window (namely top phase
The content area distance of adjacent window cuts the width of figure lower edge).
In the embodiment of the present invention two, since window is in the background picture under focus condition and the background under non-focus state
The border effect of picture is different, i.e., frame and windows content region belong to a window carrier, therefore amplify animation executing
When there is no occur imperfect fitting the problem of, present effect be improved, and only use an animation thread, reduce system provide
Source consumption.And reduce the hierarchical structure of window, to optimize UI performance, the refresh rate of UI is improved, and then promote user
Experience.
It is apparent to those skilled in the art that for convenience of description and succinctly, only with above-mentioned each function
Can unit, module division progress for example, in practical application, can according to need and by above-mentioned function distribution by different
Functional unit, module are completed, i.e., the internal structure of the system is divided into different functional unit or module, more than completing
The all or part of function of description.Each functional unit in embodiment can integrate in one processing unit, be also possible to
Each unit physically exists alone, and can also be integrated in one unit with two or more units, above-mentioned integrated unit
Both it can take the form of hardware realization, can also realize in the form of software functional units.In addition, each functional unit, mould
The specific name of block is also only for convenience of distinguishing each other, the protection scope being not intended to limit this application.It is single in above system
Member, the specific work process of module, can refer to corresponding processes in the foregoing method embodiment, details are not described herein.
Those of ordinary skill in the art may be aware that list described in conjunction with the examples disclosed in the embodiments of the present disclosure
Member and algorithm steps can be realized with the combination of electronic hardware or computer software and electronic hardware.These functions are actually
It is implemented in hardware or software, the specific application and design constraint depending on technical solution.Professional technician
Each specific application can be used different methods to achieve the described function, but this realization is it is not considered that exceed
The scope of the present invention.
In embodiment provided by the present invention, it should be understood that disclosed system and method can pass through others
Mode is realized.For example, system embodiment described above is only schematical, for example, the division of the module or unit,
Only a kind of logical function partition, there may be another division manner in actual implementation, such as multiple units or components can be with
In conjunction with or be desirably integrated into another system, or some features can be ignored or not executed.Another point, it is shown or discussed
Mutual coupling or direct-coupling or communication connection can be through some interfaces, the INDIRECT COUPLING of device or unit or
Communication connection can be electrical property, mechanical or other forms.
The unit as illustrated by the separation member may or may not be physically separated, aobvious as unit
The component shown may or may not be physical unit, it can and it is in one place, or may be distributed over multiple
In network unit.It can select some or all of unit therein according to the actual needs to realize the mesh of this embodiment scheme
's.
It, can also be in addition, the functional units in various embodiments of the present invention may be integrated into one processing unit
It is that each unit physically exists alone, can also be integrated in one unit with two or more units.Above-mentioned integrated list
Member both can take the form of hardware realization, can also realize in the form of software functional units.
If the integrated unit is realized in the form of SFU software functional unit and sells or use as independent product
When, it can store in a computer readable storage medium.Based on this understanding, the technical solution of the embodiment of the present invention
Substantially all or part of the part that contributes to existing technology or the technical solution can be with software product in other words
Form embody, which is stored in a storage medium, including some instructions use so that one
Computer equipment (can be personal computer, server or the network equipment etc.) or processor (processor) execute this hair
The all or part of the steps of bright each embodiment the method for embodiment.And storage medium above-mentioned include: USB flash disk, mobile hard disk,
Read-only memory (ROM, Read-Only Memory), random access memory (RAM, Random Access Memory), magnetic
The various media that can store program code such as dish or CD.
Embodiment described above is merely illustrative of the technical solution of the present invention, rather than its limitations；Although referring to aforementioned reality
Applying example, invention is explained in detail, those skilled in the art should understand that: it still can be to aforementioned each
Technical solution documented by embodiment is modified or equivalent replacement of some of the technical features；And these are modified
Or replacement, the spirit and model of each embodiment technical solution of the embodiment of the present invention that it does not separate the essence of the corresponding technical solution
It encloses.
Claims (9)
1. a kind of window processing method of user interface, which is characterized in that the described method includes:
Background picture of the window of user interface under focus condition and under non-focus state is respectively set, window is in focus condition
Under background picture it is different from the border effect of background picture under non-focus state；
Obtain the border width of window background picture；The border width of background picture of the window under focus condition is respectively
The content area distance of window cuts the distance of figure left edge, top edge, right hand edge, lower edge, and the figure of cutting is window in focus
Background picture under state；
The border width is set by the Edge Distance of window, the Edge Distance is practical ruler of the content area apart from window
The distance of very little frame；The actual size of the window includes intermediate content area and periphery frame；
The actual size for all windows that user interface includes is obtained, and according to the Edge Distance of the actual size of window and window
Calculate the size of user interface；
It is laid out window on a user interface according to the size of user interface and the actual size of window, determines each window with respect to user
The position at interface；
The state rendering context picture of each window is corresponded on each window that user interface is laid out；
The content of window is plotted in the content area of each window.
2. the method as described in claim 1, which is characterized in that it is described corresponded on each window that user interface is laid out it is each
The state rendering context picture of window specifically:
Window in user interface is in focus condition or non-focus state, and for the window under focus condition, correspondence is drawn
Background picture of the window under focus condition is made, it is corresponding to draw the window for the window under non-focus state
Background picture under non-focus state.
3. the method as described in claim 1, which is characterized in that back of all windows of the user interface under focus condition
The border width of scape picture is identical；
The actual size for obtaining all windows that user interface includes, and according to the edge of the actual size of window and window
The size that distance calculates user interface specifically includes:
All windows for including in traverse user interface, obtain the actual size of all windows, and actual size includes actual height
And developed width；
It is calculated using the following equation the size of user interface, wherein WidthparentIndicate the width of user interface, Heightparent
Indicate the height of user interface, WidthchildNIt indicates to be located in user interface in N number of window of a line, the practical width of window N
Degree, HeightchildNIt indicates to be located in user interface in N number of window of same row, the actual height of window N, leftPadding,
TopPadding, rightPadding and bottomPadding respectively indicate the left side width of frame of window, top width of frame, the right side
Border width, following width of frame,
Widthparent=(Widthchild1+Widthchild2+...+WidthchildN)-(leftPadding+rightPadding)
×N
Heightparent=(Heightchild1+Heightchild2+...+HeightchildN)-(topPadding+
bottomPadding)×N。
4. the method as described in claim 1, which is characterized in that the position of each window opposing user interfaces is ginseng with adjacent window apertures
According to determining:
leftN=rightN-1-leftPaddingN-rightPaddingN-1
topN=bottomN-1-topPaddingN-bottomPaddingN-1
rightN=leftN+widthN
bottomN=topN+heightN
Wherein, leftN、topN、rightN、bottomNRespectively indicate the left frame opposing user interfaces left frame of n-th window
Distance, the distance of upper side frame opposing user interfaces upper side frame, the distance of left frame opposing user interfaces left frame, boundary frame area are opposite
The distance of user interface boundary frame area；rightN-1Indicate that the left frame opposing user interfaces of the left side adjacent window apertures of n-th window are right
The distance of frame, bottomN-1Indicate n-th window top adjacent window apertures boundary frame area opposing user interfaces boundary frame area away from
From；widthNIndicate the developed width of window N, heightNThe actual height of window N；leftPaddingN、topPaddingNPoint
Not Biao Shi window N left side width of frame and top width of frame；rightPaddingN-1、bottomPaddingN-1Respectively indicate N
The following width of frame of the right width of frame of the left side adjacent window apertures of a window, the top adjacent window apertures of n-th window.
5. the method as described in claim 1, which is characterized in that the content area passes through its four frame and practical four sides of window
The distance { left, top, right, bottom } of frame determines, in which:
Left=leftPadding
Top=topPadding
Right=width-rightPadding
Bottom=height-bottomPadding
Wherein, for the left frame of left expression content area at a distance from the practical left frame of window, top indicates the top of content area
Frame at a distance from the practical upper side frame of window, right indicate content area left frame at a distance from the practical left frame of window,
Bottom indicates the lower frame of content area at a distance from the practical lower frame of window；leftPadding,topPadding,
RightPadding and bottomPadding respectively indicate the left side width of frame of window, top width of frame, the right width of frame, under
Border width；Width indicates that the developed width of window, height indicate the actual height of window.
6. a kind of Window Processing Systems of user interface, which is characterized in that the system comprises:
First setup module, for Background of the window of user interface under focus condition and under non-focus state to be respectively set
Piece, window are different from the border effect of background picture under non-focus state in the background picture under focus condition；
First obtains module, for obtaining the border width of window background picture；Background of the window under focus condition
The border width of piece is respectively that the content area distance of window cuts the distance of figure left edge, top edge, right hand edge, lower edge, institute
Stating and cutting figure is background picture of the window under focus condition；
Second setup module, for setting the border width for the Edge Distance of window, the Edge Distance is content regions
The distance of the frame of actual size of the domain apart from window；The actual size of the window includes intermediate content area and periphery
Frame；
Computing module, for obtaining the actual size for all windows that user interface includes, and according to the actual size of window and
The Edge Distance of window calculates the size of user interface；
Layout modules are determined for being laid out window on a user interface according to the size of user interface and the actual size of window
The position of each window opposing user interfaces；
First drafting module, for corresponding to the state rendering context figure of each window on each window that user interface is laid out
Piece；
Second drafting module, for the content of window to be plotted in the content area of each window.
7. system as claimed in claim 6, which is characterized in that back of all windows of the user interface under focus condition
The border width of scape picture is identical；
The computing module specifically includes:
Second obtains module, and all windows for including in traverse user interface obtain the actual size of all windows, practical
Size includes actual height and developed width；
Computational submodule, for being calculated using the following equation the size of user interface, wherein WidthparentIndicate user interface
Width, HeightparentIndicate the height of user interface, WidthchildNIt indicates to be located at N number of window with a line in user interface
In, the developed width of window N, HeightchildNIt indicates to be located in user interface in N number of window of same row, the reality of window N
Highly, leftPadding, topPadding, rightPadding and bottomPadding respectively indicate the left side frame width of window
Degree, top width of frame, the right width of frame, following width of frame,
Widthparent=(Widthchild1+Widthchild2+...+WidthchildN)-(leftPadding+rightPadding)
×N
Heightparent=(Heightchild1+Heightchild2+...+HeightchildN)-(topPadding+
bottomPadding)×N。
8. system as claimed in claim 6, which is characterized in that the position of each window opposing user interfaces is ginseng with adjacent window apertures
According to determining:
leftN=rightN-1-leftPaddingN-rightPaddingN-1
topN=bottomN-1-topPaddingN-bottomPaddingN-1
rightN=leftN+widthN
bottomN=topN+heightN
Wherein, leftN、topN、rightN、bottomNRespectively indicate the left frame opposing user interfaces left frame of n-th window
Distance, the distance of upper side frame opposing user interfaces upper side frame, the distance of left frame opposing user interfaces left frame, boundary frame area are opposite
The distance of user interface boundary frame area；rightN-1Indicate that the left frame opposing user interfaces of the left side adjacent window apertures of n-th window are right
The distance of frame, bottomN-1Indicate n-th window top adjacent window apertures boundary frame area opposing user interfaces boundary frame area away from
From；widthNIndicate the developed width of window N, heightNThe actual height of window N；leftPaddingN、topPaddingNPoint
Not Biao Shi window N left side width of frame and top width of frame；rightPaddingN-1、bottomPaddingN-1Respectively indicate N
The following width of frame of the right width of frame of the left side adjacent window apertures of a window, the top adjacent window apertures of n-th window.
9. a kind of television set, which is characterized in that the television set includes the described in any item user interfaces of claim 6 to 8
Window Processing Systems.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201410843233.8A CN105812881B (en) | 2014-12-30 | 2014-12-30 | A kind of window processing method, system and the television set of user interface |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201410843233.8A CN105812881B (en) | 2014-12-30 | 2014-12-30 | A kind of window processing method, system and the television set of user interface |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN105812881A CN105812881A (en) | 2016-07-27 |
| CN105812881B true CN105812881B (en) | 2019-03-01 |
Family
ID=56419991
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201410843233.8A Active CN105812881B (en) | 2014-12-30 | 2014-12-30 | A kind of window processing method, system and the television set of user interface |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN105812881B (en) |
Families Citing this family (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109104627B (en) * | 2017-06-21 | 2020-08-04 | 武汉斗鱼网络科技有限公司 | Focus background generation method, storage medium, device and system of android television |
| CN107861788A (en) * | 2017-11-23 | 2018-03-30 | 深圳市雷鸟信息科技有限公司 | Picture layout method, terminal and computer-readable recording medium |
| CN111679474B (en) | 2020-06-15 | 2021-12-03 | 深圳市华星光电半导体显示技术有限公司 | Pixel design method and device and electronic equipment |
| CN112631703B (en) * | 2020-12-25 | 2023-08-01 | 北京百度网讯科技有限公司 | Method, device, equipment and storage medium for generating graphic frame |
| CN113760140B (en) * | 2021-08-31 | 2023-12-08 | Oook(北京)教育科技有限责任公司 | Content display method, device, medium and electronic equipment |
Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101577797A (en) * | 2009-06-03 | 2009-11-11 | 中兴通讯股份有限公司 | Page focus movement method and system |
| CN101882432A (en) * | 2010-02-01 | 2010-11-10 | 深圳市同洲电子股份有限公司 | Focus element display method, device and digital television receiving terminal |
| CN102065336A (en) * | 2010-07-21 | 2011-05-18 | 深圳创维数字技术股份有限公司 | Digital television receiver and method for determining multistage window shearing relation of digital television receiver |
| CN102830966A (en) * | 2012-07-31 | 2012-12-19 | 北京奇虎科技有限公司 | Information display system and method |
| CN103297854A (en) * | 2012-08-24 | 2013-09-11 | 乐视致新电子科技（天津）有限公司 | Method for controlling focuses of web pages |
| US8732757B2 (en) * | 1996-12-19 | 2014-05-20 | Gemstar Development Corporation | System and method for targeted advertisement display responsive to user characteristics |
| CN103885755A (en) * | 2012-12-19 | 2014-06-25 | 腾讯科技（深圳）有限公司 | Method and device for implementing screen matching of owner-draw controls |
-
2014
- 2014-12-30 CN CN201410843233.8A patent/CN105812881B/en active Active
Patent Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US8732757B2 (en) * | 1996-12-19 | 2014-05-20 | Gemstar Development Corporation | System and method for targeted advertisement display responsive to user characteristics |
| CN101577797A (en) * | 2009-06-03 | 2009-11-11 | 中兴通讯股份有限公司 | Page focus movement method and system |
| CN101882432A (en) * | 2010-02-01 | 2010-11-10 | 深圳市同洲电子股份有限公司 | Focus element display method, device and digital television receiving terminal |
| CN102065336A (en) * | 2010-07-21 | 2011-05-18 | 深圳创维数字技术股份有限公司 | Digital television receiver and method for determining multistage window shearing relation of digital television receiver |
| CN102830966A (en) * | 2012-07-31 | 2012-12-19 | 北京奇虎科技有限公司 | Information display system and method |
| CN103297854A (en) * | 2012-08-24 | 2013-09-11 | 乐视致新电子科技（天津）有限公司 | Method for controlling focuses of web pages |
| CN103885755A (en) * | 2012-12-19 | 2014-06-25 | 腾讯科技（深圳）有限公司 | Method and device for implementing screen matching of owner-draw controls |
Also Published As
| Publication number | Publication date |
|---|---|
| CN105812881A (en) | 2016-07-27 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN105812881B (en) | A kind of window processing method, system and the television set of user interface | |
| KR102208183B1 (en) | Method and apparatus for realizing color tween animation | |
| CN105677351B (en) | The compatible display methods of multiwindow and device | |
| CN104679391B (en) | The icon display method and device of intelligent watch | |
| CN104978195A (en) | Interface configuration device and method | |
| CN106934838A (en) | Picture display method, equipment and programmable device | |
| CN109324796A (en) | Quick interface arrangement method and device | |
| CN106610829A (en) | Webpage screenshot method and device | |
| CN107077347B (en) | View management architecture | |
| CN109086126A (en) | Task scheduling processing method, apparatus, server, client and electronic equipment | |
| CN106791792B (en) | Adjust the method and system that VR equipment shows image | |
| WO2019018062A1 (en) | Organizing images automatically into image grid layout | |
| US9489771B2 (en) | Techniques for spatially sorting graphics information | |
| CN105208456A (en) | Method and device for displaying interactive information of virtual audiences | |
| KR101640845B1 (en) | Method, apparatus, terminal, program, and recording medium for adjusting widget | |
| CN104052981A (en) | Information processing method and electronic equipment | |
| CN105867723A (en) | Display interface adjusting method and device | |
| CN108196803A (en) | A kind of multi-screen display method and equipment | |
| CN104461615B (en) | A kind of processing method and electronic equipment of skin resource | |
| CN107239212A (en) | Segmentation selection view rendering method, device and user terminal | |
| CN109495697A (en) | Multi-screen extended method, system, storage medium and terminal based on video cutting | |
| WO2017071212A1 (en) | Method and device for processing recommendation of frequently used contact | |
| CN106201215A (en) | A kind of multi-screen display method based on terminal and terminal | |
| CN109376627A (en) | A kind of method for detecting human face based on deep learning, device and equipment | |
| CN109189537A (en) | The dynamic display method of page info calculates equipment and computer storage medium |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| C10 | Entry into substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |