Kivy - Recycle Layout

Very often, if an application interface requires a large number of widgets to display data items, its performance declines. The RecycleView widget in Kivy provides a flexible alternative. With the RecycleView, it is possible to view only a selected section of a large data set. It has the ability to reuse the widgets to show a list of scrollable data items. This feature is very useful for letting the user scroll through list of products, images, etc.

The mechanism of recycle layout is based on MVC (Model-View-Controller) architecture.

  • The RecycleView.data property forms the model layer.

  • The RecycleDataModel class implements the View layer. The View is split across layout and views and implemented using adapters. It is defined in the RecycleLayout, which is an abstract class.

  • For the third component - Controller - the RecycleViewBehavior class and defines the logical interaction. The RecycleView class implements the logic. It is defined in the "kivy.uix.recycleview" module.

You need to instantiate a RecycleView object, it automatically creates the views and data classes. Two important properties of the RecycleView that must be set are viewclass and data.

  • viewclass − Set this property to the name of a widget class. The recyclable view will consist of objects of this class. For example, if viewclass is a Button, the recycle view will be a scrollable list of buttons. Any widget can be used as the value of this property.

  • data − data is essentially a list of dicts, and uses these dicts to generate instances of the viewclass as required. This is a list of dicts whose keys map to the corresponding property names of the viewclass. For example, if the viewclass is set to Button, the data can be a list of dict items, in each dictionary, the key should be one of the properties of the Button class.

The RecycleView widget tree must also include a certain layout manager so that the view port can be found. There are two layouts to be used with RecycleView. One is RecycleBoxLayout (available in "kivy.uix.recycleboxlayout" module) and the other is RecycleGridLayout (in "kivy.uix.recyclegridlayout" module). Both the layout classes inherit BoxLayout and GridLayout classes.

Example

Let us load a hundred buttons in the RecycleView widget. The are added to RecycleBoxLayout.

To use buttons as elements in the recycle view, set its viewclass to Button.

Its data property is a list of dicts. Each dict has 'text' key and the value of each key is the button caption as BTN 1, BTN 2, etc. The following list comprehension statement composes the dict as −

data=[{'text': 'BTN {}'.format(str(x))} for x in range(20)]

[{'text': 'BTN 0'}, {'text': 'BTN 1'}, {'text': 'BTN 2'},
{'text': 'BTN 3'}, {'text': 'BTN 4'}, {'text': 'BTN 5'},
{'text': 'BTN 6'}, {'text': 'BTN 7'}, {'text': 'BTN 8'},
{'text': 'BTN 9'}, {'text': 'BTN 10'}, {'text': 'BTN 11'},
{'text': 'BTN 12'}, {'text': 'BTN 13'}, {'text': 'BTN 14'},
{'text': 'BTN 15'}, {'text': 'BTN 16'}, {'text': 'BTN 17'},
{'text': 'BTN 18'}, {'text': 'BTN 19'}]

Here is the "kv" language script for the RecycleView app −

RecycleView:
   viewclass: 'Button'
   data: [{'text': 'BTN {}'.format(str(x))} for x in range(20)]
   RecycleBoxLayout:
      default_size: None, dp(56)
      default_size_hint: 1, None
      size_hint_y: None
      height: self.minimum_height
      orientation: 'vertical'

The App class simply has to load this "kv" file, just keep the build() method with a pass statement.

from kivy.app import App
from kivy.uix.button import Button
from kivy.core.window import Window

Window.size = (720,400)
class recycled(App):
   def build(self):
      pass

recycled().run()

Output

Test the output of the code by running the above Python script. You should get a scrollable view of the buttons as shown below −

Kivy Recycle Layout
Advertisements