CN108334386A

CN108334386A - A kind of layout method and system of view component

Info

Publication number: CN108334386A
Application number: CN201710041324.3A
Authority: CN
Inventors: 高巍; 洪小龙; 黄宇
Original assignee: Alibaba Group Holding Ltd
Current assignee: Alibaba Group Holding Ltd
Priority date: 2017-01-20
Filing date: 2017-01-20
Publication date: 2018-07-27

Abstract

The embodiment of the present application discloses a kind of layout method and system of view component.In the embodiment of the present application, the mapping relations between the mark of view component and placement strategy are set up in the client, client only need to be according to the mark of first view component in the target area for currently needing to be laid out, according to the mapping relations between the mark and placement strategy of view component, determine the corresponding placement strategy of mark of first view component, the placement strategy of the layout areas belonging to the placement strategy determined i.e. first view component.So that sequentially in each layout areas different placement logic can be realized successively by being repeatedly laid out (placement strategy is the instantiation of placement logic).By the embodiment of the present application, the layout structure of view component is able to flattening in UI, and the efficiency of the layout of client executing view is promoted.

Description

A kind of layout method and system of view component

Technical field

This application involves the layout methods and system of software technology field more particularly to a kind of view component.

Background technology

When the user interface (User Interface, UI) of client is that user interacts with client, user's operation Object.UI is made of view component (view), and client carries out cloth according to different placement logics to the view in UI Office, may be implemented different UI patterns.In general, operating system provides layout container, client utilizes the layout container pair The view of UI is laid out.So-called layout container is substantially view component group (viewgroup), for being included to it View carries out the layout of specified arrangement logic.It is worth noting that a viewgroup (including layout container) can only bind one Kind placement logic.

The layout method of existing view be in layout container, using layout structure nested layer by layer viewgroup come The placement logic (i.e. mixed layout) of a variety of view is realized in UI.Although this is because a viewgroup can only be directly real A kind of existing placement logic, if but increase an at least layout layer structure in a layout container, with a kind of layout on layer 1 Logic placement multiple viewgroup or view, viewgroup again can further nesting viewgroup and/or view, then Mixed layout can be realized indirectly.

For example, in fig 1 a, view1~view6 is nested within viewgroup2, viewgroup2 is further nested Within viewgroup1.Often primary to being nested in UI, the layout structure of view is increased by one layer in UI.view0、 Viewgroup1, viewgroup3 can be considered as layer 1, and viewgroup2, view7~view10 can be considered as layer 2, and view1~ View6 can be considered as layer 3.UI is based on RecyclerView on the whole, and 1, layer realizes a kind of placement logic, i.e. view0, The placement logic of viewgroup1, viewgroup3 are linear placements.Client needs on each layer each successively It is laid out in viewgroup, layer by layer recurrence to layer 1, is finally completed viewgroup1, view0, viewgroup3 on layer 1 Linear placement, to realize the mixed layout of view.

But the layout structure of this nesting layer by layer is complex, client is needed when executing the layout of view from most View in later layer starts the viewgroup recurrence of successively upper layer, that is to say, that the layout method of existing view is deposited In less efficient problem.

Invention content

The embodiment of the present application provides a kind of layout method and system of view component, to solve the cloth of existing view component The less efficient problem of office's method.

In order to solve the above technical problems, what the embodiment of the present application was realized in：

A kind of layout method of view component provided by the embodiments of the present application, including：

Receive the attribute information of the target area for the user interface UI that layout container is sent；

According to the attribute information, the mark of first view component to be laid out in the target area is determined；

According to the mapping relations between the mark and placement strategy of view component, the mark with the first view component is determined Know corresponding placement strategy；

According to the placement strategy, since the first view component, the layout view component in the target area.

Layout manager receives the attribute information of the target area for the user interface UI that layout container is sent；

According to the mapping relations between the mark of view component and layout actuator, determine and the first view component Corresponding layout actuator is identified, and the mark of the first view component is sent to the layout actuator determined, so that The layout actuator is since the first view component, the layout view component in the target area.

It is laid out the mark that actuator receives first view component to be laid out in the target area that layout manager is sent；

According to the corresponding placement strategy of mark of the first view component, since first view component, Layout view component in the target area.

A kind of layout system of view component provided by the embodiments of the present application, including：

It is laid out adapter, layout manager, layout actuator；

The layout adapter, the layout manager and layout container are bound, and the layout manager manages multiple institutes State layout actuator；

The layout adapter receives the initialization data that business side is sent, view is determined according to the initialization data Mapping relations between the mark and layout actuator of component；Mapping between the mark of view component and layout actuator is closed System is sent to the layout manager；

The layout manager determines the mapping relations between the mark of view component and layout actuator；Receive layout The attribute information for the target area that container is sent is determined according to the attribute information to be laid out first in the target area The mark of a view component determines and described first according to the mapping relations between the mark of view component and layout actuator The corresponding layout actuator of mark of a view component sends first view component to the layout actuator determined Mark；

The layout actuator is regarded according to the corresponding strategy of mark of first view component from described first Figure component starts, the layout view component in the target area.

A kind of placement device of view component provided by the embodiments of the present application, including：

Receiving module receives the attribute information of the target area for the user interface UI that layout container is sent；

First determining module determines first view component to be laid out in the target area according to the attribute information Mark；

Second determining module determines and described the according to the mapping relations between the mark and placement strategy of view component The corresponding placement strategy of mark of one view component；

Layout modules are laid out since the first view component in the target area according to the placement strategy View component.

Second determining module, according to view component mark layout actuator between mapping relations, determine with it is described The corresponding layout actuator of mark of first view component, and the mark of the first view component is sent to the cloth determined Office's actuator, so that the layout actuator is since the first view component, the layout view group in the target area Part.

Receiving module receives the mark of first view component to be laid out in the target area that layout manager is sent；

Layout modules, according to the corresponding placement strategy of mark of the first view component, from first sets of views Part starts, the layout view component in the target area.

By the above technical solution provided by the embodiments of the present application as it can be seen that in the embodiment of the present application, setting up in the client Mapping relations between the mark and placement strategy of view component, client only need to be according in the target areas for currently needing to be laid out The mark of first view component determine described according to the mapping relations between the mark and placement strategy of view component Belonging to the corresponding placement strategy of mark of one view component, the placement strategy determined i.e. first view component Layout areas placement strategy.So that sequentially in each layout areas difference can be realized successively by being repeatedly laid out Placement logic (placement strategy is the instantiation of placement logic).By the embodiment of the present application, the layout knot of view component in UI Structure is able to flattening, and the efficiency of the layout of client executing view is promoted.

Description of the drawings

In order to illustrate the technical solutions in the embodiments of the present application or in the prior art more clearly, to embodiment or will show below There is attached drawing needed in technology description to be briefly described, it should be apparent that, the accompanying drawings in the following description is only this Some embodiments described in application, for those of ordinary skill in the art, in the premise of not making the creative labor property Under, other drawings may also be obtained based on these drawings.

Fig. 1 a~1b are the UI schematic diagrames that the prior art provides；

Fig. 2 is the schematic diagram for the ListView that the prior art provides；

Fig. 3 is the layout method flow chart of view component provided by the embodiments of the present application；

Fig. 4 a~4b are the view mixed layout schematic diagrames of flattening provided by the embodiments of the present application；

Fig. 5 a~5b are after UI provided by the embodiments of the present application scrolls up, and the schematic diagram and UI of target area scroll down through Afterwards, the schematic diagram of target area；

Fig. 6 is a kind of schematic diagram of self-defined layout provided by the embodiments of the present application；

Fig. 7 is the contrast schematic diagram of this programme provided by the embodiments of the present application and existing scheme；

Fig. 8 is a kind of schematic diagram of the layout system of view component provided by the embodiments of the present application；

Fig. 9 is the Organization Chart of the layout system of existing view component；

Figure 10 is the Organization Chart of the layout system of view component provided by the embodiments of the present application；

Figure 11 is that the layout system of view component provided by the embodiments of the present application executes the flow chart of layout；

Figure 12 is a kind of layout method flow chart of view component provided by the embodiments of the present application；

Figure 13 is a kind of layout method flow chart of view component provided by the embodiments of the present application；

Figure 14 is a kind of placement device schematic diagram of view component provided by the embodiments of the present application；

Figure 15 is a kind of placement device schematic diagram of view component provided by the embodiments of the present application；

Figure 16 is a kind of placement device schematic diagram of view component provided by the embodiments of the present application.

Specific implementation mode

The embodiment of the present application provides a kind of layout method and system of view component.

In order to make those skilled in the art better understand the technical solutions in the application, below in conjunction with the application reality The attached drawing in example is applied, technical solutions in the embodiments of the present application is clearly and completely described, it is clear that described implementation Example is merely a part but not all of the embodiments of the present application.Based on the embodiment in the application, this field is common The every other embodiment that technical staff is obtained without creative efforts should all belong to the application protection Range.

Whether which kind of operating system (such as android, iOS, Windows), be all in such a way that layout container is provided, Client's end group of installation is set to execute the layout of view component (view) in UI using layout container, UI binds layout container Afterwards, the view in UI is laid out, that is, the view in layout container is laid out.No matter which kind of operation be mounted to The client of system, when carrying out mixed layout using layout container, the problem described in background technology is all existing.In order to retouch Explanation is unfolded hereafter only by taking the layout container that android is provided as an example in the convenience stated.

So that the layout structure of view is able to flattening in layout container, it is the application technical solution claimed Main purpose.After the layout structure flattening of view, the execution efficiency in addition to that can promote client can also solve another On the one hand how the problem of perplexing those skilled in the art realizes the mixed layout in layout container, on the other hand realization pair Each view in layout container can be carried out recycling and be multiplexed.Specifically, the application technical solution claimed, It is related to three application scenarios：Rotatable UI, recycling and multiplexing to view, the mixed layout of view.

In practical applications, there are a kind of rotatable UI, this rotatable UI to be limited by screen size, User is allowed to roll to browse all the elements on UI.As shown in Figure 1 b, user scrolls up UI, needs to show the lower edge portions UI Point in view11, view12 when, view11, view12 will be generated, and occupy new memory.

In order to alleviate memory pressure, operating system provides a kind of layout container for supporting to recycle view and be multiplexed RecyclerView, when carrying out the layout of view using RecyclerView, RecyclerView can be in container View is recycled and is multiplexed.Specifically, when user rolls UI, rotating out the view except screen ranges can be recovered (i.e. shared memory will not be released), is multiplexed in generating the view for being scrolled into the same type in screen ranges, will not thus account for With new memory.But the premise that RecyclerView is able to that each view is recycled and is multiplexed is, layout structure is flat Graduation.

The mixed layout of view as shown in Figure 1a, RecyclerView can only on layer 1 viewgroup1, view0, Viewgroup3 is that object is recycled and is multiplexed.By taking view1 as an example, display same type can not be multiplexed to View11, view12, because view1 is not on layer 1.That is, view1 individually cannot be recycled and be multiplexed, Fig. 1 b In need separately to generate with view11, view12 of view1 same types, also just occupy new memory.

As it can be seen that for rotatable UI, in order to realize each view all reusings, this requires layout structure flat Graduation；In order to promote the efficiency of client executing layout, layout structure flattening is also required.

In the embodiment of the present application, the layout container can be common layout container, can also be to support to view Recycled the layout container being multiplexed to the view of recycling so as to client, can be specifically ListView, The layout containers such as RecyclerView.It is of course also possible to which the layout container of recycling and the multiplexing to not supporting view, such as common View component group (groupview), Scrollview are technically extended, and with recycling view and provide multiplexing view Function layout container.

Layout container is substantially view component group (viewgroup), and viewgroup is a sensu lato concept, It can be a container, can also be the view component group of different zones in a container, the effect of viewgroup is exactly to be The layout of view provides independent performing environment, and therefore, the placement logic of view can be different in each viewgroup, and one A kind of placement logic of view may be implemented in a viewgroup.Certainly, for a layout container, if in the layout Not further nested at least one layer viewgroup, only carries out flattening directly in the layout container to view in container Layout, then the layout container can only also realize a kind of placement logic.Wherein, placement logic refers to the arrangement mode of view, line Property layout, grid layout, waterfall spread office etc..

This is also to be the layout container by being bound to UI in UI in the where layout method of existing view (RecyclerView) it is layered, i.e., nesting viewgroup layer by layer, carrying out specified arrangement respectively in each viewgroup patrols Volume layout, to realize the mixed layout of view.

As shown in Figure 1a, UI include view and/or viewgroup, viewgroup can further include view and/or Viewgroup, a viewgroup can only realize a kind of layout.Viewgroup1 realizes that viewgroup2's and view7 is linear Layout, viewgroup2 realize that the grid of view1~view6 is laid out, viewgroup3 realizations view8, view9, The waterfall that view10 ... is waited spreads office.Each view is nested within viewgroup, and viewgroup2 is further nested in Within viewgroup1.Often primary to being nested in UI, the layout structure of view is increased by one layer in UI.Such as Fig. 1, view0, Viewgroup1, viewgroup3 can be considered as layer 1, and viewgroup2, view7~view10 can be considered as layer 2, and view1~ View6 can be considered as layer 3.

And the application scenarios of the embodiment of the present application are, it, both can be to rotating out outside screen ranges in rotatable UI Each view is recycled and is multiplexed, and can carry out mixed layout to the view component in UI.And the layout container can be with It is the layout container for supporting recycling and multiplexing view, why not the application is specifically restricted the layout container.

In order to realize that rotatable UI, android provide following three kinds of layout containers：

1、ScrollView.In ScrollView, when user scrolls up UI, in the visible range of UI Some view can be scrolled out visible range, can be generated in the new target area being scrolled into screen visible range new view.But new view can occupy new memory, UI is longer, bigger to the pressure of memory, it is easy to cause client It interim card and jumps out.

2, for the drawbacks described above of ScrollView, android provides another layout container, i.e. ListView.Fig. 2 It is ListView schematic diagrames.As shown in Fig. 2, can have multiple view in Listview in every a line, each row vertical linear arrangement. Listview supports are recycled and are multiplexed as unit of a line view, can be to rotating out the often row view of screen visible range It is recycled and is cached, if being scrolled into the new target area in screen visible range needs a line view to be shown therewith The type of a line view of preceding caching is all identical, then need not newborn view in a row, need to only call and be recycled in caching A line view carries out new rendering.But List View container deposits problem both ways.It on the one hand, can only be with a line View is that unit is recycled and is multiplexed, and single view can not be recycled and is multiplexed, recovery size is thicker, and newly-generated is same Type view often still understands committed memory, causes multiplexing efficiency relatively low；On the other hand, each row in a List View container The linear placement's logic that can only be cannot meet and carry out mixed layout to view under complicated business scenario (view in UI have A variety of placement logics) demand.

3, RecyclerView is another layout container that android is provided, and can be considered as the upgrading of ListView Version, dedicated for realizing the recycling and multiplexing of the view in layout container.It is right under the single placement logic of view container support to recycle Single view is recycled and is multiplexed, and recovery size is thinner.RecyclerView mainly has 3 points of upgradings relative to ListView： 1, it supports to scroll left and right UI；2, in addition to layout container binds linear placement logic, layout container is also supported to bind other layouts and patrol Volume；3, it supports that the view in layout container individually recycle and be multiplexed.But it is mixed when needing recycling view container to realize When layout, often gather further directed to the corresponding view of different placement logics in recycling view container, by each set View is packaged into a series of viewgroup respectively, in this way since, for these packed view, recycle view container Cannot be as unit of it, and can only be recycled and be multiplexed as unit of its corresponding viewgroup, also result in multiplexing Less efficient problem.

In practical applications, need to match Reyclerview bindings layout manager (LayoutManager), Adapter (Adapter), recovery pond are laid out to utilize Reyclerview to carry out the layout of view.Layout manager is responsible for measurement The size of each view in Reyclerview, view is put on corresponding position, and layout adapter is responsible for objective according to safeguarding The specified business datum in the business side at family end generates view component, and the view component of generation is supplied to layout manager, recycles Pond is used to store the view of recycling.When needing to generate view component, layout adapter is called to generate by Reyclerview, Reyclerview can be searched first in recovery pond either with or without reusable view component, if there is the view component that will be just multiplexed It is supplied directly to layout adapter, if not then generates a new view component and is supplied to layout adapter.Android is silent Recognize and provides three kinds of layout managers：Linear placement's manager (LinearLayoutManager), grid layout manager (GridLayoutManager), waterfall stream layout manager (StaggeredLayoutManager).These three layout managers Linear placement is corresponded to respectively, grid layout, waterfall spread the placement logic of office.Since Reyclerview is substantially also Viewgroup, therefore a Reyclerview can only also realize a kind of placement logic, that is, bind a kind of layout manager.

As previously mentioned, in order to realize the mixed layout of view, hierarchical layout can only be carried out in layout container, each A kind of placement logic is directly realized by viewgroup, Reyclerview is no exception.In fact, due to the UI in Fig. 1 a~1b The layout of layer 1 in bound layout container is linear placement, therefore the layout container can be Listview, can also be It is bundled with the Reyclerview of linear placement's manager.

Also for the convenience of description, hereafter only by taking the layout container is Reyclerview as an example, explanation is unfolded.

By it is set forth above it is found that existing view component layout method, in order to realize the view's in rotatable UI Layout, can not realize single view reusings and mixed layout simultaneously.And crux therein is to use Reyclerview When have to comply with operating system formulation agreement, i.e. Reyclerview as a kind of layout container can only bind it is a kind of layout patrol Volume, and Reyclerview only supports that the unit on layer 1 is recycled and is multiplexed.Therefore, in order to realize mixed layout, just It obtains and carries out multilayer layout in Reyclerview, but Reyclerview is but only supported to the unit (viewgroup on layer 1 Or view) recycled and be multiplexed, the view being nested in each viewgroup just can not be recovered and be multiplexed；And in order to realize The recycling and multiplexing of single view, just cannot achieve mixed layout.

But, other than three kinds of layout managers that Reyclerview acquiescences can be bound, operating system also supports third party The self-defined layout manager of developer, and technical extension is carried out to layout adapter, to adapt to the need of business complexity It asks.Application Programming Interface (the Application of Reyclerview specifically, android has opened to the outside world Programming Interface, API), the layout pipe that third party developer can call this API mating to Reyclerview It manages device and adapter carries out self-defined and extension.

And the application technical solution claimed, by layout manager to Reyclerview and adapter into The technical extension of row, specifically, being a kind of self-defined new layout manager in addition to three kinds of layout managers of acquiescence (VirtualLayoutManager), layout adapter is extended, with new function, the layout adaptation after extension Device (VirtualLayoutAdapter) is used with customized layout manager cooperation Reyclerview, may be implemented in UI To the mixed layout of view flattenings, the recycling to single view and multiplexing are not influenced.

It is in this it is critical that VirtualLayoutManager no longer corresponds to unique placement logic, but with real The ability of existing a variety of placement logics.Specifically, VirtualLayoutManager can safeguard in UI different zones from it is different The correspondence of placement strategy (after being instantiated to placement logic according to specific layout parameter, just obtaining placement strategy), also may be used To manage multiple layout actuators (LayoutHelper), each actuator that is laid out is responsible for specially executing one to a layout areas Kind placement strategy.

Since in this way, it has been built-in with the client of VirtualLayoutManager, VirtualLayoutAdapter, it can be with Under the premise of can only bind a kind of this agreement of layout manager in accordance with Reyclerview, only a kind of layout pipe is bound for it Device (VirtualLayoutManager) is managed, only this layout manager is customized, supports flattening mixing cloth Office, then such layout structure just no longer with another agreement of Reyclerview (can only utilization and recycle layer 1 on unit) Conflict is generated, while realizing in Reyclerview the utilization and recycle of the mixed layout and single view of view.

In addition, in the application technical solution claimed, can also technology first be carried out to common layout container On extension, naturally it is also possible to technical extension first is carried out to Listview, ScrollView, these layout containers is made to become Reyclerview, then be further extended for Reyclerview, still it can reach the application according to same principle Purpose.The workload that non-Reyclerview containers are only transformed into Reyclerview is larger, not as good as directly using behaviour Make the packaged Reyclerview of system and realizes that this programme is convenient.

Below in conjunction with attached drawing, the technical solution that each embodiment of the application provides is described in detail.

Fig. 3 is a kind of layout method flow chart of view component provided by the embodiments of the present application, is included the following steps：

S301：Receive the attribute information of the target area for the user interface UI that layout container is sent.

The executive agent of this method can be client, can also be customized layout manager in client.It is described Layout container can be operating system provide packaged Reyclerview, can also be provided based on operating system it is each The Reyclerview that kind layout container is extended to.

In the embodiment of the present application, when user browses UI, when positive or reverse rolling UI, parts of the UI in screen ranges Component in region can rotate out screen ranges, and subregions of the UI outside screen ranges can be scrolled into screen ranges, this rolling It is exactly the target area to move into the partial blank region in screen ranges, is regarded at this time, it may be necessary to be laid out in the target area Figure component, so that user browses.

Wherein, it is described positive or it is described it is reverse refer to direction that user rolls UI, Reyclerview support user longitudinal or Laterally roll UI.Longitudinal direction refers to upper and lower directions, refers to laterally left and right directions.Forward direction can be up and down in either direction, Be inversely with just in the opposite direction.For convenience of description, be with the forward direction hereafter it is upward, it is described be inversely downwards for Explanation.

In the embodiment of the present application, the attribute information of the target area can be the size, described of the target area The information such as the position of target area can also be the mark of two view components of head and the tail to be laid out in the target area, wait for The information such as mark, the size of target area of the last one view component of layout, can also be the visual field of presently described UI The letters such as the mark of first view component in domain, the mark of the last one view component of visibility region, the size of visibility region Breath.In short, the attribute information of the target area is for determining first view component to be laid out in the target area Why not mark, the application are specifically limited the attribute information.

Specifically, can safeguard that the state of UI can be by the category when monitoring that UI is scrolled inside Reyclerview Property information is sent to client.And in view component layout method, common mode is exactly to distribute mark for each view in UI Know, the sequence of mark is exactly the sequence that corresponding view arranges successively in UI.

That is, the mark should have following two functions：First, a mark uniquely corresponds to a view； Second, there is mark succession, client can in the target area be arranged successively according to the sequence of mark each view.As it can be seen that The mark can be number or other labels with succession.

Fig. 4 a are the view mixed layouts of flattening provided by the embodiments of the present application.As shown in fig. 4 a, view is pre-defined The sequence of the mark of component is 1~12,17~18, is related to 3 layout areas, needs to execute layout flow shown in Fig. 3 three times. Wherein, 1~3 is linear placement, and 4~12 be grid layout, and 17~20 be that waterfall spreads office.In some cases, in order in UI Middle realization suspends, inhales the special placement logics such as side, it is also desirable to for the corresponding view component distribution of these special placement logics Mark.These special view components can't occupy target area, but overlap the corresponding view of common placement logic On component.In Fig. 4 a, 13~16 can be the mark distributed for special view component.Assuming that needing laying 4 outstanding in UI Floating view component, the mark 13~16 of this 4 view components, may indicate that the position of the view component of this four suspension types It sets, is to be laid out in corresponding region in grid, as shown in Figure 4 b.Assuming that being once laid out the mark of first view component described in flow It is 4 to know, and corresponding placement strategy is grid layout, then, it waits in the postposition work after this is laid out flow, it is also necessary to The view component of 13~16 corresponding suspension types is laid out.It will be further described hereinafter.

S302：According to the attribute information, the mark of first view component to be laid out in the target area is determined.

In the embodiment of the present application, the first view component be can be to be laid out first in the target area A view component can also be other view components to be laid out in the target area.When the attribute information of reception For when the mark of the second view component, client can be according to the mesh in the size of target area and the visibility region of the UI The mark for marking the size and second view component in region, determines the mark of the first view component.

Wherein, second view component can be the mark or last of first view component in the visibility region The mark of one view component, due to being arranged to each view component according to the sequence of mark, when UI is scrollled up When dynamic, only it is to be understood that the mark of the last one view component in visibility region, you can determine to be laid out the in target area The mark of one view component；When UI is scrolled down through, only it is to be understood that first view component in visibility region mark, i.e., It can determine the mark of first view component to be laid out in target area.As shown in Figure 5 a.Fig. 5 a are mesh after UI scrolls up Mark the schematic diagram in region.The first view component is identified as 26.

It is worth noting that when UI is scrolled down through, since the target area is gradually exposed from below, institute State first view component that first view component to be laid out in target area is actually exposed downwards.Client is in institute When stating layout view component in target area, be according to mark from big to small, inverted order carries out the layout of view component, such as Fig. 5 b Shown, Fig. 5 b are the schematic diagrames of target area after UI is scrolled down through.The first view component is identified as 13.

S303：According to the mapping relations between the mark and placement strategy of view component, determine and the first view group The corresponding placement strategy of mark of part.

In the embodiment of the present application, the placement strategy is the instantiation to placement logic.For example, it is assumed that be regarded to 3 Figure component carries out the layout of linear placement's logic, then the width of each view component, spacing in this 3 view components, with And this 3 view components inset spacing apart from linear layout areas on the whole, the outside of linear placement's region distance screen edge Away from etc. information be all layout parameter, be required for business side specified.The combination of layout parameter and placement logic is exactly specific layout Strategy.There are placement strategy, client that can specifically execute the layout of view.Even as it can be seen that being based on identical topology logic Two placement strategies, it is also possible to the layout parameter that includes is different.

In the embodiment of the present application, the mapping between the mark and placement strategy of view component can be preset in the client Relationship.Wherein, the mapping relations can include the one-to-one placement strategy of each view component, for example, sharing mark in UI 100 view components for 1~100 are known, then the mapping relations include just this 100 view component corresponding 100 A placement strategy, in this case, since a layout areas usually contains more than one view component, this 100 cloth In office's strategy, there is repetition more.The mapping relations can also include the corresponding placement strategy of each layout areas, it is known that cloth The mark of two view components of head and the tail in office region, so that it may which, to define the range of the layout areas, therefore, each placement strategy can With corresponding two marks, the two marks are the mark of first view component of the corresponding layout areas of the placement strategy respectively With the mark of the last one view component.

That is, can be in the initialization flow of client, reception initialization data, including the transmission of business side are each The corresponding mark range of placement logic, the corresponding layout parameter of each mark range；It is directed to each mark range, root again According to the corresponding placement logic of mark range and layout parameter, the corresponding placement strategy of mark range is determined, and establish the mark Know the mapping relations between the mark for the view component for including in range and the placement strategy.Wherein, the application is to described first The data structure of beginningization data is not especially limited.

It is possible to further being directed to each mark range, first mark in the mark range and the last one are determined Mark；The mapping relations between first mark and the placement strategy are established, and establish the last one described mark With the mapping relations between the placement strategy.

S304：According to the placement strategy, since the first view component, the layout view in the target area Component.

After determining the corresponding placement strategy of the first view component, since a placement strategy includes a kind of cloth Office's logic and layout parameter, client have also determined that the layout which kind of placement logic is carried out in next layout areas, with And how to implement this placement logic (according to layout parameter).

Layout parameter can include at least one of following information：Including the corresponding layout area of the placement strategy determined The number of view component in domain, the identifying of each view component, the width ratio of each view component (it is be defaulted as wide, can from Define width ratio), the spacing of each view component, each view component whole relative to layout areas inset spacing, layout area Outer back gauge etc. of the domain relative to screen edge.In short, realizing that the content of the layout parameter needed for different placement logics is also not With, as long as client can instantiate corresponding placement logic according to layout parameter.

For example, for grid placement logic, corresponding layout parameter should include following information：Often row view component Number, columns, often go in view component width ratio (be defaulted as wide, can be with self-defined width ratio), often go in regard Spacing, grid between figure component are whole relative to the inset spacing of layout areas, layout areas relative to the outer of screen edge Back gauge etc..

Again for example, for linear placement's logic, the space shared by a usual view component is exactly a line, therefore phase The layout parameter answered only needs to include following information：The width of each view component, the spacing of each view component, it is inset spacing, outer Back gauge etc..

It is worth noting that layout parameter does not include the height of each view component to be laid out.This is because same regard The height of figure component can change because of the difference of the business datum of its binding.For example, picture view component (imageview) is tied up Fixed business datum is exactly picture, and business root can change the imageview bindings of some mark often according to the needs of business Picture, larger picture can cause the height of the imageview larger, and smaller picture can lead to the height of the imageview It is smaller.

The business datum can be contained in the initialization data, when client executing initializes flow, according to On the one hand initialization data determines the mapping relations between the mark and placement strategy of view component, on the other hand determines view Component identifies the correspondence with business datum.

As it can be seen that in the embodiment of the present application, before being laid out each view component, it is required for first obtaining and is bundled with business datum Each view component, could measure obtain each view component height in this way, so according to the width of each view component, height and its His layout parameter puts each view component.

In the embodiment of the present application, before the layout for carrying out view component, it may be determined that first view component Type；When the layout container recycling view component in there are when the view component of the type, obtain the view of the type Component；When the view component of the type is not present in the view component of layout container recycling, newly-generated such is obtained The view component of type.This is the view component multiplexing function using RecyclerView, is repeated no more.

The height of view component often determines the size for the target area that layout areas expends in layout areas, waits for client The placement strategy determined according to this is held, the layout of all view components in the corresponding layout areas of the placement strategy is completed Afterwards, it can calculate whether target area is filled, if target area is not filled, this method stream next time will be triggered Journey, i.e. RecyclerView can be found there are still target area, can be laid out required target area next time to client transmission Attribute information.

It is of course also possible in this layout, the size of target area is not enough, i.e. the corresponding layout areas of placement strategy Size be more than target area, then after the view component of layout fills up target area, just stop executing layout operation, for use Family is continued after rolling UI, is laid out in flow next time, determines identical placement strategy, continues layout view component.

In the embodiment of the present application, can previous step be set before step S304, after being arranged after step S305 Set step.

Specifically, previous step is mainly used for cleaning up the background (background picture for rotating out the view component outside screen Or background color), to facilitate RecyclerView to carry out the recycling and multiplexing of view component.In the embodiment of the present application, due to The background picture or background color of each layout areas can be different, if therefore rotate out screen ranges view component background It is not cleaned, it is likely that the view component generated in other layout areas can not be multiplexed.

Postposition step can be worked as according to the mapping relations between the mark and placement strategy of view component, determine this cloth When the region that the view component of office is filled up is related to the placement strategy of specified type, according to the placement strategy of specified type, at this Layout view component on the region that the view component of layout is filled up.

The placement strategy of specified type is such as suspension placement logic, inhales the corresponding placement strategy of side placement logic, according to The view component of the placement strategy layout of this specified type, will not occupy target area, be superimposed upon and completed layout On the layout areas of each view component composition.As shown in Figure 4 b.Since the placement strategy of specified type will not consume target It is held after step S304 it is therefore intended that the corresponding view component of the placement strategy of type needs to work as postposition in region Row.

Specifically, when completing the layout of view component in the target area, for being filled with view component The target area needs to be laid out specified view component, according to the mark of the specified view component if further determining that Know, determines placement strategy corresponding with the mark, and according to the placement strategy, be laid out the specified view component, institute State the view component and at least one of the view component for inhaling side type that specified view component includes suspension type.

For example, the layout work of the view component of 13~16 corresponding 4 suspension types in Fig. 4 b is as net in figure The postposition work that lattice are laid out this corresponding layout flow is performed.That is, it is assumed that described first in this layout View component is identified as 4, then after having executed the layout of 4~12 corresponding view components, postposition work can also be performed, The view component of 13~16 corresponding suspension types is completed to be laid out.After the postposition work for finishing this layout flow, side It can start to be laid out flow next time, continue, according to another placement strategy, to be laid out since 17 corresponding view components.Together Reason repeats no more if the principle being laid out to the view component for inhaling side type is also the same.

In addition, in the embodiment of the present application, the placement strategy is not limited to the layout plan of the acquiescence of operating system offer Slightly, it can also include customized placement strategy, i.e., what self-defined placement logic and/or customized layout parameter formed makes by oneself The placement strategy of justice.In addition to placement logic (linear placement, grid layout, the waterfall of the RecyclerView three kinds of acquiescences that can be bound Cloth spreads office) outside, it can be with self-defined other placement logics, such as the layout that suspends, suction side layout, fixed position is laid out and it His customized placement logic, these can be realized by client code.If Fig. 6 is provided by the embodiments of the present application one The customized placement strategy schematic diagram of kind.The corresponding placement strategy of layout areas shown in fig. 6 is not belonging to linear placement, grid cloth Office, waterfall spreads any one of office, is a kind of customized layout.

Meanwhile in the layout method of existing view component, the grid that RecyclerView acquiescences are supported is laid out, is linear The corresponding layout parameter of placement logics such as layout also spacing between underaction, such as the width of each view component, view component All it is that acquiescence is identical.And in the embodiment of the present application, the spacing between the width of each view component, view component be can be with It is customized.

In addition, in the embodiment of the present application, scrolling up and down for UI not only may be implemented, can also realize the left and right roll of UI, For convenience of description, it is above to illustrate by taking the UI scrolled up and down as an example.For the UI of left and right roll, view is carried out The principle of the layout of component is also the same, is not repeated.

In addition, it is necessary to explanation, the embodiment of the present application not only can be based on android realize, be also based on iOS, The operating systems such as Windows are realized.In various operating systems, it is required for carrying out cloth to the view in UI using layout container Office, also all has that utilization and recycle view and mixed layout view are difficult to realize simultaneously.

By the layout method of view component shown in Fig. 3, the mark and layout plan of view component are set up in the client Mapping relations between slightly, client only need to be according to the mark of first view component in the target area for currently needing to be laid out Know, according to the mapping relations between the mark and placement strategy of view component, determines the mark pair of first view component The layout plan of layout areas belonging to the placement strategy answered, the placement strategy determined i.e. first view component Slightly.So that sequentially in each layout areas different placement logics (layout plan can be realized successively by being repeatedly laid out Slightly it is the instantiation of placement logic).By the embodiment of the present application, the layout structure of view component is able to flattening, client in UI The efficiency that end executes the layout of view is promoted.

Further, the mapping relations between the mark of view component and placement strategy are set up in the client, are laid out plan Slightly it is the instantiation to placement logic, a kind of placement logic can correspond to multiple specific placement strategies, each placement strategy difference The placement logic of realization can also be different.That is, being customized respectively accordingly for the different layout areas of UI in the client Placement strategy, rather than as the prior art, UI can only be layered in such a way that viewgroup is nested layer by layer, then Different placement logics is realized on each layer.Client in the embodiment of the present application only need to be according to the target for currently needing to be laid out The mark of first view component in region is determined according to the mapping relations between the mark and placement strategy of view component The corresponding placement strategy of mark of first view component, the placement strategy determined i.e. first sets of views The placement strategy of layout areas belonging to part.

So that can pressing the direction that UI is rolled by being repeatedly laid out, sequentially being realized successively in each layout areas Different placement logics.By the embodiment of the present application, the layout structure of view component is able to flattening in UI, when user rolls UI When, layout container can be granulated the view component that ground recycling rotates out screen ranges, improved as unit of single view component The multiplexing efficiency of view, saves memory.

Fig. 7 is the contrast schematic diagram of the mixed layout and multilayer mixed layout of flattening provided by the embodiments of the present application.Such as Shown in Fig. 7, the UI on the left side is the mixed layout for the flattening that the embodiment of the present application is realized, it can be seen that the layout of view in UI Structure is flattening, and the layout of the corresponding view of three layout areas realizes different layouts and patrols respectively from top to bottom in UI It collects (grid layout, linear placement, waterfall spread office), while RecyclerView can be returned using single view as object It receives, the view in these three regions can be re-used across layout areas.And the UI on the right is existing multilayer mixed layout, layer Linearly arranged viewgroup1, view1, viewgroup2 on 1, this results in RecyclerView individually not recycle and answer With the view in viewgroup1 and viewgroup2.

Fig. 8 is a kind of layout system schematic diagram of view component provided by the embodiments of the present application, including：

It is laid out adapter 801, layout manager 802, layout actuator 803；

The layout adapter 801, the layout manager 802 and layout container are bound, and the layout manager 802 is managed Manage multiple layout actuators 803；

The layout adapter 801 receives the initialization data that business side is sent, and is regarded according to initialization data determination Mapping relations between the mark and layout actuator of figure component；By the mapping between the mark of view component and layout actuator Relationship is sent to the layout manager 802；

The layout manager determines the mapping relations between the mark of view component and layout actuator；Receive layout The attribute information for the target area that container is sent is determined according to the attribute information to be laid out first in the target area The mark of a view component determines and described first according to the mapping relations between the mark of view component and layout actuator The corresponding layout actuator 803 of mark of a view component sends first view to the layout actuator 803 determined The mark of component；

The layout actuator 803, according to the corresponding strategy of mark of first view component, from described first View component starts, the layout view component in the target area.

It is worth noting that since the layout system of view component shown in Fig. 8 is based on the cloth of view component shown in Fig. 3 Therefore office's method to the above description of the layout method of view component shown in Fig. 3, is equally applicable to this system.

Fig. 9 is the Organization Chart of the layout system of existing view component, and Figure 10 is sets of views provided by the embodiments of the present application The Organization Chart of the layout system of part.As shown in Figure 9 and Figure 10, the layout system of view component shown in Fig. 10, actually by Fig. 9 Shown in layout adapter (Adaper), layout manager (LayoutManager) in layout system carried out it is technical Extension and upgrading, become VirtualLayoutAdaper, VirtualLayoutManager.VirtualLayoutManager Further have the multiple layout actuators (LayoutHelper) of management under one's command.Each layout actuator executes a kind of placement strategy.

The VirtualLayoutAdaper in addition to including according to the initialization data that business side specifies with Adaper Business datum generates outside the function of view component, the mark for the view component that can also include by the initialization data that business side specifies Know the mapping relations between layout actuator and is sent to VirtualLayoutManager so that it can according to mark and layout Mapping relations determination between actuator is laid out the LayoutHelper being related to every time.

Specifically, the function of VirtualLayoutAdaper has following two aspects：Match first, being provided to business side Interface is set, when business side initializes system, the initialization data of business side's input is received, on the one hand obtains initialization Business datum (the address for the content that the view component respectively identified is bound respectively, such as picture address, literal address that data include Deng), on the other hand the mapping relations between the mark and layout actuator of the view component that initialization data includes are sent to VirtualLayoutManager；Second, carrying out view component when some LayoutHelper executes its responsible placement strategy Layout when, LayoutHelper can to VirtualLayoutManager acquisition requests some identify view component, In turn to the view component of the RecyclerView acquisition requests mark, RecyclerView is looked into VirtualLayoutManager Whether in recovery pond have reusable view component, if so, just giving reusable view component if seeing VirtualLayoutAdaper, if not provided, just generating a new view component gives VirtualLayoutAdaper, For VirtualLayoutAdaper according to the mark of the view component received, the view component to receive binds corresponding industry Business data, are sent to VirtualLayoutManager, then regarded this by VirtualLayoutManager by the view component Figure component is sent to corresponding LayoutHelper.

VirtualLayoutAdaper is also built-in, and there are two interface functions：getLayoutHelper()、 SetLayoutHelper (), the concrete function of the two interface functions are actually to give VirtualLayoutManager It realizes.The mark and layout that getLayoutHelper () is used to that business side to be facilitated to update view component by the interface function Mapping relations between actuator.SetLayoutHelper () is used for when business side initializes this system, setting View component mark layout actuator between mapping relations, that is, setting business side client needs be laid out it is each The corresponding LayoutHelper of mark of view component.

Why the two interface functions are built in VirtualLayoutAdaper, are because being had only in this system VirtualLayoutAdaper is exposed to business side, and unified API is provided for business side.Regardless of being to return to one Each LayoutHelper is still arranged in LayoutHelper, is required for being executed by VirtualLayoutManager, thus by this Two interface functions specifically transfer to VirtualLayoutManager to execute.

The VirtualLayoutManager can also manage a locator (LayoutHelperFinder), described There are two functions for locator：First, targets of the VirtualLayoutManager in the UI for receiving RecyclerView transmissions , can be according to the mark of first view component in the target area that the attribute information is determined when the attribute information in region, it will The mark is sent to LayoutHelperFinder, and the mapping between its mark and layout actuator according to view component is made to close System, determines corresponding LayoutHelper；Second, view component mark layout actuator between mapping relations be by What LayoutHelperFinder held.When business side initializes this system, as previously mentioned, VirtualLayoutManager can receive the mapping relations between the mark of view component and layout actuator, by it into one Step is sent to LayoutHelperFinder, is given birth to by the mapping relations between its mark and layout actuator according to view component It is convenient to realize function for the moment at a LayoutHelper index, it is fixed as soon as possible by way of binary chop or other lookups The corresponding LayoutHelper in position.

Here it is emphasized that business side inputs to the sets of views that the initialization data of this system includes in initialization Which kind of data structure is mapping relations between the mark and layout actuator of part be specifically, and the application is without limitation.It can To be the data structures such as list, queue, tree-like, as long as the mark of the client that business side can the be expressed each view component to be laid out Know, the mark of each view component corresponds to LayoutHelper.Each LayoutHelper is responsible for holding a layout areas One placement strategy of row, the attribute of each LayoutHelper are exactly that the placement strategies that execute of the LayoutHelper (patrol by layout Volume and layout parameter).

The VirtualLayoutManager is customized LayoutManager, with LinearLayoutManager, GridLayoutManager, StaggeredLayoutManager are belonged to The subclass of LayoutManager.Therefore, in accordance with the agreement of RecyclerView, VirtualLayoutManager also can only be right Answer a kind of placement logic.In the present solution, the corresponding placement logics of VirtualLayoutManager can be linear placement.And Each LayoutHelper that VirtualLayoutManager has under one's command can be considered as in linear placement corresponding per a line LayoutHelper.In fact, as shown in fig. 7, the core concept of this programme, be exactly by existing scheme on the front ends UI per a line The function of nested viewgroup is transplanted in the rear ends UI on corresponding each LayoutHelper, to realize the flat of the front ends UI Graduation.

The LayoutHelper specifically executes the layout of view component in the target area.Primary layout flow pair A LayoutHelper is answered, a placement strategy is executed, LayoutHelper can execute its cloth being responsible for as much as possible Office region.When layout areas is less than target area, still there is residue in target area, will trigger and be laid out next time, then again really The fixed same LayoutHelper is laid out next time to execute；When layout areas is more than target area, LayoutHelper is Make to be not carried out its entire layout areas being responsible for, the execution that also terminate this layout has when user rolls UI again New target area, then start to be laid out flow next time, determine that the same LayoutHelper is laid out next time to execute；Work as cloth When the target area is just filled up in region by office, this layout flow terminates.

There are a series of interface functions inside LayoutHelper, including：IsOutOfRange (), for identification described first The mark of view component is the mark of the view component in oneself responsible layout areas；SetRange (), setting should Layout areas (mark of the mark and the last one view component of first view component) responsible LayoutHelper； BeforeLayout (), is responsible for preposition work, that is, the mark for rotating out the view component of screen ranges is corresponding BeforeLayout () in LayoutHelper will clear up view component binding business datum, it is convenient then other LayoutHelper is multiplexed the view component；DoLayout () carries out the layout of view component according to corresponding placement strategy； AfterLayout () is responsible for postposition work, i.e., on the layout areas for currently having filled up view component, to suspension class Type, the view component for inhaling the specific types such as side type are laid out, and suspension type inhales the view component of side type and is not take up mesh Region is marked, the view component of suspension type can be suspended on other view components, and inhaling the view component of border region can inhale It is attached on screen edge.

In addition, there is the function MarginLayout () for being responsible for the calculating such as inset spacing, outer back gauge, and it is responsible for layout area Fill the function BaseLayout () of background colour, background picture in domain.For both functions, it is worth noting that, can be every Both all built-in functions of a LayoutHelper, can also specially be arranged two special LayoutHelper, only use respectively It is calculated in responsible inset spacing, outer back gauge etc. and fills background for layout areas.It is special when the two are specially arranged When LayoutHelper, the two special LayoutHelper (MarginLayoutHelper and BaseLayoutHelper) Placement strategy can't be corresponded to, each placement strategy is corresponding (except suspension placement strategy, suction side placement strategy) LayoutHelper is when executing work, LayoutHelper that the two can be called special.Furthermore it is also possible to by both spies Different LayoutHelper is defined as base class so that inherits the two base class corresponding to the LayoutHelper subclasses of placement strategy.

In each LayoutHelper in this system, in addition to including the placement logic for realizing operating system acquiescence offer LayoutHelper, also includes the LayoutHelper for realizing other placement logics, self-defined placement logic, and the layout that such as suspends is held Row device FloatLayoutHelper, fixed layout actuator FixedLayoutHelper, side layout actuator is inhaled StickyLayoutHelper, also some self-defined layout actuators, if OnePlusNLayoutHelper is (in layout areas One, left side component, the two or more components being arranged above and below in the right).

Wherein, suspension placement logic is that view component is suspended in above layout areas, and can be pulled, and is not rolled with UI； Fixed placement logic is that view component is fixed on some position in layout areas, can not pull, not rolled with UI；Inhale side layout Logic be view component in screen ranges when, with UI roll and roll, when screen ranges will be rotated out, screen can be drawn onto Top or bottom, show it is a kind of inhale side effect.

It is worth noting that the layout system of view component shown in Fig. 10 can be packaged, API is provided to business side, Technical extension is further done to this system convenient for business side.

Figure 11 is that the layout system of view component provided by the embodiments of the present application executes the flow chart of layout, including following step Suddenly：

S1101：RecyclerView monitors that user rolls UI.

S1102：RecyclerView calculates the target area of UI.

S1103：RecyclerView sends the attribute information of the target area to layout manager device.

S1104：Layout manager traverses all layout actuators, determines the layout actuator for needing to execute preposition work.

S1105：The layout actuator for executing preposition work is needed to execute preposition work.

S1106：Layout manager determines the mark of first view component.

S1107：The mark of first view component is sent to locator by layout manager.

S1108：Locator determines the corresponding layout actuator of the mark of first view component.

S1109：The corresponding layout actuator of mark of first view component starts to execute layout.

S1110：The layout actuator is by layout manager, to RecyclerView acquisition request view components.

S1111：RecyclerView judges whether there is reusable view component, if so, by reusable sets of views Part is sent to layout adapter, and otherwise, instruction layout adapter generates a view component.

S1112：It is laid out adapter and sends the view component after binding business datum.

S1113：The view component received is sent to the layout actuator by layout manager.

S1114：Layout actuator layout view component in the target area

S1115：Layout manager traverses all layout actuators, determines the layout actuator for needing to execute postposition work.

S1116：The layout actuator for executing postposition work is needed to execute postposition work.

S1117：Layout manager completes how many target area consumed to RecyclerView feedback topologies.

S1118：If there are still target area, RecyclerView executes step S1102 again, opens next round layout Flow.

As shown in figure 11, RecyclerView is the layout container that operating system provides, layout adapter, layout management Device, locator, layout actuator are all the component parts of the layout system for the view component that this programme provides.Layout is adapted to The function that device, layout manager, locator, layout actuator are realized respectively illustrates, reference can be made to layout shown in Fig. 3 The explanation of method, repeats no more.

Figure 12 is a kind of layout method flow chart of view component provided by the embodiments of the present application, including：

S1201：Layout manager receives the attribute information of the target area for the user interface UI that layout container is sent.

S1202：According to the attribute information, the mark of first view component to be laid out in the target area is determined, The first view component is first view component in the target area.

S1203：According to the mapping relations between the mark of view component and layout actuator, determine and the first view The corresponding layout actuator of mark of component, and the mark of the first view component is sent to the layout determined and is executed Device, so that the layout actuator is since the first view component, the layout view component in the target area.

Figure 13 is a kind of layout method flow chart of view component provided by the embodiments of the present application, including：

S1301：It is laid out actuator and receives first view component to be laid out in the target area that layout manager is sent Mark；

S1302：According to the corresponding placement strategy of mark of the first view component, opened from first view component Begin, the layout view component in the target area.

The layout strick precaution of the view component of the layout method of view component shown in Figure 12, Figure 13 as shown in figure 3 is to be based on The technical solution of same inventive concept repeats no more reference can be made to being described above.

Based on the layout method of view component shown in Fig. 3, the also corresponding cloth for providing view component of the embodiment of the present application Exchange device, as shown in figure 14, including：

Receiving module 1401 receives the attribute information of the target area for the user interface UI that layout container is sent；

First determining module 1402 determines first view to be laid out in the target area according to the attribute information The mark of component；

Second determining module 1403, according to the mapping relations between the mark and placement strategy of view component, determining and institute State the corresponding placement strategy of mark of first view component；

Layout modules 1404, according to the placement strategy, since the first view component, in the target area Layout view component.

The receiving module 1401 receives in the size of target area and the visibility region of the UI that layout container is sent The mark of second view component；According to the attribute information, first view component to be laid out in the target area is determined Mark, specifically includes：According to the mark of the size of the target area and second view component, the first view is determined The mark of component.

First determining module 1402, if the last one in the visibility region that second view component is the UI View component, then when monitoring the UI roll forwards, by the next mark adjacent with the mark of second view component Know, is determined as the mark of the first view component.

First determining module 1402, if first in the visibility region that second view component is the UI regards Figure component identifies upper one adjacent with the mark of second view component then when monitoring the UI reverse rollings, It is determined as the mark of the first view component.

Mapping relations between the mark and placement strategy of view component, determine in the following manner：

Determine the corresponding mark range of each placement logic, and the corresponding layout parameter of each mark range；

The mark model is determined according to the corresponding placement logic of mark range and layout parameter for each mark range Corresponding placement strategy is enclosed, and establishes reflecting between the mark for the view component for including in the mark range and the placement strategy Penetrate relationship.

The mapping relations between the mark for the view component for including in the mark range and the placement strategy are established, specifically Including：For each mark range, first mark and the last one mark in the mark range are determined；Establish described first Mapping relations between a mark and the placement strategy, and establish between the last one described mark and the placement strategy Mapping relations.

The layout modules 1404 determine width and the survey of each view component to be laid out according to the placement strategy Measure the height of each view component；According to the placement strategy and the width of each view component to be laid out, height, from described first A view component starts, by mark sequence in the target area layout view component.

Described device further includes：Trigger module 1405, when the unfilled target area of the view component of layout, triggering The layout of next view component.

Described device further includes：Acquisition module 1406 determines described the before the layout modules 1404 execute layout The type of one view component；When there are when the view component of the type, being obtained in the view component of layout container recycling The view component of the type；When the view component of the type is not present in the view component of layout container recycling, Obtain the view component of the newly-generated type.

Described device further includes：Postposition module 1407 is right when completing the layout of view component in the target area In being filled with the target area of view component, need to be laid out specified view component if further determining that, according to The mark of specified view component, determines corresponding with mark placement strategy, and according to the placement strategy, described in layout Specified view component, the specified view component include the view component of suspension type and inhale in the view component of side type At least one.

Based on the layout method of view component shown in Figure 12, the also corresponding cloth for providing view component of the embodiment of the present application Exchange device, as shown in figure 15, including：

Receiving module 1501 receives the attribute information of the target area for the user interface UI that layout container is sent；

First determining module 1502 determines first view to be laid out in the target area according to the attribute information The mark of component；

Second determining module 1503, according to view component mark layout actuator between mapping relations, determine with The corresponding layout actuator of mark of the first view component, and the mark of the first view component is sent to and is determined Layout actuator so that the layout actuator since the first view component, is laid out in the target area and regards Figure component.

Based on the layout method of view component shown in Figure 13, the also corresponding cloth for providing view component of the embodiment of the present application Exchange device, as shown in figure 16, including：

Receiving module 1601 receives the mark of first view component to be laid out in the target area that layout manager is sent Know；

Layout modules 1602 are regarded according to the corresponding placement strategy of mark of the first view component from described first Figure component starts, the layout view component in the target area.

It should be understood by those skilled in the art that, the embodiment of the present invention can be provided as method, system or computer program Product.Therefore, complete hardware embodiment, complete software embodiment or reality combining software and hardware aspects can be used in the present invention Apply the form of example.Moreover, the present invention can be used in one or more wherein include computer usable program code computer The computer program production implemented in usable storage medium (including but not limited to magnetic disk storage, CD-ROM, optical memory etc.) The form of product.

The present invention be with reference to according to the method for the embodiment of the present invention, the flow of equipment (system) and computer program product Figure and/or block diagram describe.It should be understood that can be realized by computer program instructions every first-class in flowchart and/or the block diagram The combination of flow and/or box in journey and/or box and flowchart and/or the block diagram.These computer programs can be provided Instruct the processor of all-purpose computer, special purpose computer, Embedded Processor or other programmable data processing devices to produce A raw machine so that the instruction executed by computer or the processor of other programmable data processing devices is generated for real The device for the function of being specified in present one flow of flow chart or one box of multiple flows and/or block diagram or multiple boxes.

These computer program instructions, which may also be stored in, can guide computer or other programmable data processing devices with spy Determine in the computer-readable memory that mode works so that instruction generation stored in the computer readable memory includes referring to Enable the manufacture of device, the command device realize in one flow of flow chart or multiple flows and/or one box of block diagram or The function of being specified in multiple boxes.

These computer program instructions also can be loaded onto a computer or other programmable data processing device so that count Series of operation steps are executed on calculation machine or other programmable devices to generate computer implemented processing, in computer or The instruction executed on other programmable devices is provided for realizing in one flow of flow chart or multiple flows and/or block diagram one The step of function of being specified in a box or multiple boxes.

In a typical configuration, computing device includes one or more processors (CPU), input/output interface, net Network interface and memory.

Memory may include computer-readable medium in volatile memory, random access memory (RAM) and/or The forms such as Nonvolatile memory, such as read-only memory (ROM) or flash memory (flash RAM).Memory is computer-readable medium Example.

Computer-readable medium includes permanent and non-permanent, removable and non-removable media can be by any method Or technology realizes information storage.Information can be computer-readable instruction, data structure, the module of program or other data. The example of the storage medium of computer includes, but are not limited to phase transition internal memory (PRAM), static RAM (SRAM), moves State random access memory (DRAM), other kinds of random access memory (RAM), read-only memory (ROM), electric erasable Programmable read only memory (EEPROM), fast flash memory bank or other memory techniques, read-only disc read only memory (CD-ROM) (CD-ROM), Digital versatile disc (DVD) or other optical storages, magnetic tape cassette, tape magnetic disk storage or other magnetic storage apparatus Or any other non-transmission medium, it can be used for storage and can be accessed by a computing device information.As defined in this article, it calculates Machine readable medium does not include temporary computer readable media (transitory media), such as data-signal and carrier wave of modulation.

It should also be noted that, the terms "include", "comprise" or its any other variant are intended to nonexcludability Including so that process, method, commodity or equipment including a series of elements include not only those elements, but also wrap Include other elements that are not explicitly listed, or further include for this process, method, commodity or equipment intrinsic want Element.In the absence of more restrictions, the element limited by sentence "including a ...", it is not excluded that wanted including described There is also other identical elements in the process of element, method, commodity or equipment.

The application can describe in the general context of computer-executable instructions executed by a computer, such as program Module.Usually, program module includes routines performing specific tasks or implementing specific abstract data types, program, object, group Part, data structure etc..The application can also be put into practice in a distributed computing environment, in these distributed computing environments, by Task is executed by the connected remote processing devices of communication network.In a distributed computing environment, program module can be with In the local and remote computer storage media including storage device.

Each embodiment in this specification is described in a progressive manner, identical similar portion between each embodiment Point just to refer each other, and each embodiment focuses on the differences from other embodiments.Especially for system reality For applying example, since it is substantially similar to the method embodiment, so description is fairly simple, related place is referring to embodiment of the method Part explanation.

Above is only an example of the present application, it is not intended to limit this application.For those skilled in the art For, the application can have various modifications and variations.It is all within spirit herein and principle made by any modification, equivalent Replace, improve etc., it should be included within the scope of claims hereof.

Claims

1. a kind of layout method of view component, which is characterized in that including：

According to the mapping relations between the mark and placement strategy of view component, the mark pair with the first view component is determined The placement strategy answered；

2. according to the method described in claim 1, it is characterized in that, receiving target area in the user interface UI that layout container is sent The attribute information in domain, specifically includes：

Receive the mark of the second view component in the size of target area and the visibility region of the UI that layout container is sent；

According to the attribute information, determines the mark of first view component to be laid out in the target area, specifically include：

According to the mark of the size of the target area and second view component, the mark of the first view component is determined Know.

3. according to the method described in claim 2, it is characterized in that, according to the size of the target area and second view The mark of component determines the mark of the first view component, specifically includes：

If the last one view component in the visibility region that second view component is the UI, when monitoring the UI When roll forward, by the next mark adjacent with the mark of second view component, it is determined as the first view component Mark.

4. according to the method described in claim 2, it is characterized in that, according to the size of the target area and second view The mark of component determines the mark of the first view component, specifically includes：

If first view component in the visibility region that second view component is the UI, when monitoring that the UI is inverse To when rolling, by a upper mark adjacent with the mark of second view component, it is determined as the first view component Mark.

5. according to the method described in claim 1, it is characterized in that, the mapping between the mark and placement strategy of view component is closed System, determines in the following manner：

The mark range pair is determined according to the corresponding placement logic of mark range and layout parameter for each mark range The placement strategy answered, and the mapping established between the mark for the view component for including in the mark range and the placement strategy is closed System.

6. according to the method described in claim 5, it is characterized in that, establishing the mark for the view component for including in the mark range Mapping relations between the placement strategy, specifically include：

For each mark range, first mark and the last one mark in the mark range are determined；

Establish the mapping relations between first mark and the placement strategy, and establish the last one described mark with Mapping relations between the placement strategy.

7. according to the method described in claim 1, it is characterized in that, according to the placement strategy, from the first view component Start, layout view component, specifically includes in the target area：

According to the placement strategy, determines the width of each view component to be laid out and measure the height of each view component；

According to the placement strategy and the width of each view component to be laid out, height, since first view component, By mark sequence in the target area layout view component.

8. the method according to the description of claim 7 is characterized in that the method further includes：

When the unfilled target area of the view component of layout, the layout of next view component is triggered.

9. according to the method described in claim 1, it is characterized in that, being obtained before layout view component in the target area The first view component is taken, including：

Determine the type of the first view component；

When the layout container recycling view component in there are when the view component of the type, obtain the view of the type Component；

When the view component of the type is not present in the view component of layout container recycling, obtain newly-generated described The view component of type.

10. according to claim 1~9 any one of them method, which is characterized in that the method further includes：

When completing the layout of view component in the target area, for being filled with the target area of view component, Need to be laid out specified view component if further determining that, according to the mark of the specified view component, determine with it is described Corresponding placement strategy is identified, and according to the placement strategy, is laid out the specified view component, the specified sets of views Part includes the view component of suspension type and inhales at least one of the view component of side type.

11. a kind of layout method of view component, which is characterized in that including：

According to the mapping relations between the mark of view component and layout actuator, the mark with the first view component is determined Corresponding layout actuator, and the mark of the first view component is sent to the layout actuator determined, so that described Actuator is laid out since the first view component, the layout view component in the target area.

12. a kind of layout method of view component, which is characterized in that including：

According to the corresponding placement strategy of mark of the first view component, since first view component, described Layout view component in target area.

13. a kind of layout system of view component, which is characterized in that including：

It is laid out adapter, layout manager, layout actuator；

The layout adapter, the layout manager and layout container are bound, and the layout manager manages multiple cloth Office's actuator；

The layout adapter receives the initialization data that business side is sent, view component is determined according to the initialization data Mark layout actuator between mapping relations；Mapping relations between the mark of view component and layout actuator are sent out Give the layout manager；

The layout manager determines the mapping relations between the mark of view component and layout actuator；Receive layout container The attribute information of the target area of transmission determines that be laid out in the target area first regards according to the attribute information The mark of figure component, according to the mapping relations between the mark of view component and layout actuator, determination is regarded with described first The corresponding layout actuator of mark of figure component sends the mark of first view component to the layout actuator determined Know；

The layout actuator, according to the corresponding strategy of mark of first view component, from first sets of views Part starts, the layout view component in the target area.

14. system according to claim 13, which is characterized in that the layout adapter receives the packet that business side is sent The initialization data of mapping relations between mark and the layout actuator containing view component.

15. the system according to claim 13 or 14, which is characterized in that the layout adapter receives business side and sends The initialization data for including business datum, view component is generated according to the business datum, the view component of generation is sent To the layout manager；

The layout manager receives the view component, and the view component is sent to first view component Identify corresponding layout actuator.

16. a kind of placement device of view component, which is characterized in that including：

First determining module determines the mark of first view component to be laid out in the target area according to the attribute information Know；

Second determining module, according to the mapping relations between the mark and placement strategy of view component, determination is regarded with described first The corresponding placement strategy of mark of figure component；

Layout modules, according to the placement strategy, since the first view component, the layout view in the target area Component.

17. device according to claim 16, which is characterized in that the receiving module receives the mesh that layout container is sent Mark the mark of the second view component in the size in region and the visibility region of the UI；According to the attribute information, determine described in The mark of first view component to be laid out, specifically includes in target area：According to the size of the target area and described The mark of two view components determines the mark of the first view component.

18. device according to claim 17, which is characterized in that first determining module, if second sets of views Part be the UI visibility region in the last one view component, then when monitoring the UI roll forwards, will with it is described Second view component identifies adjacent next mark, is determined as the mark of the first view component.

19. device according to claim 17, which is characterized in that first determining module, if second sets of views Part is first view component in the visibility region of the UI, then, will be with described the when monitoring the UI reverse rollings Upper one that the mark of two view components is adjacent identifies, and is determined as the mark of the first view component.

20. device according to claim 16, which is characterized in that the mapping between the mark and placement strategy of view component Relationship determines in the following manner：

21. device according to claim 20, which is characterized in that establish the mark for the view component for including in the mark range Know the mapping relations between the placement strategy, specifically includes：

22. device according to claim 16, which is characterized in that the layout modules are determined according to the placement strategy The width of each view component to be laid out and the height for measuring each view component；According to the placement strategy and to be laid out each The width of view component, height are laid out in the target area by mark sequence and are regarded since first view component Figure component.

23. device according to claim 22, which is characterized in that described device further includes：Trigger module, when regarding for layout When the unfilled target area of figure component, the layout of next view component is triggered.

24. device according to claim 16, which is characterized in that described device further includes：Acquisition module, in the layout Before module executes layout, the type of the first view component is determined；It is deposited when in the view component of layout container recycling In the view component of the type, the view component of the type is obtained；When in the view component of layout container recycling There is no when the view component of the type, the view component of the newly-generated type is obtained.

25. according to claim 16~24 any one of them device, which is characterized in that described device further includes：Postposition module, When completing the layout of view component in the target area, for being filled with the target area of view component, if into One step, which determines, to be needed to be laid out specified view component, then according to the mark of the specified view component, is determined and the mark Corresponding placement strategy, and according to the placement strategy, it is laid out the specified view component, the specified view component packet At least one of the view component of view component and suction side type containing suspension type.

26. a kind of placement device of view component, which is characterized in that including：

Second determining module determines and described first according to the mapping relations between the mark of view component and layout actuator The corresponding layout actuator of mark of view component, and the mark of the first view component is sent to the layout determined and is held Row device, so that the layout actuator is since the first view component, the layout view component in the target area.

27. a kind of placement device of view component, which is characterized in that including：

Layout modules are opened according to the corresponding placement strategy of mark of the first view component from first view component Begin, the layout view component in the target area.