Python GUI mit KIVY – Die Verpackung zählt! (Styling)

Der erste Eindruck zählt!
So ist es mit den meisten Dingen im Leben und so geht es natürlich auch unserer Software.
Styling ist also wichtig.
Und deshalb wird es in dem Beitrag darum gehen, unserem Python GUI mit Kivy ein kleines Facelift zu verpassen.
Der erste Eindruck soll einfach etwas ansprechender sein.

Das ist der dritte Teil meiner kleinen Serie über Kivy.
Hier findest du die ersten beiden Teile:

• Erste Schritte
• Willkommen Seite

Kivy Serie

• Erste Schritte mit Fenstern
• Den Benutzer Willkommen heißen
• Die Verpackung zählt!
• Weitere Ansichten (Views)
• Scrollbare Liste mit Aktiendaten
• Aktiendaten API anbinden (yfinance)
• Fehler “Instruction outside the main Kivy thread”
• Element aus dem Layout entfernen
• Aktien in der Watchlist speichern

Einleitung

Aktuell ist unser Design nicht besonders ansprechend.
Alles geht bis an den Rand.
Das Eingabefeld ist enorm groß.
Und genau so verhält es sich mit dem Button.

Über Farben oder Schriftgrößen brauchen wir gar nicht erst zu sprechen.

Seitenabstand setzen

Zuerst kümmern wir uns mal um den Seitenabstand.
Sobald nicht mehr alle einfach am Bildschirmrand klebt, sieht es gleich viel ansprechender aus.

Kivy macht es uns hier sehr einfach.
Wir können für das Fenster einfach einen size_hint angeben.
Dabei kann es ein size_hint_x, ein size_hint_y, oder eben einfach ein size_hint sein.

Mehr zu size_hint kannst du hier lesen.

Die ersten Beiden nehmen einfach einen Wert zwischen 0 und 1 entgegen.
size_hint benötigt ein Tupel, mit dem x und y repräsentiert werden.

Dabei ist der eingegebene Wert ein Faktor.
0.5 entspricht also 50 % der Bildschirmbreite.

Ich habe mich hier für 60 % Höhe und 70 % Breite entschieden.
Dafür setzt du den size_hint einfach mit zu deinen Konfigurationen.
Zum Beispiel direkt unterhalb der Konfiguration auf eine Spalte:

self.window.size_hint = (0.6, 0.7)

Perfekt!
Zumindest in dem Sinn, dass die Größen akzeptiert wurden.

Das Koordinatensystem für die Darstellung fängt allerdings links unten an.
Damit ist unser Inhalt jetzt auch links unten am Bildschirmrand.

Das ist natürlich weniger schön. Also lass uns das direkt als Nächstes in Ordnung bringen.

Inhalt zentrieren

Inhalte in einem Fenster zu positionieren ist oft eine nervige Angelegenheit.
Bis die richtigen Koordinaten gefunden sind…
Dann verzieht man das Fenster und schon ist alles den Bach runter.

Nicht so mit Kivy!
Auch dafür bekommen wir ein einfaches Attribut an die Hand: pos_hint

Genau wie bei size_hint kann ich bei pos_hint einen Faktor angeben.
Dieses Mal habe ich allerdings noch mehr Möglichkeiten als “nur” einen Faktor anzugeben.
Immerhin kann die Position von links oder rechts, oder – wie bei uns – ein Mittelpunkt sein.

Wenn du mehr über pos_hint lesen möchtest, findest du hier die Dokumentation.

Wir wollen für unseren Inhalt also einen Mittelpunkt angeben.
Um den herum soll Kivy alle Inhalte platzieren.
Darüber hinaus soll dieser Mittelpunkt auch noch auf dem Mittelpunkt des Fensters positioniert sein.

Dafür geben wir dem pos_hint einfach an, dass wir gerne center_x und center_y setzen möchten.
Anschließend können wir wieder den Faktor angeben.
pos_hint braucht also nicht nur einen Wert, sondern auch einen Schlüssel, wie dieser Wert zu verstehen ist.

Schlüssel + Wert? Das klingt doch nach Dictionary!

self.window.pos_hint = {
    'center_x': 0.5,
    'center_y': 0.5
}

Und schon ist der Inhalt zentriert:

Na das läuft doch wie am Schnürchen!

Text Aussehen anpassen

Machen wir uns an den Text.
Der ist mit dem weiß etwas blass.
Größer könnte er auch noch sein.

Für den Text hatten wir einfach ein Label genutzt.
Dabei haben wir den Text in dem Attribut text zur Darstellung übergeben:

self.greeting = Label(text='Wie heißt du?')

Kivy gibt uns an einem Label noch weitere Attribute.
Unter anderem findest du die Attribute font_size und color.

Damit kannst du Schriftgröße und Schriftfarbe anpassen.
Ich möchte den Text deutlich größer haben. Eine 52 scheint mir ganz gut zu sein.
Und als Farbe hätte ich gerne meine Farbe wie auch hier auf dem Blog.
Das ist die #33cccc.

Also erweitern wir einfach die Label-Komponente entsprechend:

self.greeting = Label(text='Wie heißt du?', font_size=52, color='#33cccc')

Einmal testen und freuen:

Eingabefeld anpassen

Weiter geht’s mit der Texteingabe.
Hier soll nur eine Zeile eingegeben werden.
Deshalb haben wir schon das multiline=False gesetzt.

Als Nächstes soll die ganze Leiste auch etwas kleiner sein.
Dafür gibt uns Kivy nicht nur an Fenstern, sondern auch an Komponenten das Attribut size_hint.

Im Grunde funktioniert es genauso wie auch schon am Fenster.
Du musst nur beachten, dass es sich auf die umgebende Komponente und nicht auf das gesamte Fenster bezieht.

Wir haben den Fensterinhalt auf eine Breite von 60 % gesetzt.
Wenn wir jetzt eine Breite von 50 % an der Komponente definieren, dann sind das 50 % von der verfügbaren Breite.
Also effektiv 30 % der Fensterbreite.

Wir lassen hier also für die Breite einfach eine 1 (= 100 %) stehen und ändern nur die Höhe.
Die Hälfte der aktuellen Höhe sollte passen. Also 0.5 (= 50 %).

Um den Eingabetext innerhalb der Box zu positionieren, liefert uns Kivy das Attribut padding.
Mit einem padding_y können wir einen Innenabstand definieren.
In unserem Fall wollen wir von oben und unten jeweils einen Abstand von 40.
Damit wird der Text in der Höhe zentriert.

Die Attribute / Parameter werden auch wieder direkt an der Komponente definiert:

self.user = TextInput(multiline=False, padding_y=(40, 40), size_hint=(1, 0.5))

So sollte dann das Ergebnis aussehen:

Die Texteingabe ist in der Höhe kleiner geworden.
Dazu ist der eingegebene Text auch in der Höhe zentriert worden.

Button anpassen

Zu guter Letzt fehlt noch der Button.
Auch der soll in der Höhe angepasst werden.

Dafür nutzen wir wieder den size_hint an der Button Komponente.
Die Werte haben wir bereits für den TextInput festgesetzt und können sie einfach wiederverwenden.

Als Nächstes hätte ich gerne den Text auf dem Button in Fettdruck.
Das Attribut bold wird einfach auf True gesetzt und schon ist der Text im Fettdruck.

Wie schon beim Text möchte ich auch den Button Hintergrund in “meiner” Farbe haben.
Mit dem Attribut background_color wird auch das möglich:

self.entrance_button = Button(text='Eintreten', size_hint=(1, 0.5), bold=True, background_color='#33cccc')

Huch… Was ist das?
Die Farbe am Button ist aber nicht wie erwartet.

Bei Buttons können wir die Hintergrundfarben nicht einfach so setzen.
Bzw. wird sie als Multiplikator für das Standard-Grau genutzt.
Damit ist das Ergebnis immer deutlich dunkler.
Um die Farbe so zu bekommen, wie wir sie wollten, müssen wir zusätzlich noch das Attribut background_normal auf einen Leerstring setzen.

Damit wird dieses Standard-Grau entfernt und die Farbe kommt voll durch.

Genauer kannst du das hier nachlesen.

self.entrance_button = Button(text='Eintreten',
                              size_hint=(1, 0.5),
                              bold=True,
                              background_color='#33cccc',
                              background_normal='')

Und schon strahlt der Button so hell wie er sein sollte!

Wunderbar!
So sieht die App doch gleich deutlich schöner aus!

Das war’s für diesen Artikel.
Im Nächsten werden wir die App überarbeiten und einzelne Views anlegen.
Immerhin soll der Benutzer nach der Willkommensseite auch irgendwo hin gelangen, oder?