CODEWITHSUNDEEP
pythonpython-3.xkivy
nightmare637
nightmare637

Reputation: 635

How can I have a fixed width between images in Kivy while adjusting the window?

I have some images, which are all 680 x 1000 pixels in size. I have a horizontal scroll view set up in Kivy (using python), of which I want to display these images upon. The issue is that when I resize the window, the space between the images changes. Here is my code so far:

import kivy
from kivy.app import App
from kivy.uix.button import Button
from kivy.uix.scrollview import ScrollView
from kivy.uix.gridlayout import GridLayout
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.widget import Widget
from kivy.uix.floatlayout import FloatLayout
from kivy.uix.image import Image

class MyGrid(GridLayout):
    def __init__(self, **kwargs):
        super(MyGrid, self).__init__(**kwargs)
        self.rows = 1
        self.size_hint = None, .8
        self.bind(minimum_width=self.setter('width'))    

class MyBox(BoxLayout):
    def __init__(self, **kwargs):
        super(MyBox, self).__init__(**kwargs)
        self.orientation = "vertical"
        self.size_hint_x = None
        self.bind(minimum_width=self.setter('width'))    

class ScrollViewApp(App):
    def build(self):
        base = FloatLayout()
        grid = MyGrid()
        grid.width = 680
        box = MyBox()
        box.add_widget(Widget(size_hint_y=.1))
        box.add_widget(grid)
        box.add_widget(Widget(size_hint_y=.1))

        img = Image(source="img.jpg", allow_stretch=True, keep_ratio=True)
        img.stretch = True
        img.size = grid.size
        grid.add_widget(img)
        img = Image(source="img2.jpg", allow_stretch=True, keep_ratio=True)
        img.stretch = True
        img.size = grid.size
        grid.add_widget(img)

        scroll = ScrollView(do_scroll_y=False, pos_hint={"center_y": .5})
        scroll.add_widget(box)
        base.add_widget(scroll)
        return base    

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

I found this post useful, though it didn't seem to address everything I needed: kivy image button size and position

If I have the images at their greatest size in kivy, I get the following:

Images Squeezed Together

These images are too close together! On the opposite end, if I shrink the window, I get this:

Images Too Far Apart

Now they are too far apart! How can I have make it so that as the images grow or shrink in size, they maintain the same horizontal distance from each other? Even if I add padding in the MyGrid() class, I still have the same problem.

Upvotes: 1

Views: 417

Answers (1)

John Anderson
John Anderson

Reputation: 39092

I prefer to let Kivy do the bindings for me, so my solution uses kv:

from kivy.app import App
from kivy.lang import Builder
from kivy.uix.image import Image


class MyImage(Image):
    pass


theRoot = Builder.load_string('''
ScrollView:
    do_scroll_y: False
    BoxLayout:
        id: box
        orientation: 'horizontal'
        spacing: 10
        size_hint: None, 1.0
        width: self.minimum_width    # binds BoxLayout width to the sum of child widths (plus spacing, padding, etc)
<MyImage>:
    size_hint: None, 1.0
    allow_stretch: True
    keep_ratio: True
    width: self.height * self.image_ratio    # set width (needed for BoxLayout minimum width calculations)
''')


class ScrollViewApp(App):
    def build(self):
        box = theRoot.ids.box
        img = MyImage(source="img.jpg")
        box.add_widget(img)
        img = MyImage(source="img2.jpg")
        box.add_widget(img)
        return theRoot

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

Upvotes: 2

Related Questions