Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

kivy scrollview with boxlayout

Tags:

python

kivy

I'm at the moment getting familiar with kivy. I think it has great potential, but I do find the relationship between "normal python" and the kv-language a bit confusing which makes it hard to understand where to do items. At the moment it appears to me that the behaviour (the things that happens behind the scenes) is not one to one when using python vs kv-l, in general I think that makes the bar quite high for usability/productivity.

I've amongst others used the "crash course" by inclement which is a great start to get a first impression of kivy. Anyway, in the process of learning I just wanted to see if I could make a box-view scrollable - it turned out that I could not.

What's needed to make this code work, i.e. expand the labels to their "texture-size", and at the same time having a ScrollView that adjusts to that?

If the BoxLayout has a size_hint_y: None, the labels are not expanded to the text, but the scrollview can be seen in action when making the window really small.

If the BoxLayout has a size_hint_y: 1, the labels are expanded, but apparantly the height of the boxlayout does not change at all, i.e. the scrollview window seems to be the same as with size_hint_y: None

If I just put in a height which is large, the scrollview covers this, but I would expect that it's possible to get a dynamic height of the boxlayout coupled to it's content.

I've played around with heights, size_hints, etc. and I have not found a combination that works and sometimes get warnings that the code needs to be remade due to internal redrawing loops?

What am I missing/not understanding?

Code as per below.

from kivy.base import runTouchApp
from kivy.lang import Builder
from kivy.uix.scrollview import ScrollView

Builder.load_string("""

<ScrollableLabel>:
    BoxLayout:
        orientation: 'vertical'
        # size_hint_y: 1
        size_hint_y: None
        height: 400 #self.size[1]
        canvas:
            Color:
                rgba: (1, 0, 0, .5) # DarkOliveGreen
            Rectangle:
                size: self.size
                pos: self.pos
        Label:
            id: bust
            text: 'a string that is long ' * 10
            font_size: 50
            text_size: self.width, None
            size_hint_y: None
            height: self.texture_size[1]
            canvas:
                Color:
                    rgba: (0, 1, 0, .5) # DarkOliveGreen
                Rectangle:
                    size: self.size
                    pos: self.pos
        Label:
            text: '2 strings that are long ' * 10
            text_size: self.width, None
            size_hint_y: None
            height: self.texture_size[1]
        Button:
            text: 'just testing'



""")

class ScrollableLabel(ScrollView):
    pass

runTouchApp(ScrollableLabel())
like image 980
ahed87 Avatar asked Jul 12 '15 12:07

ahed87


1 Answers

The BoxLayout is designed to make its children fill itself. A better layout for the dynamic resizing you want is the GridLayout, which has a minimum_height you can bind to for automatic resizing.

<ScrollableLabel>:
    GridLayout:
        cols: 1
        size_hint_y: None
        height: self.minimum_height
        canvas:
            Color:
                rgba: (1, 0, 0, .5) # DarkOliveGreen
            Rectangle:
                size: self.size
                pos: self.pos
        Label:
            id: bust
            text: 'a string that is long ' * 10
            font_size: 50
            text_size: self.width, None
            size_hint_y: None
            height: self.texture_size[1]
            canvas:
                Color:
                    rgba: (0, 1, 0, .5) # DarkOliveGreen
                Rectangle:
                    size: self.size
                    pos: self.pos
        Label:
            text: '2 strings that are long ' * 10
            text_size: self.width, None
            size_hint_y: None
            height: self.texture_size[1]
        Button:
            text: 'just testing'
""")
like image 66
inclement Avatar answered Oct 19 '22 15:10

inclement