{"id":2873,"date":"2023-10-13T16:47:23","date_gmt":"2023-10-13T14:47:23","guid":{"rendered":"https:\/\/www.art-events.de\/weblog\/?p=2873"},"modified":"2023-10-16T16:29:43","modified_gmt":"2023-10-16T14:29:43","slug":"ae-android-kochbuch-texte-anzeigen-u-eingeben-buttons","status":"publish","type":"post","link":"https:\/\/www.art-events.de\/weblog\/ae-android-kochbuch-texte-anzeigen-u-eingeben-buttons\/","title":{"rendered":"AE Android Kochbuch: Texte anzeigen u. eingeben, Buttons"},"content":{"rendered":"<p>Teil2 AE Android Kochbuch: Layout Design, Text anzeigen und Text eingeben<\/p>\n<p>Unser AE Android Kochbuch f\u00fcr Praktiker. Hier zeige ich euch wie ihr schnell und einfach Android programmieren lernt. Tipps aus der Praxis. Vorweg noch mal der Hinweis: Dieses ist zwar ein Grundkurs, aber ihr solltet schon etwas Grundlagenwissen haben. Zum Beispiel wissen, was eine Variable ist, und dass man Zahlen in Integer und Texte in String Variablen speichert. Wenn euch solche Basics noch fremd sind \u2013 ich empfehle die ersten Kapitel vom Buch Java ist auch nur eine Insel oder andere Literatur, die euch in solche grundlegenden Dinge einf\u00fchrt.<\/p>\n<p>Den ersten Teil der Einf\u00fchrung findet ihr hier. <a href=\"https:\/\/www.art-events.de\/weblog\/ae-android-kochbuch-getting-started-u-device-manager\/\">Android Programmieren Getting Started und Device Manger<\/a><\/p>\n<h1><a id=\"post-2873-__RefHeading___Toc257_3005313255\"><\/a>Hier im Teil2:<\/h1>\n<p><strong>Inhaltsverzeichnis<\/strong><\/p>\n<p><a href=\"#post-2873-__RefHeading___Toc257_3005313255\">Hier im Teil2: 1<\/a><\/p>\n<p><a href=\"#post-2873-__RefHeading___Toc231_3005313255\">Sch\u00f6n soll es aussehen. Die Sache mit dem Layout 2<\/a><\/p>\n<p><a href=\"#post-2873-__RefHeading___Toc233_3005313255\">Lineares Layout 2<\/a><\/p>\n<p><a href=\"#post-2873-__RefHeading___Toc235_3005313255\">TextView &#8211; einen Text anzeigen 5<\/a><\/p>\n<p><a href=\"#post-2873-__RefHeading___Toc237_3005313255\">EditText &#8211; eine Eingabe anfordern 7<\/a><\/p>\n<p><a href=\"#post-2873-__RefHeading___Toc239_3005313255\">Einen Button anzeigen 8<\/a><\/p>\n<p><a href=\"#post-2873-__RefHeading___Toc241_3005313255\">Anwendung im Emulator ausf\u00fchren 9<\/a><\/p>\n<p><a href=\"#post-2873-__RefHeading___Toc243_3005313255\">Java Code: Texte \u00e4ndern 11<\/a><\/p>\n<p><a href=\"#post-2873-__RefHeading___Toc245_3005313255\">Kommentieren bis der Arzt kommt 12<\/a><\/p>\n<p><a href=\"#post-2873-__RefHeading___Toc247_3005313255\">Variablen sind wichtig 12<\/a><\/p>\n<p><a href=\"#post-2873-__RefHeading___Toc249_3005313255\">Variablen global oder lokal 12<\/a><\/p>\n<p><a href=\"#post-2873-__RefHeading___Toc251_3005313255\">Variablen Initialisierung 13<\/a><\/p>\n<p><a href=\"#post-2873-__RefHeading___Toc365_3005313255\">Der Programmcode 14<\/a><\/p>\n<p><a href=\"#post-2873-__RefHeading___Toc253_3005313255\">Java Code: eine Android Eingabe auswerten 16<\/a><\/p>\n<p><a href=\"#post-2873-__RefHeading___Toc255_3005313255\">Der KeyListener reagiert auf Benutzerereignisse 16<\/a><\/p>\n<p><a href=\"#post-2873-__RefHeading___Toc259_3005313255\">Button Click mitbekommen und auswerten 18<\/a><\/p>\n<h1><a id=\"post-2873-__RefHeading___Toc231_3005313255\"><\/a>Sch\u00f6n soll es aussehen. Die Sache mit dem Layout<\/h1>\n<p>Wer schon einmal Desktop Windows Anwendungen programmiert hat, kennt es komfortabel: Einfach das gew\u00fcnschte Element (Button, Textbox etc) mit der Maus anklicken und an die Stelle des Bildschirms zotteln, wo man es hin haben m\u00f6chte. Dann noch 2x drauf klicken und sofort Programmcode programmieren, der beim Dr\u00fccken, Maus klicken oder sonstiger Aktion auszuf\u00fchren ist. Fertig.<\/p>\n<p>Ganz so praktisch ist es in der Android Welt im Moment noch nicht. Allerdings l\u00e4sst euch Android nicht alleine und bietet einige verschiedene Modell der Layoutgestaltung an. Was allerdings toll ist: ihr k\u00f6nnt die Modelle auch kombinieren und so jederzeit zwischen den Layouts wechseln, die f\u00fcr eure Anwendung optimal erscheinen.<\/p>\n<p>Im ersten Teil dieses Kurses haben wir mit dem Android Studio eine neue Anwendung mit einer leeren (empty) Activity erstellt. Standardm\u00e4\u00dfig hat das Android Studio hierf\u00fcr Layout gew\u00e4hlt, das sich Constraint Layout nennt. In Business Anwendungen wird jedoch oftmals das Linear Layout verwendet, das ich nachfolgend weiter vorstellen m\u00f6chte.<\/p>\n<h2><a id=\"post-2873-__RefHeading___Toc233_3005313255\"><\/a>Lineares Layout<\/h2>\n<p>Wie schon im Namen erkennbar, wird hierbei der Bildschirm linear in Zeilen eingeteilt. Von oben nach unten \/ vertikal. Oder alternativ: horizontal auf einer Zeile. Wir k\u00f6nnen also z.b. einen Text in Zeile1 anzeigen, in Zeile2 eine Eingabe holen und in Zeile3 mit einem Button speichern.<\/p>\n<p>Das Ganze funktioniert dann wie eine Tabelle mit mehreren Zeilen und eine oder mehreren Spalte(n). Wenn ihr innerhalb einer Zeile mehr Elemente unterbringen m\u00f6chtet, f\u00fcgt ihr einfach eine Zeile mit mehreren Spalten hinzu. Hierbei wird dann das horizontale Layout in das vertikale Layout eingebettet. Einfach mal als Beispiel in Tabellendarstellung:<\/p>\n<table>\n<tbody>\n<tr>\n<td>Zeile1, Spalte1<\/td>\n<\/tr>\n<tr>\n<td>Zeile2, Spalte1<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<table>\n<tbody>\n<tr>\n<td>Zeile3, Spalte1<\/td>\n<td>Spalte2<\/td>\n<td>Spalte3<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<table>\n<tbody>\n<tr>\n<td>Zeile4, Spalte1<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<table>\n<tbody>\n<tr>\n<td>Zeile5, Spalte1<\/td>\n<td>Spalte2<\/td>\n<td>Spalte3<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Um in unserer noch leeren Anwendung das Lineare Layout zu erhalten, schalten wir unser bisheriges Layout in das Lineare Layout um. Wie das geht? &#8211;\u00a0Wechselt in den Design Editor:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"547\" height=\"183\" class=\"wp-image-2874\" src=\"https:\/\/www.art-events.de\/weblog\/wp-content\/uploads\/2023\/10\/word-image-2873-1.png\" srcset=\"https:\/\/www.art-events.de\/weblog\/wp-content\/uploads\/2023\/10\/word-image-2873-1.png 547w, https:\/\/www.art-events.de\/weblog\/wp-content\/uploads\/2023\/10\/word-image-2873-1-300x100.png 300w\" sizes=\"auto, (max-width: 547px) 100vw, 547px\" \/><\/p>\n<p>Markiert den Text Constraint.Layout mit der rechten Maustaste, w\u00e4hlt Convert View und dann LinearLayout.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"737\" height=\"301\" class=\"wp-image-2875\" src=\"https:\/\/www.art-events.de\/weblog\/wp-content\/uploads\/2023\/10\/word-image-2873-2.png\" srcset=\"https:\/\/www.art-events.de\/weblog\/wp-content\/uploads\/2023\/10\/word-image-2873-2.png 737w, https:\/\/www.art-events.de\/weblog\/wp-content\/uploads\/2023\/10\/word-image-2873-2-300x123.png 300w\" sizes=\"auto, (max-width: 737px) 100vw, 737px\" \/><\/p>\n<p>Anschlie\u00dfend \u00e4ndert sich der Inhalt eurer Layout Datei und wird automatisch auf Linear umgestellt.<\/p>\n<p>Standardm\u00e4\u00dfig w\u00e4hlt das Studio das Linear Layout in Horizontal. Das wollen wir nicht. Also noch einmal mit der rechten Maustaste jetzt auf LinearLayout und w\u00e4hlt als Orientierung vertical aus, denn wir wollen unsere Anwendung in Zeilen untereinander pr\u00e4sentieren.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"602\" height=\"291\" class=\"wp-image-2876\" src=\"https:\/\/www.art-events.de\/weblog\/wp-content\/uploads\/2023\/10\/word-image-2873-3.png\" srcset=\"https:\/\/www.art-events.de\/weblog\/wp-content\/uploads\/2023\/10\/word-image-2873-3.png 602w, https:\/\/www.art-events.de\/weblog\/wp-content\/uploads\/2023\/10\/word-image-2873-3-300x145.png 300w\" sizes=\"auto, (max-width: 602px) 100vw, 602px\" \/><\/p>\n<p>Wechselt von der Darstellung DESIGN auf Darstellung SPLIT, um die \u00c4nderung zu sehen.\u00a0Wenn ihr das erledigt habt und euren Editor jetzt auf SPLIT umstellt, seht ihr das Element und seine Attribute.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"683\" height=\"299\" class=\"wp-image-2877\" src=\"https:\/\/www.art-events.de\/weblog\/wp-content\/uploads\/2023\/10\/word-image-2873-4.png\" srcset=\"https:\/\/www.art-events.de\/weblog\/wp-content\/uploads\/2023\/10\/word-image-2873-4.png 683w, https:\/\/www.art-events.de\/weblog\/wp-content\/uploads\/2023\/10\/word-image-2873-4-300x131.png 300w\" sizes=\"auto, (max-width: 683px) 100vw, 683px\" \/><\/p>\n<p>Wir werden zuk\u00fcnftig recht h\u00e4ufig zwischen den Editor Ansichten hin- und herschalten. Macht euch am besten mit den Unterschieden von DESIGN, SPLIT und CODE vertraut. Ich pers\u00f6nlich nutze am h\u00e4ufigsten DESIGN, um Elemente einzuf\u00fcgen und SPLIT, um die Elemente dann wunschgem\u00e4\u00df zu ver\u00e4ndern.<\/p>\n<h1><a id=\"post-2873-__RefHeading___Toc235_3005313255\"><\/a>TextView &#8211; einen Text anzeigen<\/h1>\n<p>Unter Windows hei\u00dft das Element zum Anzeigen von Texten Label. Unter Android: TextView.<\/p>\n<p>Wechselt in den DESIGN Editor und zieht von der Palette unter Common eine TextView in die Darstellung eures Android Ger\u00e4tes. Da wir das Lineare Layout verwenden, wird die TextView jetzt erst einmal ganz oben in der Zeile dargestellt.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"642\" height=\"258\" class=\"wp-image-2878\" src=\"https:\/\/www.art-events.de\/weblog\/wp-content\/uploads\/2023\/10\/word-image-2873-5.png\" srcset=\"https:\/\/www.art-events.de\/weblog\/wp-content\/uploads\/2023\/10\/word-image-2873-5.png 642w, https:\/\/www.art-events.de\/weblog\/wp-content\/uploads\/2023\/10\/word-image-2873-5-300x121.png 300w\" sizes=\"auto, (max-width: 642px) 100vw, 642px\" \/><\/p>\n<p>Wenn ihr jetzt wieder zum Reiter SPLIT wechselt, k\u00f6nnt ihr die Attribute der neuen TextView sehen und bearbeiten.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"506\" height=\"170\" class=\"wp-image-2879\" src=\"https:\/\/www.art-events.de\/weblog\/wp-content\/uploads\/2023\/10\/word-image-2873-6.png\" srcset=\"https:\/\/www.art-events.de\/weblog\/wp-content\/uploads\/2023\/10\/word-image-2873-6.png 506w, https:\/\/www.art-events.de\/weblog\/wp-content\/uploads\/2023\/10\/word-image-2873-6-300x101.png 300w\" sizes=\"auto, (max-width: 506px) 100vw, 506px\" \/><\/p>\n<p>Ich will euch nicht mit einer Auflistung von Attributen langweilen. Die meisten sind selbst erkl\u00e4rend. Jedoch: Attribute gibt es viele. Im DESIGN Editor seht ihr diverse Attribute, die einem Element automatisch zugef\u00fcgt werden, wenn ihr sie ausf\u00fcllt. Alternativ k\u00f6nnt ihr im CODE oder SPLIT Editor auch direkt im XML Code \u00e4ndern und seht dann auch die Auswirkungen der \u00c4nderungen.<\/p>\n<p>Wenn ihr im DESIGN Editor ein Element in die Darstellungsfl\u00e4che zieht, werden sofort die wichtigsten Attribute automatisch angelegt. Was uns jetzt am meisten interessiert sind:<\/p>\n<p><strong>id=<br \/>\n<\/strong>Dann folgt die Kennung unter der wir diese TextView sp\u00e4ter im Programmcode nutzen k\u00f6nnten, z.B. wenn wir Texte ver\u00e4ndern m\u00f6chten<\/p>\n<p><strong>layout_width= und layout_height=<br \/>\n<\/strong>Hier werden Breite und H\u00f6he des Elementes bestimmt und sind momentan auf \u201eabh\u00e4ngig vom Inhalt\u201c gesetzt. Ihr k\u00f6nnt auch mit absoluten Pixeln oder relativen Dots arbeiten, wenn ihr dort etwas umstellen wollt. Am Anfang lassen wir die Grundeinstellungen unver\u00e4ndert.<strong><br \/>\n<\/strong><\/p>\n<p><strong>text=<br \/>\n<\/strong>Spannend ist die Attribut Zeile text= &#8211; hier wird der Text eingetragen, der sofort angezeigt werden soll. Den k\u00f6nnen wir sp\u00e4ter zur Laufzeit ver\u00e4ndern, wenn wir \u00fcber die id auf das Element zugreifen. Doch jetzt wollen wir hier einen eigenen Text eintragen. Au\u00dferdem geben wir dem Element gleich einen sinnvollen Namen und nennen es textViewName.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"494\" height=\"139\" class=\"wp-image-2880\" src=\"https:\/\/www.art-events.de\/weblog\/wp-content\/uploads\/2023\/10\/word-image-2873-7.png\" srcset=\"https:\/\/www.art-events.de\/weblog\/wp-content\/uploads\/2023\/10\/word-image-2873-7.png 494w, https:\/\/www.art-events.de\/weblog\/wp-content\/uploads\/2023\/10\/word-image-2873-7-300x84.png 300w\" sizes=\"auto, (max-width: 494px) 100vw, 494px\" \/><\/p>\n<p>Ihr seht, wie sich rechts im Anzeigefenster sofort der Text \u00e4ndert und k\u00f6nnt \u00fcberpr\u00fcfen, ob euch die Darstellung gef\u00e4llt. Nat\u00fcrlich k\u00f6nnt ihr auch die Farbe oder Gr\u00f6\u00dfe \u00e4ndern. Spielt einfach mit den Attributen herum, um ein Gef\u00fchl daf\u00fcr zu bekommen!<\/p>\n<h1><a id=\"post-2873-__RefHeading___Toc237_3005313255\"><\/a>EditText &#8211; eine Eingabe anfordern<\/h1>\n<p>Unter Windows Forms nennen wir es Textbox. Unter Android EditText. EditText gibt uns eine Box in der der Benutzer etwas eintragen kann.<\/p>\n<p>Im DESIGN Editor ziehen wir jetzt eine EditText in unsere Anwendung. Bl\u00f6derweise gibt es im DESIGN Editor dieses Element nicht unter diesen Namen, ihr m\u00fcsst hier Plain Text w\u00e4hlen! Auch hier wieder: mit der Maus markieren, gedr\u00fcckt halten und in die Darstellungsfl\u00e4che ziehen. Das Studio legt dann sofort eine Eingabezeile mit der Beschriftung Name an.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"643\" height=\"222\" class=\"wp-image-2881\" src=\"https:\/\/www.art-events.de\/weblog\/wp-content\/uploads\/2023\/10\/word-image-2873-8.png\" srcset=\"https:\/\/www.art-events.de\/weblog\/wp-content\/uploads\/2023\/10\/word-image-2873-8.png 643w, https:\/\/www.art-events.de\/weblog\/wp-content\/uploads\/2023\/10\/word-image-2873-8-300x104.png 300w\" sizes=\"auto, (max-width: 643px) 100vw, 643px\" \/><\/p>\n<p>Im Code \/ Split Editor schaut es so aus. Und dort \u00e4ndern wir auch gleich die Id, damit es zueinander passt.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"478\" height=\"159\" class=\"wp-image-2882\" src=\"https:\/\/www.art-events.de\/weblog\/wp-content\/uploads\/2023\/10\/word-image-2873-9.png\" srcset=\"https:\/\/www.art-events.de\/weblog\/wp-content\/uploads\/2023\/10\/word-image-2873-9.png 478w, https:\/\/www.art-events.de\/weblog\/wp-content\/uploads\/2023\/10\/word-image-2873-9-300x100.png 300w\" sizes=\"auto, (max-width: 478px) 100vw, 478px\" \/><\/p>\n<h1><a id=\"post-2873-__RefHeading___Toc239_3005313255\"><\/a>Einen Button anzeigen<\/h1>\n<p>Das mit dem Button d\u00fcrfte Euch jetzt leicht fallen. Erweitert die Anwendung im Design Editor um einen Button, \u00e4ndert die ID und schaut euch das Ergebnis an.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"453\" height=\"113\" class=\"wp-image-2883\" src=\"https:\/\/www.art-events.de\/weblog\/wp-content\/uploads\/2023\/10\/word-image-2873-10.png\" srcset=\"https:\/\/www.art-events.de\/weblog\/wp-content\/uploads\/2023\/10\/word-image-2873-10.png 453w, https:\/\/www.art-events.de\/weblog\/wp-content\/uploads\/2023\/10\/word-image-2873-10-300x75.png 300w\" sizes=\"auto, (max-width: 453px) 100vw, 453px\" \/><\/p>\n<p>Eure Anwendung hat jetzt schon mal drei Elemente und macht richtig was her.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"424\" height=\"173\" class=\"wp-image-2884\" src=\"https:\/\/www.art-events.de\/weblog\/wp-content\/uploads\/2023\/10\/word-image-2873-11.png\" srcset=\"https:\/\/www.art-events.de\/weblog\/wp-content\/uploads\/2023\/10\/word-image-2873-11.png 424w, https:\/\/www.art-events.de\/weblog\/wp-content\/uploads\/2023\/10\/word-image-2873-11-300x122.png 300w\" sizes=\"auto, (max-width: 424px) 100vw, 424px\" \/><\/p>\n<h1><a id=\"post-2873-__RefHeading___Toc241_3005313255\"><\/a>Anwendung im Emulator ausf\u00fchren<\/h1>\n<p>Wir erinnern uns an den <a href=\"https:\/\/www.art-events.de\/weblog\/ae-android-kochbuch-getting-started-u-device-manager\/\">ersten Teil<\/a>. Dort habe ich \u00fcber den Device Manager geschrieben und wie ihr eure Anwendung auf dem PC unter Android simulieren k\u00f6nnt. Wenn ihr im Device Manager schon Android Ger\u00e4te angelegt habt, w\u00e4hlt ein Ger\u00e4t aus und startet die Emulation mit dem gr\u00fcnen Button.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"195\" height=\"59\" class=\"wp-image-2885\" src=\"https:\/\/www.art-events.de\/weblog\/wp-content\/uploads\/2023\/10\/word-image-2873-12.png\" \/><\/p>\n<p>Das Android Studio \u00fcbersetzt das Programm, startet den Emulator und pr\u00e4sentiert euch das Mini Programm im Android Fenster. Ihr k\u00f6nnen jetzt auf das Namensfeld klicken, einen Namen eingeben und den Button bet\u00e4tigen. Allerdings passiert noch nichts \u2013 weil wir den Programmcode hierf\u00fcr noch nicht erarbeitet haben!<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"635\" height=\"685\" class=\"wp-image-2886\" src=\"https:\/\/www.art-events.de\/weblog\/wp-content\/uploads\/2023\/10\/word-image-2873-13.png\" srcset=\"https:\/\/www.art-events.de\/weblog\/wp-content\/uploads\/2023\/10\/word-image-2873-13.png 635w, https:\/\/www.art-events.de\/weblog\/wp-content\/uploads\/2023\/10\/word-image-2873-13-278x300.png 278w\" sizes=\"auto, (max-width: 635px) 100vw, 635px\" \/><\/p>\n<h1><a id=\"post-2873-__RefHeading___Toc243_3005313255\"><\/a>Java Code: Texte \u00e4ndern<\/h1>\n<p>Bisher waren wir nur in der XML Layout Datei unterwegs. Um jetzt mit diesen Elementen etwas zu veranstalten kommt Java Programmierung ins Spiel. Wechselt in Fenster zur Anzeige der Java Datei. Ihr seht den vom Studio automatisch erzeugten Programmcode.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"669\" height=\"316\" class=\"wp-image-2887\" src=\"https:\/\/www.art-events.de\/weblog\/wp-content\/uploads\/2023\/10\/word-image-2873-14.png\" srcset=\"https:\/\/www.art-events.de\/weblog\/wp-content\/uploads\/2023\/10\/word-image-2873-14.png 669w, https:\/\/www.art-events.de\/weblog\/wp-content\/uploads\/2023\/10\/word-image-2873-14-300x142.png 300w\" sizes=\"auto, (max-width: 669px) 100vw, 669px\" \/><\/p>\n<p>Wenn man in der Programmierung, z.B. unter C etwas erreichen will, baut man eine Klasse und f\u00fcllt sie mit Funktionen, die spezielle Sachen machen. In Java hei\u00dfen die Funktionen Methoden und eine Methode muss immer innerhalb einer Klasse stehen. Java und C haben gemeinsam, dass Methoden (bzw. Funktion) in geschweiften Klammern {} stehen und eine Befehlsleile mit dem Semikolon ; beendet wird. Ausnahme: IF Abfragen, Schleifen u.a. Wer mehr zu den Details, zur Syntax und Co wissen will, ich empfehle das Buch<\/p>\n<p><strong>JAVA IST AUCH NUR EINE INSEL aus dem Rheinwerk Verlag!<\/strong><\/p>\n<p>https:\/\/www.rheinwerk-verlag.de\/java-ist-auch-eine-insel\/<\/p>\n<p>In unserem Fall finden wir die Klasse MainActivity und dort eine Methode onCreate, die wohl offensichtlich beim Start dieser Activity aufgerufen wird. Zwei Zeilen stehen schon drin. In der zweiten Zeile wird die XML Layout Datei aktiviert, damit ihr die Darstellung erhaltet, die wir zuvor definiert haben.<\/p>\n<h2><a id=\"post-2873-__RefHeading___Toc245_3005313255\"><\/a>Kommentieren bis der Arzt kommt<\/h2>\n<p>Ich bin ein Freund von Kommentaren im Programmcode! Egal ob englisch oder deutsch, ich f\u00fclle meine Sourcecodes immer mit Kommentaren, um zu beschreiben, was die Codezeilen machen. Dabei trenne ich Methoden voneinander durch Markierungszeichen mit Strichen ab. Das Ganze hat den Vorteil, dass Sourcecodes auch nach Jahren noch lesbar bleiben und ihr selbst oder ein Anderer schnell versteht, was ihr mit den nachfolgenden Befehlszeilen bezweckt! W<\/p>\n<p>Wie ihr eure Kommentare schreibt ist dabei egal. Wichtig ist der Gedanke: jetzt im Moment wisst ihr genau, was ihr tut. Wenn ihr aber nach Jahren noch (oder jemand anders) in den Sourcecode schaut, muss er \/ sie \/ es schnellstens verstehen, was ihr genau dort macht. Daf\u00fcr sind Kommentare da. Sie sind die Versicherung f\u00fcr die Zukunft \u2013 und jede fehlende Erkl\u00e4rung kann genau dann Schwierigkeiten machen, euren Code nachzuvollziehen.<\/p>\n<h2><a id=\"post-2873-__RefHeading___Toc247_3005313255\"><\/a>Variablen sind wichtig<\/h2>\n<p>Wir werden f\u00fcr jedes Element aus der Layout Datei eine Variable deklarieren. Variablen sind die Dinger, die man im Programmcode setzen, \u00e4ndern, abfragen, zuweisen kann. Sie sind sozusagen das Baumaterial f\u00fcr ein Programm. Grunds\u00e4tzlich gilt: Variablen sind dann wichtig, wenn ihr ihr mit dem Element im Java Code etwas veranstalten wollt!<\/p>\n<h2><a id=\"post-2873-__RefHeading___Toc249_3005313255\"><\/a>Variablen global oder lokal<\/h2>\n<p>Wenn ihr Variablen nur innerhalb einer Methode einsetzen m\u00f6chtet, reicht eine lokale Deklaration. Wollt ihr die gleiche Variable innerhalb der ganzen Klasse verwenden, solltet ihr sie global deklarieren.<\/p>\n<p><strong>Variablen m\u00fcssen vor einer Verwendung deklariert werden! <\/strong>Eine Deklaration enth\u00e4lt immer den Typ der Variable und ihre Bezeichnung. Bei Variablen au\u00dferhalb einer Methode wird noch ihre Lebensdauer eingef\u00fcgt, z.B. private, um zu zeigen, dass sie nur in einer Klasse g\u00fcltig sind!<\/p>\n<p>Globale Deklaration hat den Nachteil: ihr solltet Variablen mit dem gleichen Namen nicht noch einmal lokal deklarieren. Sonst kann euer Programm ungewollte Sachen veranstalten \u2013 Stichwort: mangelnde \u00dcbersichtlichkeit! Lokal hat den Nachteil, ihr m\u00fcsst u.U. eine Variable h\u00e4ufiger deklarieren, wenn ihr sie an verschiedenen Stellen nutzen wollt.<\/p>\n<pre><strong>Global: Private static Variablentyp Name_derVariable\r\n<\/strong>private static String Name1;\r\nprivate static TextView TextView1;<\/pre>\n<pre><strong>Lokal: Variablentyp Name_derVariable\r\n<\/strong>String Name2;\r\nTextView TextView2;<\/pre>\n<p>Ob ihr eure Variablen lokal oder global deklariert, bleibt eigentlich euch \u00fcberlassen. Generell gilt das eingangs gesagte: Wollt ihr sie nur innerhalb einer Methode verwenden, reicht lokal. Sollen sie in der ganzen Klassen allen Methoden zur Verf\u00fcgung stehen m\u00fcsst ihr global w\u00e4hlen. Aber aufpassen: Zu viele globale Variablen machen auch den Code un\u00fcbersichtlich und k\u00f6nnen so Fehler produzieren!<\/p>\n<p>Fans der reinen Programmierung m\u00f6gen jetzt aufst\u00f6hnen &#8211; aber ich pers\u00f6nlich mag es gerne, wenn ich die Elemente der Layout Datei global in allen Methoden meiner Klasse verwenden kann, ohne sie jedes Mal neu zuweisen zu m\u00fcssen. Deshalb setze ich sie auf global private static au\u00dferhalb der Methode, wenn ich absehen kann, dass ich sie in der Klasse noch einmal ben\u00f6tige. Kann ich das nicht erkennen, deklariere ich sie nur lokal in einer Methode. Allerdings sind sie dann auch nur dort bekannt und ihr m\u00fcsst sie wieder neu deklarieren, wenn ihr sie in einer anderen Methode verwenden wollt. Bei einigen Layoutelementen aus der XML Datei kann es immer wieder vorkommen, dass ich sie \u00fcberall in der Klasse \u00e4ndern oder abfragen will. Da spare ich mir gerne Schreibarbeiten und verwende gleich die globale private static Deklaration. Das bedeutet dann: Das Objekt ist in allen Methoden dieser Klasse bekannt und kann sofort genutzt werden.<\/p>\n<h2><a id=\"post-2873-__RefHeading___Toc251_3005313255\"><\/a>Variablen Initialisierung<\/h2>\n<p>Nach oder zusammen mit der Deklaration muss eine Variable initialisiert werden, damit dort auch ein sinnvoller Wert enthalten ist, z.B.<\/p>\n<pre>String MickyMaus = \"Ich bin die Maus\";\r\n\r\nInteger i = 5;<\/pre>\n<p>Die Initialsierung von Layoutelmenten folgt \u00fcber eine eigene Methode findViewById:<\/p>\n<pre><em>EditText etName <\/em>= findViewById(R.id.<em>editTextName<\/em>);<\/pre>\n<p>Doch schauen wir uns den Programmcode an:<\/p>\n<h2><a id=\"post-2873-__RefHeading___Toc365_3005313255\"><\/a>Der Programmcode<\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"878\" height=\"732\" class=\"wp-image-2888\" src=\"https:\/\/www.art-events.de\/weblog\/wp-content\/uploads\/2023\/10\/word-image-2873-15.png\" srcset=\"https:\/\/www.art-events.de\/weblog\/wp-content\/uploads\/2023\/10\/word-image-2873-15.png 878w, https:\/\/www.art-events.de\/weblog\/wp-content\/uploads\/2023\/10\/word-image-2873-15-300x250.png 300w, https:\/\/www.art-events.de\/weblog\/wp-content\/uploads\/2023\/10\/word-image-2873-15-768x640.png 768w\" sizes=\"auto, (max-width: 878px) 100vw, 878px\" \/><\/p>\n<p>Zeile 17-19 globale Deklaration der Variablen, alternativ Zeile 29-31 lokal in der Methode. Letztere Methode ist per Kommentar \u201everschlossen\u201c und daher nicht aktiv. Diese doppelte Deklaration macht nat\u00fcrlich keinen Sinn \u2013 ich habe es nur wg besserer \u00dcbersicht eingebaut, damit ihr seht, wie es aussehen m\u00fcsste, wenn die Variablen lokal deklariert werden.<\/p>\n<p>Zeile 34-36 Zuweisung der Variablen auf die Steuerelemente in der Layoutdatei.<\/p>\n<p>Zeile 38-39. Die Zuweisung nutzen wir gleich und und weisen zwei Elementen neuen Anzeigetext hinzu, d.h. wir \u00e4ndern zur Laufzeit der App Texte in den Elementen. Das TextView bekommt einen neuen Inhalt und der Button eine neue Beschriftung.<\/p>\n<p>Wenn ihr das Ganze jetzt im Emulator ausf\u00fchrt, \u00e4ndert sich euer Programm schon:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"515\" height=\"327\" class=\"wp-image-2889\" src=\"https:\/\/www.art-events.de\/weblog\/wp-content\/uploads\/2023\/10\/word-image-2873-16.png\" srcset=\"https:\/\/www.art-events.de\/weblog\/wp-content\/uploads\/2023\/10\/word-image-2873-16.png 515w, https:\/\/www.art-events.de\/weblog\/wp-content\/uploads\/2023\/10\/word-image-2873-16-300x190.png 300w\" sizes=\"auto, (max-width: 515px) 100vw, 515px\" \/><\/p>\n<h1><a id=\"post-2873-__RefHeading___Toc253_3005313255\"><\/a>Java Code: eine Android Eingabe auswerten<\/h1>\n<h2><a id=\"post-2873-__RefHeading___Toc255_3005313255\"><\/a>Der KeyListener reagiert auf Benutzerereignisse<\/h2>\n<p>Kommen wir zum KeyListener. Ein Listener unter Android stellt euch unter Android vordefinierte Methoden bereit, um auf Ereignisse zu reagieren. Ob der Benutzer einen Button dr\u00fcckt, in eine Liste klickt oder was auch immer \u2013 der Listener soll das mitbekommen und dann von euch bestimmten Programmcode ausf\u00fchren.<\/p>\n<p>F\u00fcr jedes Element, das auf ein Benutzerereignis reagieren soll, m\u00fcsst ihr einen eigenen Listener basteln und diesen in der onCreate Methode zuweisen! Wenig \u00fcberraschend: wenn der Benutzer einen Button dr\u00fcckt, muss in onCreate ein Key Listener definiert werden.<\/p>\n<p>Ihr k\u00f6nnt die Aktionen f\u00fcr den Listener direkt in der Methode eintragen \u2013 oder z.b. f\u00fcr den Listener eigene Methoden erstellen und alle Buttons in einer eigenen Methode unterbringen.<\/p>\n<p>Ich bin ein Fan davon, Key Listener in einer separaten Methode zu versammeln. Gerade wenn mehrere Buttons in einer Activity sind, wird meiner Meinung nach so die Lesbarkeit des Codes erleichtert. Man kann sofort nachschauen, was passiert, wenn ein bestimmter Button gedr\u00fcckt wird und muss nicht wild im Code in endlos langen Methoden herum scrollen.<\/p>\n<p>Doch genug der Vorrede. Wir erweitern unseren Programmcode um den Key Listener f\u00fcr den Button in unserer Activity:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"647\" height=\"54\" class=\"wp-image-2890\" src=\"https:\/\/www.art-events.de\/weblog\/wp-content\/uploads\/2023\/10\/word-image-2873-17.png\" srcset=\"https:\/\/www.art-events.de\/weblog\/wp-content\/uploads\/2023\/10\/word-image-2873-17.png 647w, https:\/\/www.art-events.de\/weblog\/wp-content\/uploads\/2023\/10\/word-image-2873-17-300x25.png 300w\" sizes=\"auto, (max-width: 647px) 100vw, 647px\" \/><\/p>\n<p>Um den Key Listener schlussendlich zu erzeugen, benutzen wir einfach die Intelligenz vom Android Studio!<\/p>\n<p>Die rote Wellenlinie unter dem this zeigt uns, dass etwas nicht stimmt und der Nacharbeit bedarf. Cursor auf die rote Wellenlinie setzen und mit der rechten Maustaste \u00f6ffnet sich ein Context Men\u00fc. Das Studio kann uns Vorschl\u00e4ge anzeigen, um das Problem zu beheben: Show Context Actions.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"779\" height=\"211\" class=\"wp-image-2891\" src=\"https:\/\/www.art-events.de\/weblog\/wp-content\/uploads\/2023\/10\/word-image-2873-18.png\" srcset=\"https:\/\/www.art-events.de\/weblog\/wp-content\/uploads\/2023\/10\/word-image-2873-18.png 779w, https:\/\/www.art-events.de\/weblog\/wp-content\/uploads\/2023\/10\/word-image-2873-18-300x81.png 300w, https:\/\/www.art-events.de\/weblog\/wp-content\/uploads\/2023\/10\/word-image-2873-18-768x208.png 768w\" sizes=\"auto, (max-width: 779px) 100vw, 779px\" \/><\/p>\n<p>Im Context Men\u00fc schl\u00e4gt uns das Studio gleich zwei M\u00f6glichkeiten vor, die rote Wellenlinie weg zu bekommen. Der zweite Vorschlag ist das, was wir wollen: Android soll einen Key Listener f\u00fcr die Methode onClick einbauen!<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"548\" height=\"158\" class=\"wp-image-2892\" src=\"https:\/\/www.art-events.de\/weblog\/wp-content\/uploads\/2023\/10\/word-image-2873-19.png\" srcset=\"https:\/\/www.art-events.de\/weblog\/wp-content\/uploads\/2023\/10\/word-image-2873-19.png 548w, https:\/\/www.art-events.de\/weblog\/wp-content\/uploads\/2023\/10\/word-image-2873-19-300x86.png 300w\" sizes=\"auto, (max-width: 548px) 100vw, 548px\" \/><\/p>\n<p>Hiermit wird unsere Activity um den onClick Listener erweitert und der Code am Anfang der Klasse sieht jetzt auf einmal so aus:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"784\" height=\"55\" class=\"wp-image-2893\" src=\"https:\/\/www.art-events.de\/weblog\/wp-content\/uploads\/2023\/10\/word-image-2873-20.png\" srcset=\"https:\/\/www.art-events.de\/weblog\/wp-content\/uploads\/2023\/10\/word-image-2873-20.png 784w, https:\/\/www.art-events.de\/weblog\/wp-content\/uploads\/2023\/10\/word-image-2873-20-300x21.png 300w, https:\/\/www.art-events.de\/weblog\/wp-content\/uploads\/2023\/10\/word-image-2873-20-768x54.png 768w\" sizes=\"auto, (max-width: 784px) 100vw, 784px\" \/><\/p>\n<p>Anschlie\u00dfend will das Studio noch wissen, ob es eine separate Methode f\u00fcr den KeyListener bei onClick anlegen soll. Das ist dann unsere Alternative: onClick!<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"431\" height=\"120\" class=\"wp-image-2894\" src=\"https:\/\/www.art-events.de\/weblog\/wp-content\/uploads\/2023\/10\/word-image-2873-21.png\" srcset=\"https:\/\/www.art-events.de\/weblog\/wp-content\/uploads\/2023\/10\/word-image-2873-21.png 431w, https:\/\/www.art-events.de\/weblog\/wp-content\/uploads\/2023\/10\/word-image-2873-21-300x84.png 300w\" sizes=\"auto, (max-width: 431px) 100vw, 431px\" \/><\/p>\n<p>Und schon erzeugt uns Android eine neue Methode mit dem noch leeren Key Listener! In letzter Konsequenz hei\u00dft das \u00fcbrigens, das m\u00fcsst nur nur erstmalig beim ersten Button in der Klasse veranstalten. Beim zweiten Button ist dieser Key Listener schon da und ihr k\u00f6nnt ihn gleich mit Leben f\u00fcllen. Daher auch ein Grund, warum ich mit einer separaten Methode arbeite und den KeyListener nicht direkt in onCreate unterbringe: der Tippaufwand wird geringer, wenn man mehr als einen Button hat!<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"732\" height=\"132\" class=\"wp-image-2895\" src=\"https:\/\/www.art-events.de\/weblog\/wp-content\/uploads\/2023\/10\/word-image-2873-22.png\" srcset=\"https:\/\/www.art-events.de\/weblog\/wp-content\/uploads\/2023\/10\/word-image-2873-22.png 732w, https:\/\/www.art-events.de\/weblog\/wp-content\/uploads\/2023\/10\/word-image-2873-22-300x54.png 300w\" sizes=\"auto, (max-width: 732px) 100vw, 732px\" \/><\/p>\n<h2><a id=\"post-2873-__RefHeading___Toc259_3005313255\"><\/a>Button Click mitbekommen und auswerten<\/h2>\n<p>Meine Methode mit dem KeyListener baue ich in der Regel mit Switch Anweisungen auf. Hier wird jeder Button eingetragen und der Programmcode hinterlegt, was zu tun ist. Oder es werden weitere Methoden aufgerufen, die irgendwelche Aktionen erledigen, wenn der Button gedr\u00fcckt wird. H\u00e4tten wir weitere Buttons w\u00fcrde wir einfach neue case Anweisungen hinzuf\u00fcgen.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"572\" height=\"283\" class=\"wp-image-2896\" src=\"https:\/\/www.art-events.de\/weblog\/wp-content\/uploads\/2023\/10\/word-image-2873-23.png\" srcset=\"https:\/\/www.art-events.de\/weblog\/wp-content\/uploads\/2023\/10\/word-image-2873-23.png 572w, https:\/\/www.art-events.de\/weblog\/wp-content\/uploads\/2023\/10\/word-image-2873-23-300x148.png 300w\" sizes=\"auto, (max-width: 572px) 100vw, 572px\" \/><\/p>\n<p>Ihr seht ab Zeile 53, was passieren soll, wenn der Button buttonName gedr\u00fcckt wird. In Zeile 55 wird der Wert Inhalt der Textview an eine globale String Variable gbName \u00fcbergeben und kann dann in weiteren Methoden ausgewertet werden. Was hierzu letztlich noch fehlt \u2013 die globale Deklaration der String Variable in der Klasse aber au\u00dferhalb der Methoden, die wir in unserem Programmcode in Zeile 21 untergebracht hatten:<\/p>\n<p>private static String <em>gbName<\/em>;<\/p>\n<p>Das war es mit dem zweiten Teil. Ihr k\u00f6nnt jetzt eigene Elemente in eure Activity einbauen, Texte anzeigen, Eingaben vom Benutzer holen, diese in Variablen speichern, damit ihr damit etwas anstellt.<\/p>\n<p>Unsere erste Minianwendung beenden wir an dieser Stelle und wollen uns jetzt einem ersten kleinen echten Programm zuwenden. In Teil3 programmieren wir einen kleinen Editor, in dem ihr Texte eingeben k\u00f6nnt, Scanner testen und noch so einiges mehr.<\/p>\n<h3>Video<\/h3>\n<p><iframe loading=\"lazy\" title=\"AE Android Kochbuch f\u00fcr Beginner. Video 02. Text anzeigen, Benutzereingaben und Button verarbeiten.\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/J1VVQKUhPO0?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<p>&nbsp;<\/p>\n<hr \/>\n<p><a href=\"https:\/\/www.art-events.de\/weblog\/wp-content\/uploads\/2021\/06\/20080607hjwx-204.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2104\" src=\"https:\/\/www.art-events.de\/weblog\/wp-content\/uploads\/2021\/06\/20080607hjwx-204.jpg\" alt=\"\" width=\"204\" height=\"153\" \/><\/a><\/p>\n<p>Text und Entwurf. (c)\u00a0<a href=\"https:\/\/www.terminal-systems.de\/\" target=\"_blank\" rel=\"noopener\">AE SYSTEME Testcenter<\/a>, Hans-J. Walter<br \/>\nHans-J. Walter ist Programmierer f\u00fcr Windows DOT.NET \/ C# und Android und als eingetragener, unabh\u00e4ngiger Journalist verantwortlich f\u00fcr Fachberichte und Schulungstexte \u00fcber Technik u. Entwicklung.\u00a0<a href=\"mailto:hjw@terminal-systems.de\">hjw@terminal-systems.de<\/a><\/p>\n<p><em>F\u00fcr diese und alle nachfolgenden Seiten gilt ebenso der obligatorische Hinweis: Alle Angaben ohne Gew\u00e4hr. Bilder und Codes zeigen Beispiele. Diese Beschreibung bezieht sich auf unsere Installation und stellt keine Bewertung der verwendeten Techniken da. Fehler und Irrt\u00fcmer vorbehalten!<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Teil2 AE Android Kochbuch: Layout Design, Text anzeigen und Text eingeben Unser AE Android Kochbuch f\u00fcr Praktiker. Hier zeige ich euch wie ihr schnell und einfach Android programmieren lernt. Tipps aus der Praxis. Vorweg noch mal der Hinweis: Dieses ist zwar ein Grundkurs, aber ihr solltet schon etwas Grundlagenwissen haben. Zum Beispiel wissen, was eine [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[33,34],"tags":[],"class_list":["post-2873","post","type-post","status-publish","format-standard","hentry","category-android","category-programmierung","entry"],"_links":{"self":[{"href":"https:\/\/www.art-events.de\/weblog\/wp-json\/wp\/v2\/posts\/2873","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.art-events.de\/weblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.art-events.de\/weblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.art-events.de\/weblog\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/www.art-events.de\/weblog\/wp-json\/wp\/v2\/comments?post=2873"}],"version-history":[{"count":0,"href":"https:\/\/www.art-events.de\/weblog\/wp-json\/wp\/v2\/posts\/2873\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.art-events.de\/weblog\/wp-json\/wp\/v2\/media?parent=2873"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.art-events.de\/weblog\/wp-json\/wp\/v2\/categories?post=2873"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.art-events.de\/weblog\/wp-json\/wp\/v2\/tags?post=2873"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}