A kind of window processing method, system and the television set of user interfaceTechnical 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 handMachine 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 elementIn the case where, it can greatly drag down the refresh rate of UI (User Interface, user interface).Therefore UI performance is promoted more and moreIt is important.The main interface application of TV is one of application the most complicated in smart television.Element and animation in main interface compareMore, 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 amplificationAnimation, 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. 2Fruit because effect shaded area shown in Fig. 2 is very big, and can cover surrounding View.It is common to do to reach this effectMethod 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 largelyCombine View.It is well known that the more view hierarchical structure the more complicated, the time that system rendering needs is also longer.Therefore thisMethod 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 sideFrame 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 systemThe 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 solveThe 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 focusBackground 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 windowDistance 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 oppositeThe 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 setScape 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 windowVery 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 outPicture；
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 stateFrame effect is different, i.e., frame and windows content region belong to a window carrier, therefore are not present when executing and amplifying animationThere 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 implementationExample, the present invention will be described in further detail.It should be appreciated that specific embodiment described herein is only used to explain this hairIt 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 setIt is different from the border effect of background picture under non-focus state in the background picture under focus condition, focus in this present embodimentBackground 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 stateThe dimensions of scape picture is identical, but effect is different, for example, background picture of the window under non-focus state be transparent picture orNon-displaypart (i.e. frame) in person's background picture is transparent.When window obtains focus and loses focus, automatically updateBackground picture.Background picture of the window under focus condition and under non-focus state is to meet what Android was standardizedNinePatchDrawable picture (is commonly called as: 9 figures of point).NinePatchDrawable supports lossless stretching, therefore focus is notWith 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 windowBorder 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 stateBackground picture is identical as the actual size of the background picture of focus condition, only under non-focus state background picture frame portionIt 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 fromFrom 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 respectivelyLeftPadding, 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 instituteState 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 windowEdge distance.Rect data types to express (such as: Rect outPadding) can be used.Increase a method simultaneously for the window to be arrangedThe 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 interfaceTogether, 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 windowIt 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 windowEdge 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 practicalHeight 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, windowThe 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, onBorder 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 interfaceIt 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 respectivelyWindow 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 windowThe 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 adjacentAnd 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 interfacePosition 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 leftThe 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 edgeThe 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 userThe 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 windowThe 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 windowContent 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 phaseThe 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 realizedThe 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 aperturesIt 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 inWindow under non-focus state, the corresponding background picture for drawing the window under non-focus state；For under focus conditionWindow, 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 focusTherefore background picture under state and non-focus state when drawing each window, directly corresponds to the state (focus/non-coke of windowPoint) it chooses corresponding background picture and is drawn.And due to the exact layout in step 105 to each window, so thatThe 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 adjacentWindow, 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 pictureOn.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 areaUpper 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, underBorder 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 stateThe border effect of picture is different, i.e., frame and windows content region belong to a window carrier, therefore amplify animation executingWhen there is no occur imperfect fitting the problem of, present effect be improved, and only use an animation thread, reduce system provideSource consumption.And reduce the hierarchical structure of window, to optimize UI performance, the refresh rate of UI is improved, and then promote userExperience.
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 justIn 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 module11, the first acquisition module 12, the second setup module 13, computing module 14, layout modules 15, the second drafting module 16 and second are drawnMolding block 17, wherein
First setup module 11, for the window of user interface to be respectively set under focus condition and under non-focus stateBackground picture, window is different from the border effect of background picture under non-focus state in the background picture under focus condition, inIn 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 stateThe dimensions of scape picture is identical, but effect is different, for example, background picture of the window under non-focus state be transparent picture orNon-displaypart (i.e. frame) in person's background picture is transparent.When window obtains focus and loses focus, automatically updateBackground picture.Background picture of the window under focus condition and under non-focus state is to meet what Android was standardizedNinePatchDrawable picture (is commonly called as: 9 figures of point).NinePatchDrawable supports lossless stretching, therefore focus is notWith 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 windowBorder 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 stateBackground picture is identical as the actual size of the background picture of focus condition, only under non-focus state background picture frame portionIt 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 fromFrom 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 respectivelyLeftPadding, topPadding, rightPadding and bottomPadding are indicated.
Second setup module 13, for setting the border width for the Edge Distance of window, the Edge Distance isThe 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 fromFrom.Rect data types to express (such as: Rect outPadding) can be used.Increase a method simultaneously for the window to be arrangedEdge Distance (such as: setOutPadding (Rect)).If the border width of all windows is all the same in user interface, by instituteThere 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 embodimentFor be illustrated.
Computing module 14, for obtaining the actual size for all windows that user interface includes, and according to the reality of windowThe 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 windowMouthful, 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 backScape picture；
Wherein, first drafting module 16 is specifically used for: the window in user interface is in focus condition or non-focusState, for the window under non-focus state, the corresponding background picture for drawing the window under non-focus state；For placeWindow 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 cokeTherefore background picture under dotted state and non-focus state when drawing each window, directly corresponds to the state (focus/non-of windowFocus) it chooses corresponding background picture and is drawn.And since layout modules 15 are to the exact layout of each window, so thatThe 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 adjacentWindow, 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 areaUpper 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, underBorder 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 circleThe width in face, HeightparentIndicate the height of user interface, WidthchildNIt indicates to be located in user interface with the N number of of a lineIn 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'sActual height, leftPadding, topPadding, rightPadding and bottomPadding respectively indicate the left side of windowWidth 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 leftThe 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 edgeThe 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 userThe 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 windowThe 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 windowContent 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 phaseThe 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 stateThe border effect of picture is different, i.e., frame and windows content region belong to a window carrier, therefore amplify animation executingWhen there is no occur imperfect fitting the problem of, present effect be improved, and only use an animation thread, reduce system provideSource consumption.And reduce the hierarchical structure of window, to optimize UI performance, the refresh rate of UI is improved, and then promote userExperience.
It is apparent to those skilled in the art that for convenience of description and succinctly, only with above-mentioned each functionCan unit, module division progress for example, in practical application, can according to need and by above-mentioned function distribution by differentFunctional unit, module are completed, i.e., the internal structure of the system is divided into different functional unit or module, more than completingThe all or part of function of description.Each functional unit in embodiment can integrate in one processing unit, be also possible toEach unit physically exists alone, and can also be integrated in one unit with two or more units, above-mentioned integrated unitBoth it can take the form of hardware realization, can also realize in the form of software functional units.In addition, each functional unit, mouldThe 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 systemMember, 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 disclosureMember and algorithm steps can be realized with the combination of electronic hardware or computer software and electronic hardware.These functions are actuallyIt is implemented in hardware or software, the specific application and design constraint depending on technical solution.Professional technicianEach specific application can be used different methods to achieve the described function, but this realization is it is not considered that exceedThe scope of the present invention.
In embodiment provided by the present invention, it should be understood that disclosed system and method can pass through othersMode 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 withIn conjunction with or be desirably integrated into another system, or some features can be ignored or not executed.Another point, it is shown or discussedMutual coupling or direct-coupling or communication connection can be through some interfaces, the INDIRECT COUPLING of device or unit orCommunication 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 unitThe component shown may or may not be physical unit, it can and it is in one place, or may be distributed over multipleIn 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 unitIt is that each unit physically exists alone, can also be integrated in one unit with two or more units.Above-mentioned integrated listMember 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 productWhen, it can store in a computer readable storage medium.Based on this understanding, the technical solution of the embodiment of the present inventionSubstantially all or part of the part that contributes to existing technology or the technical solution can be with software product in other wordsForm embody, which is stored in a storage medium, including some instructions use so that oneComputer equipment (can be personal computer, server or the network equipment etc.) or processor (processor) execute this hairThe 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), magneticThe 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 realityApplying example, invention is explained in detail, those skilled in the art should understand that: it still can be to aforementioned eachTechnical solution documented by embodiment is modified or equivalent replacement of some of the technical features；And these are modifiedOr 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 solutionIt encloses.