kivy list detail example

kivy-list-detail-example.py

import kivy

from kivy.app import App
from kivy.uix.screenmanager import Screen, ScreenManager
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.gridlayout import GridLayout
from kivy.uix.label import Label
from kivy.uix.button import Button
from kivy.uix.scrollview import ScrollView
from kivy.properties import ObjectProperty, StringProperty
from kivy.lang import Builder

Builder.load_string('''
<ScreenList>:
	data_grid: data_grid
	BoxLayout:
		orientation: 'vertical'
		ScrollView:
			GridLayout:
				id: data_grid
				cols: 1
				spacing:10
				size_hint_y:None
				
<ScreenDetail>:
	label_brand: label_brand
	label_model: label_model
	label_year: label_year
	label_power: label_power
	label_top_speed: label_top_speed
	label_km: label_km
	photo: photo
	BoxLayout:
		orientation: 'vertical'
		Button:
			text: '< Go List'
			size_hint_y: None
			on_press: root.go_back()
		ScrollView:
			GridLayout:
				id: detail_grid
				cols:4
			
				Label:
					text: 'Brand:'
					bold: True
				Label:
					id: label_brand
					text: ''
				
				Label:
					text: 'Model:'
					bold: True
				Label:
					id: label_model
					text: ''
			
				Label:
					text: 'Year:'
					bold: True
				Label:
					id: label_year
					text: ''
				
				Label:
					text: 'Power:'
					bold: True
				Label:
					id: label_power
					text: ''
				
				Label:
					text: 'Top Speed:'
					bold: True
				Label:
					id: label_top_speed
					text: ''
				
				Label:
					text: 'Km:'
					bold: True
				Label:
					id: label_km
					text: ''
				
				AsyncImage:
					id: photo
''')

data = [
	  {
		  'Brand': 'Mercedes', 
		  'Model': 'CLK 200',
		  'Year': '2003',
		  'Power': '120HP', 
		  'TopSpeed': '280KM', 
		  'Km': '130000',
		  'photo': 'http://lorempixel.com/200/200/?aa'
	  },
	  {
		  'Brand': 'Mercedes', 
		  'Model': 'A1', 
		  'Year': '2009', 
		  'Power': '90HP',
		  'TopSpeed': '200KM', 
		  'Km': '90000',
		  'photo': 'http://lorempixel.com/200/200/?bb'
	  },
	  {
		  'Brand': 'Volkswagen', 
		  'Model': 'Transporter', 
		  'Year': '2011', 
		  'Power': '140HP',
		  'TopSpeed': '220KM', 
		  'Km': '110000',
		  'photo': 'http://lorempixel.com/200/200/?cc'
	  }
]

cur_id = None

class ButtonWithTag(Button):
	def __init__(self, **kwargs):
		super(ButtonWithTag, self).__init__(**kwargs)
		
		self.tag = kwargs['tag']
		


class ScreenList(Screen):
	data_grid = ObjectProperty()
	
	def go_to_detail(self, instance):
		global cur_id
		cur_id = instance.tag
		self.manager.current = 'screen_detail'
	
	def __init__(self, **kwargs):
		super(ScreenList, self).__init__(**kwargs)
		
		self.data_grid.bind(minimum_height=self.data_grid.setter('height'))
		
		i = 0
		for row in data:
			lay = GridLayout(cols=4, size_hint_y=None, height=40)
			
			lay.add_widget(Label(text=row['Brand']))
			lay.add_widget(Label(text=row['Model']))
			lay.add_widget(Label(text=row['Year']))
			lay.add_widget(ButtonWithTag(text=">", size_hint_x=.1, tag=i, on_press=self.go_to_detail))
			
			self.data_grid.add_widget(lay)
			i+=1
	
	

class ScreenDetail(Screen):
	label_brand = ObjectProperty()
	label_model = ObjectProperty()
	label_year = ObjectProperty()
	label_power = ObjectProperty()
	label_top_speed = ObjectProperty()
	label_km = ObjectProperty()
	photo = ObjectProperty()
	
	def __init__(self, **kwargs):
		super(ScreenDetail, self).__init__(**kwargs)
		
	def on_enter(self):
		global cur_id
		row = data[cur_id]
		
		self.label_brand.text = row['Brand']
		self.label_model.text = row['Model']
		self.label_year.text = row['Year']
		self.label_power.text = row['Power']
		self.label_top_speed.text = row['TopSpeed']
		self.label_km.text = row['Km']
		self.photo.source = row['photo']
		
	def go_back(self):
		self.manager.current = 'screen_list'
		

class Listapp(App):
	def build(self):
		screenmanager = ScreenManager()
		screenmanager.add_widget(ScreenList(name='screen_list'))
		screenmanager.add_widget(ScreenDetail(name='screen_detail'))
		
		return screenmanager
		


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