Mobile App Development. - Grafische Oberflächen -

Ähnliche Dokumente
Mobile App Development

Mobile App Development. - Grafische Oberflächen -

Google Android API. User Interface. Eine knappe Einführung

Android GUI Entwicklung

App Entwicklung mit dem Android SDK

Naviki GPS-Anwendungsentwicklung für Mobiltelefone

Mobile App Development. - Grafische Oberflächen 2 -

Programmierkurs Java

Aus einem (sehr) begrenzten Wertebereich (z.b. Zahlen von 1-5) soll ein Wert ausgewählt werden.

Modellierung einer Android-App. 2. Mai 2013

App-Entwicklung für Android

Mobile App Development. - Alarm -

Labor 2 : Hello, World Plus

Einführung in die Android App-Entwicklung. Patrick Treyer und Jannis Pinter

Mit der Maus im Menü links auf den Menüpunkt 'Seiten' gehen und auf 'Erstellen klicken.

Übungen zur Android Entwicklung

Kurzeinführung Excel2App. Version 1.0.0

Einführung in die Programmierung für Wirtschaftsinformatik

Wichtige Information zur Verwendung von CS-TING Version 9 für Microsoft Word 2000 (und höher)

Drei-Schichten-Architektur. Informatik B - Objektorientierte Programmierung in Java. Vorlesung 16: 3-Schichten-Architektur 1 Fachkonzept - GUI

Der Aufruf von DM_in_Euro 1.40 sollte die Ausgabe 1.40 DM = Euro ergeben.

Programmieren für mobile Endgeräte SS 2013/2014. Dozenten: Patrick Förster, Michael Hasseler

Delegatesund Ereignisse

Tutorial. Programmierung einer Android-Applikation. Teil 1

Übungen zu Einführung in die Informatik: Programmierung und Software-Entwicklung: Lösungsvorschlag

teischl.com Software Design & Services e.u. office@teischl.com

Arrays von Objekten. Annabelle Klarl. Einführung in die Informatik Programmierung und Softwareentwicklung

Objektorientierte Programmierung

Leitfaden zur Nutzung von binder CryptShare

Übung - Arbeiten mit Android

Diese Ansicht erhalten Sie nach der erfolgreichen Anmeldung bei Wordpress.

Einführung in die Java- Programmierung

SCHNELLEINSTIEG ZUM TOOL NODEBUILDER

Übung Grundlagen der Programmierung. Übung 03: Schleifen. Testplan Testergebnisse

Einlesen einer neuen Chipkarte in der VR-NetWorld Software Seccos 6 gültig bis 2013

Anzeige von eingescannten Rechnungen

Handbuch zur Anlage von Turnieren auf der NÖEV-Homepage

Schulung Marketing Engine Thema : Einrichtung der App

Programmieren für mobile Endgeräte SS 2013/2014. Dozenten: Patrick Förster, Michael Hasseler

Java Einführung Operatoren Kapitel 2 und 3

FORUM HANDREICHUNG (STAND: AUGUST 2013)

IDEP / KN8 für WINDOWS. Schnellstart

Text Formatierung in Excel

Kurzanweisung für Google Analytics

Integrierte und automatisierte GUI-Tests in Java

Handbuch zum Excel Formular Editor

Hilfe zur Urlaubsplanung und Zeiterfassung

Outlook Erstellen einer aus einer HTML - Vorlage INHALT

Einführung in die Programmierung

Programmieren für mobile Endgeräte SS 2013/2014. Dozenten: Patrick Förster, Michael Hasseler

ClubWebMan Veranstaltungskalender

Verhindert, dass eine Methode überschrieben wird. public final int holekontostand() {...} public final class Girokonto extends Konto {...

Mobile App Development - Grafische Oberflächen 2 -

Web2Lead. Konfiguration

LISP. Eine Einführung

Graphic Coding. Klausur. 9. Februar Kurs A

Accounts und Kontakte in Android

LSF-Anleitung für Studierende

Anleitung zum LPI ATP Portal

BEDIENUNGSANLEITUNG: EINREICH-TOOL

Binäre Bäume. 1. Allgemeines. 2. Funktionsweise. 2.1 Eintragen

In diesem Tutorial lernen Sie, wie Sie einen Termin erfassen und verschiedene Einstellungen zu einem Termin vornehmen können.

Teamlike Administratorenhandbuch

Anleitung. Serienbrief - Outlook 2010 (Stand: Mai 2014)

Bauteilattribute als Sachdaten anzeigen

WPF Steuerelemente Listbox, ComboBox, ListView,

Entwickeln für Android OS

Print2CAD 2017, 8th Generation. Netzwerkversionen

Computeranwendung und Programmierung (CuP)

Microsoft Access 2013 Navigationsformular (Musterlösung)

Klassendiagramm der UML mit SiSy-AVR Schnelleinstieg am Beispiel myethernet-projekt

Leere Zeilen aus Excel-Dateien entfernen

Summenbildung in Bauteiltabellen mit If Then Abfrage

Erstellen von x-y-diagrammen in OpenOffice.calc

P&P Software - Adressexport an Outlook 05/29/16 14:44:26

1. Einschränkung für Mac-User ohne Office Dokumente hochladen, teilen und bearbeiten

1. Loggen Sie sich mit Ihrem Benutzernamen in den Hosting-Manager (Confixx) auf Ihrer entsprechenden AREA ein.

Ihre Interessentendatensätze bei inobroker. 1. Interessentendatensätze

Übungen Programmieren 1 Felix Rohrer. Übungen

MSDE 2000 mit Service Pack 3a

Facebook I-Frame Tabs mit Papoo Plugin erstellen und verwalten

4.1 Download der App über den Play Store

Arrays von Objekten. Annabelle Klarl. Einführung in die Informatik Programmierung und Softwareentwicklung

How to do? Projekte - Zeiterfassung

Datenbank LAP - Chefexperten Detailhandel

Alerts für Microsoft CRM 4.0

COMPUTERIA VOM SERIENBRIEFE UND ETIKETTENDRUCK

Java-Tutorium WS 09/10

DOS-Sympas Scope Dateien in Excel einlesen

O UTLOOK EDITION. Was ist die Outlook Edition? Installieren der Outlook Edition. Siehe auch:

POP -Konto auf iphone mit ios 6 einrichten

Dokumentation zur Versendung der Statistik Daten

S TAND N OVEMBE R 2012 HANDBUCH DUDLE.ELK-WUE.DE T E R M I N A B S P R A C H E N I N D E R L A N D E S K I R C H E

Multimedia Engineering II - Übung 2

ID VisitControl. Dokumentation Equitania Software GmbH cmc Gruppe Seite 1

Dokumentation für Lehrstühle

Android User Interface

Benutzerverwaltung Business- & Company-Paket

Ihr CMS für die eigene Facebook Page - 1

LimeSurvey -Anbindung

Transkript:

Mobile App Development - Grafische Oberflächen -

Inhalt Ressourcen Allgemeines Views Layouting

Ressourcen

Android Ressourcen Ressourcen sind Dateien und Objekte, wie Layouts, Bilder, Farben und IDs Zu jeder Ressource wird ein Eintrag in R.java generiert

Android Ressourcen public final class R { public static final class color { public static final int black=0x7f040000; } public static final class drawable { public static final int ic_launcher=0x7f020000; } public static final class id { public static final int LinearLayout1=0x7f080000; public static final int btnsayhello=0x7f080004; public static final int edtname=0x7f080003; public static final int imageview1=0x7f080001; public static final int menu_settings=0x7f080005; public static final int txtentername=0x7f080002; } public static final class layout { public static final int activity_main=0x7f030000; public static final int test_activity=0x7f030001; } public static final class menu { public static final int activity_main=0x7f070000; } public static final class string { public static final int app_name=0x7f050000; public static final int hello_world=0x7f050001; } }

Android Ressourcen Farben res/values/colors.xml <?xml version="1.0" encoding="utf-8"?> <resources> <color name="black">#00000000</color> <color name="green">#0000ff00</color> </resources> public final class R { public static final class color { public static final int black=0x7f040000; public static final int green=0x7f040001; } }

Android Ressourcen Strings res/values/strings.xml <resources> <string name="app_name">hello World</string> <string name="hello_world">hello world</string> </resources> public static final class string { public static final int app_name=0x7f050000; public static final int hello_world=0x7f050001; }

Android Ressourcen Layouts public static final class layout { public static final int activity_main=0x7f030000; public static final int test_activity=0x7f030001; }

Android Ressourcen Bilder public static final class drawable { public static final int ic_launcher=0x7f020000; }

Android Ressourcen IDs res/layout/activity_main.xml <LinearLayout xmlns:android="..." xmlns:tools="http://schemas.android.com/tools" android:id="@+id/linearlayout1" > <TextView android:id="@+id/txtentername" android:text="@string/name" android:textcolor="@color/black" /> <Button android:id="@+id/btnsayhello" android:text="@string/say" /> </LinearLayout> public final class R { public static final class id { public static final int LinearLayout1=0x7f080000; public static final int btnsayhello=0x7f080004; public static final int name=0x7f080002; }

Android Ressourcen Verwendung im Quelltext Die Attribute, die in der R.java angelegt wurden, können vom Quelltext aus als Referenz-ID verwendet werden Beispiel: Button btn = (Button) findviewbyid(r.id.btnsayhello); btn.settext(r.string.sayhello); btn.setbackgroundcolor(r.color.green);

GUIs

Grafische Oberflächen Grafische Oberflächen können in Android auf zwei Arten erstellt werden in Form von XML-Layout-Dateien, aus denen zur Laufzeit Views erstellt werden (LayoutInflater) oder programmatisch wie z.b. in Swing Wenn möglich sollten Layout-Dateien verwendet werden (res/layout)

View View (Widget) zeichnet etwas auf dem Screen grafisches Element, mit dem der Benutzer interagieren kann Oberklasse von allen Standard Controls Button, TextField, ProgressBar, ImageView

ViewGroup ViewGroup unsichtbarer Container, der andere Views oder ViewGroups aufnimmt... und diese positioniert Oberklasse von Containern LinearLayout, GridLayout, ListView

View Hierarchie View und ViewGroups bilden eine Hierarchie, d.h. einen Baum von Views

Beispiel Hello World <LinearLayout " xmlns:android="http://schemas.android.com/apk/res/android"" xmlns:tools="http://schemas.android.com/tools"" android:id="@+id/linearlayout1"" "... >" <ImageView" android:id="@+id/imageview1"" android:layout_gravity="center_horizontal"" android:src="@drawable/ic_launcher" />" <LinearLayout" android:layout_width="fill_parent"" android:layout_height="fill_parent">" <TextView" android:id="@+id/txtentername"" android:text="@string/name" />" <EditText" android:id="@+id/edtname"" android:inputtype="textcapwords" /> " </LinearLayout>" <Button" android:id="@+id/btnsayhello"" android:layout_gravity="center_horizontal"" android:text="@string/say" />" </LinearLayout>

Views

Bu?on View Button besteht aus einem Text und/oder einem Icon Bei Klick wird irgendeine Aktion ausgeführt

Bu?on View Button besteht aus einem Text und/oder einem Icon Bei Klick wird irgendeine Aktion ausgeführt XML <Button" android:id="@+id/btnmybutton"" android:text="@string/btntext" android:drawableleft="@drawable/ic_launcher" />

Bu?on View auf Klicks reagieren Möglichkeit 1: in der Activity einen OnClickListener erstellen und am Button registrieren Möglichkeit 2: Angabe einer aufzurufenden Methode während GUI Design

Bu?on View Möglichkeit 1 programmatische Zuweisung einer OnClickListener-Implementierung Button btn = (Button) findviewbyid(r.id.btnsayhello); btn.setonclicklistener(new View.OnClickListener() {" @Override" public void onclick(view v) {" " " " /*" " " " * Button action code" " " " */" " " }" " });

Bu?on View Möglichkeit 2 Angabe einer Methode, die in der Activity ausgeführt werden soll, wenn der Button geklickt wurde Achtung: die Methode muss in der Activity auch implementiert sein <Button" android:id="@+id/btnsayhello"" android:onclick="clickaction"" android:text="@string/say" />

Bu?on View Möglichkeit 2

Bu?on View Möglichkeit 2 Implementierung der Methode gleicher Name, wie in XML public-zugriff void return Wert <Button" android:id="@+id/btnsayhello"" android:onclick="clickaction"" android:text="@string/say" /> public void clickaction(view view) {" // do Button action" } genau 1 Parameter: View

EditText View EditText Views ermöglichen dem Benutzer die Eingabe von Text

EditText View EditText Views ermöglichen dem Benutzer die Eingabe von Text Tastatur öffnet sich automatisch nach Touch XML <EditText" android:id="@+id/edtname"" android:inputtype="textcapwords" android:imeoptions="actionsend">

EditText View Input type gibt an, welche Art von Text eingegeben werden soll, z. B. Plain, EMail, Password Textarten werden in Klassen eingeteilt Variation von Textklassen beeinflusst das Keyboard-Verhalten, z. B. erster Buchstabe groß, multi line

EditText View Input type Beispiele Klasse Text Number Text Variation CapSentence Decimal Password

EditText View Input type setzen

EditText View Input type setzen XML <EditText" " android:id="@+id/edtname"" " android:inputtype="textcapwords textnosuggestions" /> programmatisch EditText edtname = (EditText) findviewbyid(r.id.edtname);" edtname.setinputtype(inputtype.type_text_flag_cap_characters " " " InputType.TYPE_TEXT_FLAG_NO_SUGGESTIONS);

EditText View Keyboard action gibt an, welcher Button an Stelle des Return-Buttons in der Tastatur angezeigt werden soll XML <EditText " android:id="@+id/myedittext"" android:imeoptions="actionnone"" android:singleline="true" />

EditText View actionnext actiondone actionsend

EditText View actionnone actiongo actionsearch

EditText View Auf Keyboard action reagieren EditText txt = (EditText) findviewbyid(r.id.edittext01);" txt.setoneditoractionlistener(new TextView.OnEditorActionListener() {" " " @Override" " " public boolean oneditoraction(" TextView v, int actionid, KeyEvent event) {" " " " boolean handled = false;" " " " " " " " " return handled;" " " }" });

EditText View Weitere Eigenschaften Hint text <EditText... " android:hint="hint Text"> Lines <EditText... " android:lines="3"> Bilder <EditText... " android:drawableleft " " ="@drawable/ic_launcher">

EditText View... und noch mehr Eigenschaften Text style, typeface, size Line spacing Text color, hint color...

CheckBox View Eine CheckBox ermöglicht dem Benutzer eine mit ihr verknüpfte Eigenschaft auf true oder false zu setzen.

CheckBox View Eine CheckBox ermöglicht dem Benutzer eine mit ihr verknüpfte Eigenschaft auf true oder false zu setzen. XML <CheckBox" android:id="@+id/chbbeer"" android:layout_width="match_parent"" android:layout_height="wrap_content"" android:checked="true"" android:text="@string/beer" />

CheckBox View auf CheckBox Klicks reagieren Möglichkeit 1 Angabe einer Methode die in der Activity ausgeführt werden soll, wenn der Button geklickt wurde Möglichkeit 2 programmatische Zuweisung eines OnClickListeners

CheckBox View Möglichkeit 1 Angabe einer Methode, die in der Activity ausgeführt werden soll, wenn die CheckBox geklickt wurde <CheckBox" android:id="@+id/checkbox1"" android:checked="true"" android:onclick="onbeerboxclicked"" android:text="@string/beer" />

CheckBox View Möglichkeit 1

Bu?on View Möglichkeit 1 Implementierung der Methode gleicher Name, wie in XML <CheckBox" android:id="@+id/checkbox1"" android:checked="true"" android:onclick="onbeerboxclicked"" android:text="@string/beer" /> public-zugriff void return Wert genau ein Parameter: View public void onbeerboxclicked(view view) {" " CheckBox cb = (CheckBox) " " findviewbyid(r.id.checkbox1);" " if (cb.isselected()) {" " " /* do something */" " } else {" " " /* do the other things */" " }" }

CheckBox View Möglichkeit 2 programmatische Zuweisung eines OnClickListeners CheckBox cbbeer = (CheckBox) findviewbyid(r.id.cbbeer); cbbeer.setonclicklistener(new View.OnClickListener() {" " " @Override" " " public void onclick(view v) {" " " " CheckBox cb = (CheckBox) v;" " " " if (cb.ischecked()) {" " " " " /* do something */" " " " " Toast.makeText(MainActivity.this, " " " " " " " "Beer clicked", Toast.LENGTH_LONG).show();" " " " } else {" " " " " /* do the other things */" " " " }" " " }" " });

CheckBox View Möglichkeit 2 Alternative: programmatische Zuweisung eines OnCheckedChangeListener cbbeer.setoncheckedchangelistener(new OnCheckedChangeListener() {" " @Override" " public void oncheckedchanged( " " CompoundButton buttonview, boolean ischecked) {" " " " /* do your stuff */" " " }" });

RadioBu?on View RadioButtons ermöglichen dem Benutzer die Auswahl einer Option aus mehreren verschiedenen.

RadioBu?on View Optionen, die durch RadioButton repräsentiert werden, schließen sich gegenseitig aus (mutually exclusiv) RadioButtons werden in RadioGroups zusammengefasst

RadioBu?on View XML <RadioGroup" android:id="@+id/radiogroup1"" android:orientation="vertical" >" <RadioButton" android:id="@+id/radio0"" android:checked="true"" android:text="@string/mada"/>" <RadioButton" android:id="@+id/radio1"" android:text="@string/ikonzepte" />" <RadioButton" android:id="@+id/radio2"" android:text="@string/prakschalt" />" </RadioGroup>

RadioBu?on View auf Auswahl reagieren Angabe der Activity-Methode <RadioGroup" android:id="@+id/radiogroup1"" android:orientation="vertical" >" <RadioButton" android:id="@+id/radio0"" android:checked="true"" android:text="@string/mada" android:onclick="onselect"/>" <RadioButton" android:id="@+id/radio1"" android:text="@string/ikonzepte"" android:onclick="onselect" />" <RadioButton" android:id="@+id/radio2"" android:text="@string/prakschalt" android:onclick="onselect"/>" </RadioGroup>

RadioBu?on View Implementierung in Activity Regeln für Signatur analog zu Button und CheckBox public void onselect(view view) {" " switch (view.getid()) {" " " case R.id.radio0:" " " " /* MADA selected */" " " " break;" " " case R.id.radio1:" " " " /* IKZ selected */" " " " break;" " " case R.id.radio2:" " " " /* prakt. Schalt. selected */" " " " break;" " }" }

ProgressBar View ProgressBars werden verwendet, um den Fortschritt einer Operation anzuzeigen

ProgressBar View ProgressBars werden verwendet, um den Fortschritt einer Operation anzuzeigen <ProgressBar" android:id="@+id/progressbar1" style=" " "@android:style/widget.progressbar.horizontal"" android:layout_width="fill_parent"" android:layout_height="wrap_content"" android:max="100"" android:progress="70" />

ProgressBar View style Attribute bestimmt die Form der ProgressBar <ProgressBar" android:id="@+id/progressbar1" style=" " "@android:style/widget.progressbar.horizontal"" android:layout_width="fill_parent"" android:layout_height="wrap_content"" android:max="100"" android:progress="70" />

ProgressBar View max = Anzahl Ticks progress = aktuelle Ticks <ProgressBar" android:id="@+id/progressbar1" style=" " "@android:style/widget.progressbar.horizontal"" android:layout_width="fill_parent"" android:layout_height="wrap_content" android:indeterminate="false"" android:max="100"" android:progress="70" />

ProgressBar View Spezielle ProgressBars RatingBar Verwendung zur Dar- stellung einer Bewertung SeekBar Verwendung zum Setzen eines Wertes (z. B. Lautstärke)

Spinner View Eine Spinner View erlaubt dem Benutzer die Auswahl eines einzelnen Elements aus einer Menge.

Spinner View Eine Spinner View erlaubt dem Benutzer die Auswahl eines einzelnen Elements aus einer Menge. XML <Spinner" android:id="@+id/myspinner"" android:layout_width="fill_parent"" android:layout_height="wrap_content"... />"

Spinner View Wo kommen die Superhelden her und wie wird der Spinner gefüllt?

Spinner View Wo kommen die Superhelden her und wie wird der Spinner gefüllt? 1. Situation: Elemente sind zur Compile-Zeit bekannt 2. Situation: Elemente sind zur Compile-Zeit noch nicht bekannt

Spinner View Sind die Elemente zur Compile-Zeit bekannt, können sie in einer Array- Resource eingetragen und verwendet werden. Was sind Array-Resourcen?

Spinner View Definition eines String arrays res/values/strings.xml <resources>" <string name="app_name">test</string>" <string name="hello_world">hello world</string>......" <string-array name="spinner_values">" <item >Superman</item>" <item >Batman</item>" <item >Spiderman</item>" <item >Flash</item>" </string-array>" " </resources>

Spinner View Zuweisung des String arrays an den Spinner res/layout/activity_main.xml res/values/strings.xml <?xml version="1.0" encoding="utf-8"?>" <LinearLayout xmlns:android="..." "... " <Spinner" " " android:id="@+id/myspinner" " " android:entries="@array/spinner_values"/> "... </LinearLayout> <resources>..." <string-array name="spinner_values">" <item >Superman</item>" <item >Batman</item>" <item >Spiderman</item>" <item >Flash</item>" </string-array> " </resources>

Spinner View 2. Situation: Elemente erst zur Laufzeit bekannt Verwendung von Adaptern Adapter bilden Brücke zwischen sog. AdapterViews und den darzustellenden Daten

Spinner View Verwendung eines ArrayAdapters /* Erstellung eines Adapters */ ArrayAdapter<String> adapter = new ArrayAdapter<String>(" " " " " this, android.r.layout.simple_spinner_item); /* Datenelemente hinzufügen */" adapter.add("superman");" adapter.add("batman");" adapter.add("spiderman");" adapter.add("flash"); /* Spinner Instanz holen */ Spinner s = (Spinner) findviewbyid(r.id.myspinner);" /* Adapter für den Spinner festlegen */" s.setadapter(adapter);

Spinner View Auf eine Auswahl reagieren Spinner spinner = " (Spinner) findviewbyid(r.id.myspinner); spinner.setonitemselectedlistener(" " new AdapterView.OnItemSelectedListener() {" " @Override" " public void onitemselected( " " " AdapterView<?> parent, " " " " View view, int pos, long id) {" " " // TODO: implement me" " " String str = (String) "" " " " " parent.getitematposition(pos);" " }" " @Override" " public void onnothingselected( " " " AdapterView<?> parent) {" " " // TODO: implement me" " }" " });

List View ListViews werden verwendet, um mehrere Elemente in einer vertikalen Liste darzustellen

List View ListViews werden verwendet, um mehrere Elemente in einer vertikalen Liste darzustellen XML <ListView" android:id="@+id/listview1"" android:layout_width="fill_parent"" android:layout_height="wrap_content"" android:entries="@array/list_values" >

List View Wie wird die Liste befüllt? analog zur SpinnerView 1. Situation: Elemente sind zur Compile-Zeit bekannt 2. Situation: Elemente sind zur Compile-Zeit noch nicht bekannt

String- Array Definition eines String arrays res/values/strings.xml <resources>" <string name="app_name">test</string>" <string name="hello_world">hello world</string>...... <string-array name="list_values">" <item >Brot</item>" <item >Schinken</item>" <item >Käse</item>" <item >Butter</item>" <item >Bier</item>" </string-array>" " </resources>

String- Array Zuweisung des String arrays an die Liste res/layout/activity_main.xml res/values/strings.xml <?xml version="1.0" encoding="utf-8"?>" <LinearLayout xmlns:android="..." "... " <ListView" " " android:id="@+id/mylist" " " android:entries="@array/list_values"/> "... </LinearLayout> <resources>..." <string-array name="list_values">" <item >Brot</item>" <item >Schinken</item>" <item >Käse</item>" <item >Butter</item>" <item >Bier</item>" </string-array> " </resources>

List View 2. Situation: Elemente erst zur Laufzeit bekannt Verwendung eines Adapters, um die Liste zur Laufzeit zu befüllen

Spinner View Verwendung eines Adapters, um die Liste zur Laufzeit zu befüllen ArrayAdapter<String> adapter = " " " " new ArrayAdapter<String>(this, " " " " " android.r.layout.simple_list_item_1); adapter.add("brot");" adapter.add("schinken");" adapter.add("käse");" " " " ListView lv = (ListView) findviewbyid(r.id.listview1);" lv.setadapter(adapter);

List View Auf Element Klicks reagieren ListView lv = (ListView) findviewbyid( " " R.id.myListView);" " " " lv.setonitemclicklistener( " new AdapterView.OnItemClickListener() {" " " @Override" " " public void onitemclick( " " " AdapterView<?> list, " " " View view, int pos, long id) {" " " " " /* do your stuff here */" " " }" });

LayouKng

Layouts Layouts... sind ViewGroups (Container) können andere ViewGroups und Views aufnehmen werden verwendet, um ihre Kindelemente auf dem Screen zu positionieren

Layout Parameter Jede View besitzt Layout-Parameter, die der umgebenden ViewGroup mitteilen, wie die View in Position und Größe dargestellt werden soll. Je nach umgebender View werden verschiedene Layout-Parameter verwendet.

Layout Parameter Beispiel <Button" " android:id="@+id/mybutton"" " android:layout_width="wrap_content"" " android:layout_height="wrap_content"" " android:text="button" /> <Button" " android:id="@+id/mybutton"" " android:layout_width="wrap_content"" " android:layout_height="fill_parent"" " android:text="button" /> <Button" " android:id="@+id/mybutton"" " android:layout_width="fill_parent"" " android:layout_height="fill_parent"" " android:text="button" />

FrameLayout wird in der Regel verwendet, um ein Element darzustellen Layout-Attribut gravity <FrameLayout xmlns:android= " " "http://schemas.android.com/apk/res/android"" android:layout_width="fill_parent"" android:layout_height="fill_parent" >" <Button" android:id="@+id/mybutton"" android:layout_width="wrap_content"" android:layout_height="wrap_content"" android:layout_gravity="center"" android:text="@string/mybutton" />" </FrameLayout>

FrameLayout kann auch mehrere, gestapelte Views enthalten Darstellung nach Einfügereihenfolge <FrameLayout xmlns:android= " " "http://schemas.android.com/apk/res/android"" " android:layout_width="fill_parent"" " android:layout_height="fill_parent" >" " <TextView android:id="@+id/textview1"" android:layout_width="wrap_content"" android:layout_height="wrap_content"" android:layout_gravity="center"" android:text="@string/lorem" />" <Button android:id="@+id/mybutton"" android:layout_width="wrap_content"" android:layout_height="wrap_content"" android:layout_gravity="center"" android:text="button" />" </FrameLayout>

LinearLayout Ein LinearLayout richtet seine Kindelemente entlang einer bestimmt Richtung aus Diese Richtung (Orientierung) kann horizontal und vertikal sein

LinearLayout Orientierung <LinearLayout xmlns:android="..."" android:layout_width="fill_parent"" android:layout_height="fill_parent"" android:orientation="horizontal" android:orientation="vertical" >" <TextView" android:id="@+id/textview1"" android:text="@string/enter"/>" <EditText" android:id="@+id/edittext1"" android:layout_width="0dip"" android:layout_height="wrap_content"/ >" <Button" android:id="@+id/button1"" android:layout_width="wrap_content"" android:layout_height="wrap_content"" android:text="@string/mybutton" /> </LinearLayout>

LinearLayout Layout-Parameter weight gibt an, wie groß eine View im Verhältnis zu anderen Views dargestellt werden soll nicht ausgefüllter Platz im parent wird zwischen den Views gemäß dem Verhältnis ihrer weight Werte verteilt <EditText" android:id="@+id/myedittext"" android:layout_width="fill_parent"" android:layout_height="wrap_content"" android:layout_weight="2" >

LinearLayout Beispiel Layout-Parameter weight weight weight weight TextField - - 1 EditText - 1 2 Button - - 3

TableLayout Das TableLayout richtet seine Kindelemente in Form einer Tabelle aus, d. h. in Form von Spalten und Zeilen Aufbau des Layouts ist sehr ähnlich zu HTML-Tabellen (<tr>, <td>) Kindelemente werden in Zeilen und Zellen gruppiert

TableLayout Beispiel " <TableLayout android:stretchcolumns="*" >" <TableRow" android:id="@+id/tablerow1" >" <TextView" android:id="@+id/textview1"" android:text="text1" />" <TextView" android:id="@+id/textview2"" android:text="text2" />" </TableRow>" <TableRow android:id="@+id/tablerow2">" <Button" android:id="@+id/button1"" android:text="button1" />" <Button" android:id="@+id/button2"" android:text="button2" />" </TableRow>" </TableLayout>

TableLayout Shrink-Attribut gibt an, welche Spalten verkleinert werden sollen, wenn der Platz nicht für alle reicht mögliche Werte: Liste von Spaltenindizes * für alle Spalten

TableLayout Shrink-Attribut <TableLayout..." android:shrinkcolumns="*">" <TableRow" android:id="@+id/tablerow1">" " "..." " </TableRow>"...

TableLayout Stretch-Attribut gibt an, welche Spalten vergrößert werden sollen, wenn mehr Platz als benötigt zur Verfügung steht mögliche Werte: Liste von Spaltenindizes * für alle Spalten

TableLayout Stretch-Attribut <TableLayout..." android:stretchcolumns="0"" android:stretchcolumns="1,2"" android:stretchcolumns="*" " >" <TableRow...>"..." </TableRow>" </TableLayout>

RelaKveLayout RelativeLayout wird verwendet, um Views relativ zu einander auszurichten Nachteil: kompliziertes Layout Vorteil: sehr flache View-Hierarchie und dadurch bessere Performance

RelaKveLayout <RelativeLayout xmlns:android="..."" android:id="@+id/relativelayout1"" android:layout_width="fill_parent"" android:layout_height="fill_parent">" <TextView" android:id="@+id/textview1"" android:layout_alignparentleft="true"" android:layout_alignparenttop="true"/>" <EditText" android:id="@+id/edittext1"" android:layout_alignleft="@+id/textview1"" android:layout_below="@+id/textview1"/ >" <Button" android:id="@+id/button1"" android:layout_alignright="@+id/edittext1"" android:layout_below="@+id/edittext1"" android:text="@string/mybutton" />" </RelativeLayout>

RelaKveLayout RelativeLayout.LayoutParams http://developer.android.com/reference/android/widget/ RelativeLayout.LayoutParams.html

RelaKveLayout RelativeLayout.LayoutParams http://developer.android.com/reference/android/widget/ RelativeLayout.LayoutParams.html

<include/> Wiederverwendung von Layouts Oft ist es sinnvoll bestimmte Layouts wieder zu verwenden, um Mehrarbeit zu vermeiden Hierfür bietet Android das <include/> Element

<include/> Beispiel <?xml version="1.0" encoding="utf-8"?>" <LinearLayout..." android:layout_width="match_parent"" android:layout_height="wrap_content"" android:gravity="right"" android:orientation="horizontal" >" <Button" android:id="@+id/btnok"" android:layout_width="wrap_content"" android:layout_height="wrap_content"" android:text="@android:string/ok" />" <Button" android:id="@+id/btncancel"" android:layout_width="wrap_content"" android:layout_height="wrap_content"" android:text="@android:string/cancel" />" </LinearLayout>

<include/> Beispiel <RelativeLayout... >" <TextView" android:id="@+id/textview1"" android:layout_width="wrap_content"" android:layout_height="wrap_content"" android:text="@string/name"/>" <EditText" android:id="@+id/edittext1"" android:layout_width="wrap_content"" android:layout_height="wrap_content"" android:layout_torightof="@+id/textview1"/>" <include" android:id="@+id/include1"" android:layout_width="match_parent"" android:layout_height="wrap_content"" layout="@layout/ok_cancel" />" </RelativeLayout>

PrakKkum

Übung Übung 01 - Taschenrechner Es soll eine Taschenrechner-App erstellt werden, mit der einfache Berech- nungen durchgeführt werden können. Die App soll mindestens die Grundrechenarten Addition, Subtraktion, Mul- tiplikation und Division unterstützen. Außerdem soll es möglich sein, mehr als zwei Operanden und mehr als einen Operator einzugeben, sowie das Ergebnis der Berechnung als Operand für die nächste Berechnung zu ver- wenden. Für die Entwicklung der App sollen die in der Vorlesung vorgestellten View- und ViewGroup-Elemente verwendet werden. Hinweis: Der Fokus dieser Übung liegt nicht auf der Auswertung mathematischer Ausdrücke, sondern auf der Entwicklung einer funktionsfähigen Oberfläche. Aus diesem Grund kann für die Auswertung und Berechnung der Ausdrücke eine externe Bibliothek, wie bspw. http://www.objecthunter.net/exp4j verwendet werden.

Literatur I. Arno Becker, Marcus Pant, Android 4.4, 3.Auflage, dpunkt.verlag, ISBN: 978-89864-809-7 II. Thomas Künneth: Android 3 - Apps entwickeln mit dem Android SDK Galileo Press, 2011 III. Mark L. Murphy, Commonsware, The Busy Coder s Guide to Android Development IV. http://developer.android.com V. http://www.androidpit.de/de/android/wiki