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

Transkript

1 Programmieren für mobile Endgeräte SS 2013/2014

2 Programmieren für mobile Endgeräte 2 Ressourcen XML in der Android-Entwicklung zur Definition von Ressourcen Im /res Ordner layout: Definition von Layouts values: Strings, Größenangaben (Dimensions), Farben, Stile anim/animator: Animation menu: Menüs Nicht als XML: drawables: Grafiken (bevorzugt: PNG) Bei Bedarf individuell (per Postfix-Angabe) bspw.: Auflösungen (ldpi, mdpi, hdpi oder xhdpi) SDK-Versionen Gerätetypen

3 Programmieren für mobile Endgeräte 3 Ressourcen (II) Hinzufügen neuer Ressourcen in Eclipse File New New Android XML File Ressource-Typ wählen Spezialisierung

4 Programmieren für mobile Endgeräte 4 Ressourcen (III) Wozu der Aufwand? 1. Möglichst scharfe Trennung von Daten und ihrer Darstellung 2. Möglichst keine harte Verdrahtung von Systemspezifika (z.b. Bildschirmauflösung) oder Systemeinstellungen (z.b. Sprache) Zu Punkt 1: Auch Model-View-Controller (MVC) Pattern genannt Model: Die konkreten Daten auf denen eine Anwendung arbeitet View: Was bekommt der Nutzer zu sehen Controller: Bindeglied zwischen View und Model

5 Programmieren für mobile Endgeräte 5 Model-View-Controller RelativeLayout (View) activity_main.xml <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent tools:context=".compassactivity" > <EditText android:id="@+id/edittext1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:inputtype="textpersonname" > </EditText> </RelativeLayout> Person (Model) public class Person { private String name; public void setname(string name) { this.name = name MyActivity (Controller) public class MyActivity extends Activity { private Person person = new Person(); protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); // inflate setcontentview(r.layout.activity_main); public void onkey(view view, int keycode, KeyEvent event) { if (event.getaction() == KeyEvent.ACTION_DOWN) { if (keycode == KeyEvent.KEYCODE_ENTER) { person.setname(((edittext)view).gettext().tostring()); ((EditText)view).setText(""); return true; return false; Kommunikation Controller View public String getname() {return name; Kommunikation Controller Model

6 Programmieren für mobile Endgeräte 6 Mehr zu Layouts: dp (density-independent pixels) dt ist eine Pixel-unabhängige Maßeinheit Sie wird für die Beschreibung von Layoutgrößen empfohlen Ohne Pixelunabhängigkeit erscheinen Layouts bei verschiedenen Auflösungen verschieden groß pixelabhängig pixelunabhängig Auflösung Auflösung Grafiken bei dp-skalierung schnell pixelig oder verschwommen Daher: Grafiken in verschiedenen Auflösungen anbieten Ordner: drawable-(ldpi mdpi hdpi xhpi) Vgl. Icon-Generierung bei neuem Projekt Quelle:

7 Programmieren für mobile Endgeräte 7 Mehr zu Layouts: layout_width height Höhe und Breite können wie folgt definiert werden feste Maßeinheit: 70dp Layout-Parameter: match_parent, wrap_content match_parent: so groß wie Elternelement (abzüglich Padding) wrap_content : gerade so groß, dass der Inhalt hinein passt Hello World Hello World match_parent wrap_content

8 Programmieren für mobile Endgeräte 8 Mehr zu Layouts: RelativeLayout Neben dem GridLayout das flexibelste Layout Anordnung der Elemente durch Layout-Parameter: <TextView android:id="@+id/textview1" android:layout_width="wrap_content" android:layout_height="wrap_content android:layout_alignparenttop="true" android:layout_alignparentleft="true" android:text AlignParentLeft_Top "/> <TextView android:id="@+id/textview2 android:layout_alignparentright="true" android:layout_alignparenttop="true android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="alignparentright_top"/> <TextView android:id="@+id/textview3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerinparent="true" android:text="centerinparent />

9 Programmieren für mobile Endgeräte 9 Mehr zu Layouts: RelativeLayout Anordnung durch Anker (Verweise auf andere Elemente per ID) <TextView android:id="@+id/textview3" android:layout_centerinparent="true" /> <TextView android:id="@+id/textview4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centervertical="true" android:layout_marginright="25dp" android:layout_toleftof="@+id/textview3" android:paddingtop="50dp" android:text="centertoleftof" /> <TextView android:id="@+id/textview5" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centervertical="true" android:layout_marginleft="25dp" android:layout_torightof="@id/textview3" android:paddingtop="50dp" android:text="centertorightof" />

10 Programmieren für mobile Endgeräte 10 Listener View-Elemente nehmen Nutzereingabe entgegen Nach MVC keine (modellbasierte) Verarbeitung von Eingaben Controller registrieren bei den View-Elementen Listener Views informieren diese über bestimmte Eingaben MyActivity Model protected void oncreate(bundle savedinstancestate) { Button button = (Button) findviewbyid(); button.setonclicklistener(myonclicklistener()); MyOnClickListener public void onclick(view view) { // do something

11 Programmieren für mobile Endgeräte 11 Listener (II) Drei Möglichkeiten einen Listener zu registrieren: 1. Implizit über den Designer: 2. Explizit public class MyActivity extends Activity { public void ontoggleclicked(view view) { public class MyListener implements OnClickListener { public void ontoggleclicked(view view) { public class MyActivity extends Activity { protected void oncreate(bundle savedinstancestate) { Button button = (Button) findviewbyid(); button.setonclicklistener(new MyListener()); Auch die Activity selbst darf als Listener fungieren!

12 Programmieren für mobile Endgeräte 12 Listener (III) 3. Anonym public class MyActivity extends Activity { protected void oncreate(bundle savedinstancestate) { Button button = (Button) findviewbyid(); final Object attribute = ; button.setonclicklistener(new OnClickListener() { public void onclick(view v) { // verarbeiten und irgendwas mit attribute machen ); Compiler legt eine anonyme Subklasse zu MyActivity an Klasse ist nicht statisch, daher Zugriff auf MyActivity - Attribute möglich Lokale Attribute müssen für Zugriff im Listener final sein

13 Programmieren für mobile Endgeräte 13 Form-Widgets Neben den Layouts die wichtigsten Komponenten zu erstellen von Oberflächen Button (siehe letzte Vorlesung) ist ein einfaches Form-Widget Mehrere Widgets können als ViewGroup zusammengefasst werden So können neue Nutzer-definierte Widgets entstehen Nachfolgend wird eine Auswahl vorgestellt

14 Programmieren für mobile Endgeräte 14 Form-Widgets (Auswahl I) ToggleButton Ein Button mit zwei Zuständen: On/Off Zustand schaltet automatisch bei Klick (Touch) um Zustandsbezeichnung kann geändert werden RadioButton, CheckBox Ebenfalls zwei Zuständen: checked/unchecked RadioButton kann nicht von checked zu unchecked wechseln RadioGroup Kapselt eine beliebige Anzahl an RadioButtons Nur einer der Buttons kann im Zustand checked sein.

15 Programmieren für mobile Endgeräte 15 Form-Widgets (Beispiel) ToggleButton zum Aktivieren von Nutzer- Logging in einer Activity RadioGroup zur Auswahl des Log-Levels Herausforderung: RadioButtons nur aktiv, wenn Logging auf On Vorarbeit: 1.Log-Level-Enum/Attribut mit den Werten VERBOSE, DEBUG, INFO 2.Boolesches Log-Attribut (default: false) in der Activity 3.Listener-Methode für die Buttons (Designer/Code) 4.Log-Methode log, die entsprechend des Log-Levels loggedt 5.Im Designer für alle RadioButtons Clickable deaktivieren

16 Programmieren für mobile Endgeräte 16 Form-Widgets (Beispiel: Code I) public class WidgetTestActivity extends Activity { protected static enum LogLevel {VERBOSE, DEBUG, INFO // 1 private LogLevel loglevel = LogLevel.VERBOSE; private boolean log = false; // 2 public void ontoggleclicked(view view) { // 3 // protected void log(string methodname, String message) { // 4 if (!this.log) return ; message = message + " (invoked by: " + methodname + ")"; switch (this.loglevel) { case VERBOSE: Log.v(this.getClass().getSimpleName(), message); break; case DEBUG:Log.d(this.getClass().getSimpleName(), message); break; case INFO: Log.i(this.getClass().getSimpleName(), message); break; In LogCat kann nach Log-Tags (Log.?(TAG, )) gefilter werden

17 Programmieren für mobile Endgeräte 17 Form-Widgets (Beispiel: Ressourcen) Im deaktivierten Zustand sollen die RadioButtons ausgegraut sein Neue Ressource: values/colors.xml Farbe im Designer zuweisen: <resources> <color name="view_text_enabled">#333</color> <color name="view_text_disabled">#999</color> </resources> Zugriff auf Ressourcen im Source-Code colors.xml <resources> <color name= MyColor"></color> </resources> final class R public static final class color { public static final int MyColor=0x7f040001; MyActivity int colorid = R.color.MyColor; int color = this.getresources().getcolor(colorid); // Liefert die ID, nicht den Wert! // Die Wert hinter der ID!

18 Programmieren für mobile Endgeräte 18 Form-Widgets (Beispiel: Code II) Funktionalität des ToggleButtons implementieren public void ontoggleclicked(view view) { this.log = ((ToggleButton)view).isChecked(); log("ontoggleclicked", ); // toggle Flag toggleclickable(r.id.radio0, R.id.radio1, R.id.radio2); // toggle RadioButons protected void toggleclickable(int... ids) { View view; for (int id : ids) { view = findviewbyid(id); view.setclickable(!view.isclickable()); // toggle Clickable if (view instanceof TextView) { int colorid = this.log? R.color.view_text_enabled : R.color.view_text_disabled; ((TextView)view).setTextColor(getResources().getColor(colorId)); // toggle Farbe log("toggleclickable", )

19 Programmieren für mobile Endgeräte 19 Form-Widgets (Beispiel: Code III) Funktionalität der RadioButtons implementieren RadioButtons und ToggleButton teilen sich eine Listener-Methode In der Methode muss also unterschieden werden public void ontoggleclicked(view view) { if (view instanceof ToggleButton) { // siehe Folie zuvor return ; public void ontoggleclicked(view view) { switch (view.getid()) { case R.id.toggleButton1: // siehe Folie zuvor break; if (view instanceof RadioButton) { String text = ((RadioButton)view).getText().toString(); case R.id.radio0: case R.id.radio1: case R.id.radio2: try { this.loglevel = LogLevel.valueOf(text.toUpperCase()); log("ontoggleclicked", ); catch (Exception e) { log("ontoggleclicked", break; instanceof id-switch

20 Programmieren für mobile Endgeräte 20 Form-Widgets (Auswahl II) ImageView Widget zum Einbinden von Bildern SeekBar Balken der einen Wert innerhalb einer Bereichsgröße repräsentiert Erlaubt Nutzereingabe per Slider Spinner Auswahlkompente Auswahlmöglichkeiten werden erst nach Click/Touch angezeigt

21 Programmieren für mobile Endgeräte 21 Form-Widgets (Beispiel II) ImageView mit einem Bild SeekBar zum Manipulieren des Alpha- Kanal des Bildes Spinner mit Farbauswahl zum Einfärben des Bildes Vorarbeit: 1.Neuer Ordner res/drawable und Bild per Dragndrop hinzufügen 2.Bild im Designer zuweisen 3.Activiaty um OnSeekBarChangeListener und OnItemSelectedListener erweitern (implements) 4.Interface-Methoden-Stubs implementieren 5.Activity als Listener für SeekBar und Spinner registrieren

22 Programmieren für mobile Endgeräte 22 Form-Widgets (Beispiel II: Code I) public class WidgetTestActivity extends Activity implements OnSeekBarChangeListener, OnItemSelectedListener { // 3 // OnSeekBarChangeListener // 4.1 public void onstarttrackingtouch(seekbar seekbar) {log(, ); public void onstoptrackingtouch(seekbar seekbar) {log(, ); public void onprogresschanged(seekbar seekbar, int progress, boolean fromuser) {log(, ); // OnItemSelectedListener // 4.2 public void onitemselected(adapterview<?> parent, View view, int position, long id) {log(, ); public void onnothingselected(adapterview<?> parent) {log( onnothingselected", ); protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); // inflate setcontentview(r.layout.activity_widget_test); SeekBar bar = (SeekBar) findviewbyid(r.id.seekbar1); // 5 bar.setonseekbarchangelistener(this); Spinner spinner = (Spinner) findviewbyid(r.id.spinner1); spinner.setonitemselectedlistener(this);

23 Programmieren für mobile Endgeräte 23 Form-Widgets (Beispiel II: Ressourcen) Spinner soll vordefinierte Auswahl an Farben anbieten Mehrere Strings können als String-Array-Ressource angelegt werden Farbnamen werden der von android.graphics.color übernommen <resources> <string-array name="colors"> <item>black</item> <item>blue</item> <item>cyan</item> <item>gray</item> <item>green</item> <item>magenta</item> <item>red</item> <item>white</item> <item>yellow</item> </string-array>> </resources> package android.graphics; public class Color { public static final int BLACK public static final int GRAY public static final int WHITE public static final int RED public static final int GREEN public static final int BLUE public static final int YELLOW public static final int CYAN public static final int MAGENTA = 0xFF000000; = 0xFF888888; = 0xFFFFFFFF; = 0xFFFF0000; = 0xFF00FF00; = 0xFF0000FF; = 0xFFFFFF00; = 0xFF00FFFF; = 0xFFFF00FF; Array wird dann über den Designer mit dem Spinner verbunden

24 Programmieren für mobile Endgeräte 24 Form-Widgets (Beispiel II: Code II) Funktionalität des SeekBars implementieren public void onprogresschanged(seekbar seekbar, int progress, boolean fromuser) { ImageView image = (ImageView) findviewbyid(r.id.imageview1); image.setimagealpha(progress); log("onprogresschanged", ); Per Default ist der Wertebereichs eines SeekBars Ein ARGB-Farbwert wird als int gespeichert Für einen Farbkanal gilt daher der Wertebereich: int 32Bit 8 8Bit # alpha, red, green, blue 4 SeekBar-Maximum sowie Startwert umstellen auf 255: Das SeekBar-Minimum kann nicht geändert werden!

25 Programmieren für mobile Endgeräte 25 Form-Widgets (Beispiel II: Code III) Funktionalität des Spinners implementieren public void onitemselected(adapterview<?> parent, View view, int position, long id) { String[] colors = getresources().getstringarray(r.array.colors); ImageView image = (ImageView) findviewbyid(r.id.imageview1); int color = Color.parseColor(colors[position]); image.setcolorfilter(color, PorterDuff.Mode.MULTIPLY); log("onitemselected", ); Übergeben wird mit position der Index des angeklickten Elementes Der zugehörige Wert wird im String-Array erfragt Per parsecolor wird dieser dann zum Farbwert geparst Die Einfärbung wird dann per setcolorfilter erreicht Zu PorterDuff.Mode.MULTIPLY: Jeder Pixel im Ausgangsbild wird mit dem übergebenen Farbwert multipliziert

26 Programmieren für mobile Endgeräte 26 Form-Widgets (Auswahl III) EditText Texteingabe Viele vordefinierte Varianten für bestimmte Einsatzzwecke Eingabe per OnKeyListener überwachen (hier Enter ): public boolean onkey(view v, int keycode, KeyEvent event) { if (event.getaction() == KeyEvent.ACTION_DOWN) { if (keycode == KeyEvent.KEYCODE_DPAD_CENTER keycode == KeyEvent.KEYCODE_ENTER) { // Enter wurde gedrückt return true; return false; ; Per getaction() wird überprüft ob eine Taste gedrückt wurde Der keycode verrät welche Taste

27 Programmieren für mobile Endgeräte 27 Aufgabe 1.Implementieren Sie aus Beispiel II den SeekBar und ImageView in einem neuen Projekt 2.Erweitern Sie die Anwendung so, dass unmittelbar unter dem Seekbar drei Textfelder angezeigt werden: 1.Zwei angepasst an den linken bzw. rechten Rand des SeekBars 2.Eines in der Mitte des Layouts 3.Das linke bzw. rechte Feld soll die Grenzen anzeigen, das mittlere den aktuell eingestellten Wert 3.Erweitern Sie die Anwendung um ein EditText, dessen Wert bei Eingabeabschluss (Enter) zu einem Farbwert geparst und analog zum Beispiel II als Einfärbung für das ImageView benutz werden soll. Gucken Sie sich dazu die Methode android.graphics.color.parsecolor genauer an (