mirror of https://github.com/kivy/kivy.git
74 lines
2.1 KiB
ReStructuredText
74 lines
2.1 KiB
ReStructuredText
Layouts
|
|
--------
|
|
|
|
.. container:: title
|
|
|
|
Arranging Your Widgets
|
|
|
|
Layouts are used to arrange widgets in a perticular manner. ::
|
|
|
|
AnchorLayout: widgets can be anchored to 'top', 'bottom', 'left', 'right'
|
|
BoxLayout: widgets arranged in a box either in 'vertical' or 'horizontal' orientation
|
|
FloatLayout: Widgets are essentially unrestricted
|
|
GridLayout: widgets arranged in grids of rows and columns defined by ``rows`` and ``cols`` properties
|
|
StackLayout: widgets are stacked in ``lr-tp`` (left to right then top to bottom) or ``tp-lr``
|
|
|
|
**Size_hint**: defines the size of a widget in parent space in percentages, values restricted to range 0 - 1 i.e. 0.01 = 1% and 1. = 100%.
|
|
|
|
Eg. ::
|
|
|
|
widget.size_hint_x = .5
|
|
|
|
sets the width of the widget to 50% of free space in parent.
|
|
|
|
Consider widgets w1, w2, w3
|
|
|
|
w1.size_hint_x = 1, w2.size_hint_x = 1, w3.size_hint_x = 1 ::
|
|
|
|
[(111111111111)]<-parent width = 12
|
|
w1
|
|
width: 12
|
|
|
|
[(1111)(1111)(1111)]<-parent width = 12
|
|
w1 w2 w3
|
|
width: 4 4 4
|
|
|
|
w2.size_hint_x = .5 ::
|
|
|
|
[(11111)(11)(11111)]<-parent width: 12
|
|
w1 w2 w3
|
|
width: 5 2 5
|
|
|
|
w2.size_hint_x = 2 ::
|
|
|
|
[(11)(11111111)(11)]<-parent width: 12
|
|
w1 w2 w3
|
|
width: 2 8 2
|
|
|
|
The above notation doesn't work on float layouts. There widgets size when set using size_hint is not dependent on it's sibblings sizes.
|
|
|
|
size_hint_x or size_hint_y is used to calculate widget's size only if the value/s are not set to None.
|
|
|
|
|
|
Layout illustrations:
|
|
|
|
.. image:: ../images/anchorlayout.gif
|
|
:alt: AnchorLayout illustration
|
|
:class: gs-layoutimage
|
|
|
|
.. image:: ../images/boxlayout.gif
|
|
:alt: AnchorLayout illustration
|
|
:class: gs-layoutimage
|
|
|
|
.. image:: ../images/floatlayout.gif
|
|
:alt: AnchorLayout illustration
|
|
:class: gs-layoutimage
|
|
|
|
.. image:: ../images/gridlayout.gif
|
|
:alt: AnchorLayout illustration
|
|
:class: gs-layoutimage
|
|
|
|
.. image:: ../images/stacklayout.gif
|
|
:alt: AnchorLayout illustration
|
|
:class: gs-layoutimage
|