Nested Layouts

[Matthias Georgi]

Yesterday I stumbled across some difficulties in using nested layouts.

I was going to implement a Gridlayout inside another Gridlayout.
Inside the nested layout I put a button and a slider in vertical
direction. The outer layout should arrange things in horizontal
direction.

What happened was, that the inner layout ended up much too big, so one
of the layout widgets calculated the size much bigger than expected.

Is the GridLayout supposed to change the size of its children? If yes,
how can I prevent this?

I ended up coding my own layout algorithm using a percentage value for
each child. Is it possible to do this with grid or boxlayout?

[Thomas Hansen]

You can use 'size_hint' on every widget.

I find it usefull to set background colors on the layouts themselves
when doing nested layouts, so i can see how things are being layed
out. you can do this by for example setting the layout's style={
'draw-background': 1, 'bg-color': (1.0, 0.0, 0.0, 0.5) } and then use
different colors for each of the layouts.

A layout will check every child widgets size_hint to determine how to
size its child widgets. A size_hint of (1,1) means use as much space
as possible in x and y. Normal widgets have a default size hint of
(None, None) which means that when they are in the layout the layout
will not try to resize them but instead use the fixed size. Layout
Widgets have a default size_hint of (1,1), which means they will
expand if they are inside another Layout. If you have a layout inside
another layout and want the inner one to be of a certain size, you
must set its size_hint to (None, None).

Its not directly percentage based, but more of a ratio. So for
example if you put 4 widgets in a BoxLayout with size hints (1,1),
they will all be .25 the width and height of the parent layout. If
one only one of them is set to (1,1), and the others are set to
(.5,.5) it will still distribute the weights evenly. So in the case
you have 4 widgtes, the total hints for x and y add up to 2.5. the
widget with size_hint (1,1) will get (1/2.5, 1/2.5) of the parents
size, and the three other ones will get 0.5/2.5 which ends up being
0.4 and 0.2 for the other ones. No need to keep the hint within 0 to
1, you could just as well have set the size_hint's to (2,2), and (1,1)
respectively for teh same result. Or 4 and 2.

The whole thing can look a little weird at first, but its actually a
very flexible way to specify the layout when you get used to it. It
helps to just play around with it for a little bit and see what you
get with different size hints. You can get started by looking at
'examples/framework/ui_widgets_layout.py'

Hope this helps.

--
Thomas

> --
> You received this message because you are subscribed to the Google Groups "pymt-dev" group.
> To post to this group, send email to pymt...@googlegroups.com.
> To unsubscribe from this group, send email to pymt-dev+u...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/pymt-dev?hl=en.
>
>

[Matthias Georgi]

Great! Thank you very much for the excellent description!

I read the source code of the layout managers, but didnt understand
the meaning of size_hint exactly. Now everything makes sense!

One more thing: what is the difference between Boxlayout and
Gridlayout with just one column or one row?

[Thomas Hansen]

A grid layout with with just one or two rows will behave just like a
BoxLayout. However doing e.g. a vertical BoxLayout with a bunch of
horizontal Boxlayouts will not do the same as a Grid layout will not
give you the same result, because the inner Boxlayouts will not be
aware of the column/row sizes of its sibling layouts. A gird layout
will align both column and row psoitions for the widgets inside it

--
Thomas