CODEWITHSUNDEEP
pythonuser-interfacekivy
driftking9987
driftking9987

Reputation: 1713

KIVY : BoxLayout containing horizontal BoxLayout

Am trying to have 4 Horizontal box layout stacked in a BoxLayout in a vertical way.

Rough Sketch

My KV file :

<HBoxWidget>:
    BoxLayout:
        size: root.size
        pos: root.pos
        id: boxlayout_h
        orientation: 'horizontal'
        Image:
            source: '/Users/driftking9987/Desktop/fp.gif'
<VBoxWidget1>:
    BoxLayout:
        spacing: 10
        orientation: "horizontal"
        size: [1,.25]
        pos: root.pos
        Label:
            text: "Status : "
            color: [0,84,80,19]
        Label:
            text: "Pending"
            color: [0,84,80,19]
        Widget:


<ContainerBox>:
    orientation: 'horizontal'
    HBoxWidget:
    VBoxWidget1:

I planned to have multiple VBoxWidget in a vertical way but it's just not working out.

Moreover to achieve the [9] Label, I thought I will have a BoxLayout with 2 rows, in horizontal, 2nd row will have the above mentioned properties. But this is just not working out. Below is what am getting. I tried setting the size_hint as 1,.25 i.e the whole area will be divided into 4 parts but it's not giving the desired result.

PY File :

from kivy.app import App
from kivy.uix.togglebutton import ToggleButton
from kivy.uix.widget import Widget
from kivy.uix.boxlayout import BoxLayout

class HBoxWidget(Widget):
    def __init__(self, **kwargs):
        super(HBoxWidget, self).__init__(**kwargs)

class VBoxWidget1(Widget):
    def __init__(self, **kwargs):
        super(VBoxWidget1, self).__init__(**kwargs)


class ContainerBox(BoxLayout):
    def __init__(self, **kwargs):
        super(ContainerBox, self).__init__(**kwargs)

class TestApp(App):
    def build(self):
        return ContainerBox() 

if __name__ == '__main__':
    TestApp().run()

Upvotes: 1

Views: 3050

Answers (1)

Martin
Martin

Reputation: 3385

What about this: I changed HBOX and VBOX widget to BoxLayout and added Label and another BoxLayouts to ContainerBox. It looks quite like on your drawing

enter image description here

<HBoxWidget>:

    AnchorLayout:
        anchor_x: 'center'
        anchor_y: 'center'
        Image:
            source: 'duck.jpg'
<VBoxWidget1>:
    BoxLayout:
        orientation: "horizontal"
        size: [1,.25]
        pos: root.pos
        Label:
            text: "Status : "
            color: [0,84,80,19]
        Label:
            text: "Pending"
            color: [0,84,80,19]
        Widget: # Because of this widget Labels are not in the middle, its not on your drawing tough


<ContainerBox>:
    orientation: 'vertical'
    Label:
        text: 'Label'
        size_hint_y: 0.1
    BoxLayout:
        id: four_horizontals
        orientation: 'horizontal'
        HBoxWidget:
        BoxLayout:
            orientation:'vertical'
            # One solution
            #GridLayout:
            #    cols:1
            #    padding: 100
            #    VBoxWidget1:
            #    VBoxWidget1:
            #    VBoxWidget1:
            #    VBoxWidget1:

            #Second Solution
            BoxLayout:
                #size_hint_y: 0 to 1 - it says how much you reduce height. Now its 1/3 of its parent, because there are 3 boxlayouts. if you set 0.5, it will have 1/3*0.5 and the other 2 boxlayouts takes the height which you took from this one 
            BoxLayout:
                orientation:'vertical'
                VBoxWidget1:
                VBoxWidget1:
                VBoxWidget1:
                VBoxWidget1:
            BoxLayout:

python

from kivy.app import App
from kivy.uix.togglebutton import ToggleButton
from kivy.uix.widget import Widget
from kivy.uix.boxlayout import BoxLayout

class HBoxWidget(BoxLayout):
    def __init__(self, **kwargs):
        super(HBoxWidget, self).__init__(**kwargs)

class VBoxWidget1(BoxLayout):
    def __init__(self, **kwargs):
        super(VBoxWidget1, self).__init__(**kwargs)


class ContainerBox(BoxLayout):
    def __init__(self, **kwargs):
        super(ContainerBox, self).__init__(**kwargs)

class TestApp(App):
    def build(self):
        return ContainerBox() 

if __name__ == '__main__':
    TestApp().run()

Additional info:

The way I managed those 4 labels is not really correct way. I will give you hint how to solve it more correctly. Check https://kivy.org/doc/stable/api-kivy.uix.floatlayout.html#module-kivy.uix.floatlayout

On BoxLayout, widgets organize themself automaticly - horizontaly or verticaly and they scale based on how much space belongs to them. With FloatLayout, there is no restriction so you can position labels as you wish.

In general, if you have changing resolution, its better to solve it with BoxLayouts. If you want more freedom, use FloatLayout, but you will have to manage widget scaling and positioning by yourself

Upvotes: 2

Related Questions