Snippet kv : icone et texte

Présentation

L’affichage d’une icône, comme représentée sur le bureau Windows n’est pas si simple à réaliser avec kivy.

 

Composition

Ce composant hérite de BoxLayout pour définir une série de widgets disposés verticalement :

  • ligne 1 : l’icône
  • ligne 2 : le texte

Attention, avec un BoxLayout, l’image risque de perdre son ratio (hauteur / largeur) d’origine pour être déformée.

Pour l’icone, le redimensionnement de l’image en conservant le ratio (pour les écrans HD), il faut utiliser un Label avec un background et forcer la taille hauteur et largeur.

 

Code kv

<Icon_Text>:
	size_hint_y: None
	height: sp(100)
	_text_widget: _text_widget_id
	_icon_widget: _icon_widget_id
	Label:
		canvas.before:
			Color:
				rgba: 1,1,1, 1
			Rectangle:
				pos: self.pos
				size: self.size
				source: "images/dummy.png"
		id: _icon_widget_id
		text: " "
		size_hint: (None, None)
		size: (sp(80), sp(80))
		pos_hint: {'center_x':0.5, 'top':0}

	Label:
		id: _text_widget_id
		text: "dummy"
		font_size: '18sp'
		color: (0.2,0.2,0.2, 1)

Le fichier kv contient donc 2 labels : un pour l’icône et un pour le texte.

 

Code Python

class Icon_Text(BoxLayout):
	text = StringProperty("")
	icon = StringProperty("")
	icon_size = NumericProperty(sp(80))
	font_size = NumericProperty(sp(18))
	text_color = VariableListProperty([0,0,0,1])

	def __init__(self, **kwargs):
		super(Icon_Text, self).__init__(**kwargs)
		self.orientation = 'vertical'
		self.bind(text=self.set_text,
				icon=self.set_icon,
				icon_size=self.set_icon_size,
				font_size=self.set_font_size,
				text_color=self.set_text_color)

	def set_text(self, aText):
		self._text_widget.text = aText

	def set_icon(self, aSourceImage):
		self._icon_widget.canvas.before.children[1].source = aSourceImage

	def set_icon_size(self, aWidthHeight):
		self._icon_widget.size = (aWidthHeight, aWidthHeight)

	def set_font_size(self, aFontSize):
		self._text_widget.font_size = aFontSize

	def set_text_color(self, aColor):
		self._text_widget.color = aColor

 

Ce widget est utilisable de la même façon que ceux fournis dans Kivy :

picto = Icon_Text()
picto.set_text( "%s : x %s" % (aCategory_name, nb_pts) )
picto.set_icon( 'images/category_%s.png' % aCategory_code )
self.grid_widget.add_widget( picto )

 

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>