CODEWITHSUNDEEP
pythonwidgetkivy
user3299143
user3299143

Reputation: 133

How to make a widget span multiple columns/rows in gridlayout in kivy

I would like to create an app in kivy with widgets in a grid and I want to be able to set some widgets to be larger - to occupy more than one cell in a grid.

GridLayout seems the most appropriate, but it seems to not support placing widgets in more than one cell.

To be more specific I want behavour similar to the grid geometry manager from Tkinter, when setting columnspan or rowspan to more than 1.

Like this:

(widget)(widget)(widget)
( bigger widget )(widget)
...

I would prefer to be able to do this using existing kivy layouts instead of having to write my own layout class to handle this, but if no other option is possible, this is also ok.

Upvotes: 12

Views: 14704

Answers (4)

DannyBean
DannyBean

Reputation: 1

An easy work around is to pack BoxLayout objects into any type of parent layout you want using your better judgement to decide the orientation of each subsequent BoxLayout

(decided to use box layouts for almost all of my own project over any gridlayout)

This is my class:

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

        self.orientation = 'vertical'

        self.add_widget(Label(text='Authenticate'))

        unameRow = BoxLayout(orientation='horizontal')
        unameRow.add_widget(Label(text='User Name'))
        unameRow.username = TextInput(multiline=False)
        unameRow.add_widget(unameRow.username)
        self.add_widget(unameRow)

        pwordRow = BoxLayout(orientation='horizontal')
        pwordRow.add_widget(Label(text='password'))
        pwordRow.password = TextInput(password=True, multiline=False)
        pwordRow.add_widget(pwordRow.password)
        self.add_widget(pwordRow)

        self.add_widget(Button(text='authenticate'))

Upvotes: 0

Ronald Saunfe
Ronald Saunfe

Reputation: 651

Lets assume you have a GridLayout with two columns and you want to span the first row.You can add Two FloatLayout whereby the first FloatLayout will contain the widget you would like to span while the second Layout will have row and height values to zero.This would archive a span effect

here is an example of .kv span effect

GridLayout:
     cols:2

     FloatLayout:   # The first FloatLayout in the first column in the gridLayout
        size_hint:None,None
        size: 0,50

        BoxLayout:
           size_hint: None,None
           size: root.width-40,50
           pos_hint: {'x':.5,'center_y':.5}

           BoxLayout:
              padding:0,0,5,0

              Label:
                 id:lbl_unknown
                 text:'Accession number :'

              TextInput:
                 text:''

     FloatLayout:  # The second FloatLayout in the second column of the gridLayout
         size_hint:None,None
         size:0,0

     Label:
        text:'Label 1:'
     TextInput:

     Label:
        text:'Label 2:'
     TextInput:

Upvotes: 0

ZenCODE
ZenCODE

Reputation: 452

Another option here is to have a GridLayout with 1 column and populate each row with a BoxLayout with orientation="horizontal". You can then format each BoxLayout (row) as you want.

For more info on the BoxLayout: http://kivy.org/docs/api-kivy.uix.boxlayout.html

Upvotes: 6

inclement
inclement

Reputation: 29450

I don't think a GridLayout is really suitable, it just isn't designed for quite that usage.

If I personally had to do this, I'd probably make my own Layout class, it wouldn't need a very complicated do_layout method.

One possible start point would be the SparseGridLayout I made a while ago. You could very easily add column and row span properties to it...actually, I'll probably add them myself now that you've given me the idea!

That might not be ideal if you have a big grid full of widgets, in which case something similar to a gridlayout might be better, or possibly a combination of multiple layouts if the spanning widgets are in a particular pattern.

Upvotes: 2

Related Questions