Definition eigener Views

Transkript

1 Definition eigener Views Prinzipielle Ansätze: Spezialisierung eines Widgets bei Nutzung der vorhandenen Darstellungsmöglichkeiten z.b. TextView zur formatierten Ausgabe von Fließkommazahlen Layoutdefinition (Komposition verschiedener Widgets) als eigene Klasse z. B. Kombination von TextView mit EditText für Eingabefeld mit Label Definition von Views mit neuen Darstellungsmöglichkeiten Entwicklung mobiler Anwendungen Europäische Fachhochschule Brühl, 3. Quartal

2 Spezialisierung von Widgets Ableitung von einem existieren Widget mittels Vererbung Konstruktoren übernehmen und super verwenden private Methode für spezielle Initialisierungen zusätzliche Funktionalität durch zusätzliche Methoden Entwicklung mobiler Anwendungen Europäische Fachhochschule Brühl, 3. Quartal

3 View-Konstruktoren Üblicherweise mindestens die folgenden (vgl. android.view.view): Widgetklasse(Context context) Simple constructor to use when creating a view from code. Widgetklasse(Context context, AttributeSet attrs) Constructor that is called when inflating a view from XML. Widgetklasse(Context context, AttributeSet attrs, int defstyle) Perform inflation from XML and apply a class-specific base style. Entwicklung mobiler Anwendungen Europäische Fachhochschule Brühl, 3. Quartal

4 Verwendung in Layout-Definitionen Spezialisierte Widgets/View können in den XML-Layout-Definitionen verwendet werden. Elementname: Voll qualifizierter Klassenname Attribute/Properties der Oberklasse können verwendet werden, insbesondere auch android:id Attribut/Properties-Editor bleibt verwendbar Entwicklung mobiler Anwendungen Europäische Fachhochschule Brühl, 3. Quartal

5 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <mypackage.myview android:layout_height="wrap_content" android:layout_width="wrap_content" <Button.../> <TextView.../> </LinearLayout> Entwicklung mobiler Anwendungen Europäische Fachhochschule Brühl, 3. Quartal

6 Beispiel: TextView zur Anzeige von Fließkommawerten Beispiel 2.9. Widget NumberView als Spezialisierung von TextView mit einstellbarer Genauigkeit Layout mit NumberView zur Anzeige einer Double-Zufallszahl, einem Button zur Erzeugung einer Zufallszahl und Buttons zur Änderung der Genauigkeit Siehe Homepage Entwicklung mobiler Anwendungen Europäische Fachhochschule Brühl, 3. Quartal

7 Definition eigener Layout-Klassen Ableiten von der gewünschten Layout-Klasse, z.b. LinearLayout Zwei Möglichkeiten der Layout-Definition Quelltext: einfache Wiederverwendung, umständlichere Layout- Definition XML: einfache Layout-Definition, erfordert Einsatz eines LayoutInflater, unhandliche Wiederverwendung Entwicklung mobiler Anwendungen Europäische Fachhochschule Brühl, 3. Quartal

8 Ableiten von einer Layout-Klasse Konstruktoren z.b. bei LinearLayout: LinearLayout(Context context) LinearLayout(Context context, AttributeSet attrs) Für die Verwendung einer selbstdefinierten Layout-Klasse innerhalb einer XML-Layout-Definition unbedingt den zweiten Konstruktor implementieren! Entwicklung mobiler Anwendungen Europäische Fachhochschule Brühl, 3. Quartal

9 Layout-Definition im Quelltext Im Konstruktor grundlegende Einstellungen am Layout-Objekt vornehmen, z.b. setorientation() und setgravity() Views, die im Layout enthalten sein sollen erzeugen, evtl. private Variablen für den Zugriff auf die Views definieren Layout-Einstellungen für die Views erzeugen, z.b. mittels LinearLayout.LayoutParams Views dem Layout-Objekt hinzufügen: addview() Entwicklung mobiler Anwendungen Europäische Fachhochschule Brühl, 3. Quartal

10 Hinzufügen und Entfernen von Views zu einer ViewGroup Siehe android.view.viewgroup: public void addview (View child, int index) Adds a child view. If no layout parameters are already set on the child, the default parameters for this ViewGroup are set on the child. public void addview (View child, int width, int height) Adds a child view with this ViewGroup s default layout parameters and the specified width and height. public void addview (View child, ViewGroup.LayoutParams params) Adds a child view with the specified layout parameters. Entwicklung mobiler Anwendungen Europäische Fachhochschule Brühl, 3. Quartal

11 public void addview (View child, int index, ViewGroup.LayoutParams params) Adds a child view with the specified layout parameters. public void addview (View child) Adds a child view. If no layout parameters are already set on the child, the default parameters for this ViewGroup are set on the child. Entfernen von Views aus einer ViewGroup: public void removeallviews () Call this method to remove all child views from the ViewGroup. public void removeview (View view) Entwicklung mobiler Anwendungen Europäische Fachhochschule Brühl, 3. Quartal

12 public void removeviewat (int index) Removes the view at the specified position in the group. public void removeviews (int start, int count) Removes the specified range of views from the group. Entwicklung mobiler Anwendungen Europäische Fachhochschule Brühl, 3. Quartal

13 Layout-Parameter Allgemeine Klasse für Layout-Parameter: ViewGroup.LayoutParams Parameter hier: width und height, entsprechend den Attributen layout width und layout height Spezialisierte Unterklassen von ViewGroup.LayoutParams für Unterklassen von ViewGroup Beispiel: LinearLayout.LayoutParams für LinearLayout Entwicklung mobiler Anwendungen Europäische Fachhochschule Brühl, 3. Quartal

14 LinearLayout.LayoutParams Parameter originär: gravity und weight Parameter abgeleitet von ViewGroup.MarginLayoutParams: bottommargin, leftmargin, rightmargin und topmargin Parameter abgeleitet von ViewGroup.LayoutParams: height, width, layoutanimationparameters Entwicklung mobiler Anwendungen Europäische Fachhochschule Brühl, 3. Quartal

15 XML-basierte Layout-Klassen Layout-Definition mit XML in res/layout/meinlayout.xml, Wurzelelement z.b. LinearLayout Klasse MeinLayout ableiten von Klasse des Wurzelelementes aus meinlayout.xml, also z.b. LinearLayout Für MeinLayout Konstruktoren implementieren und in den Konstruktoren ein Layout-Inflating durchführen. Wirkungsweise des Layout-Inflating: Die Layout-Definition wird gelesen, zugehöriger Objektbaum wird angelegt, idealerweise mit aktuellem Objekt als Wurzel. Entwicklung mobiler Anwendungen Europäische Fachhochschule Brühl, 3. Quartal

16 Wenn Referenzen auf enthaltene Views erforderlich sind: findviewbyid() Entwicklung mobiler Anwendungen Europäische Fachhochschule Brühl, 3. Quartal

17 Layout-Inflating Referenz auf LayoutInflater ermitteln: LayoutInflater li = (LayoutInflater)getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE); Inflating durchführen: li.inflate(r.layout.meinlayout, this, true); public View inflate(int res, ViewGroup root, boolean attachtoroot) res: ID for an XML layout resource to load (e.g., R.layout.main page) Entwicklung mobiler Anwendungen Europäische Fachhochschule Brühl, 3. Quartal

18 root: Optional view to be the parent of the generated hierarchy (if attachtoroot is true), or else simply an object that provides a set of LayoutParams values for root of the returned hierarchy (if attachtoroot is false.) attachtoroot: Whether the inflated hierarchy should be attached to the root parameter? If false, root is only used to create the correct subclass of LayoutParams for the root view in the XML. Returns: The root View of the inflated hierarchy. If root was supplied and attachtoroot is true, this is root; otherwise it is the root of the inflated XML file. Entwicklung mobiler Anwendungen Europäische Fachhochschule Brühl, 3. Quartal

19 Beispiel: Eigene Layout-Klassen Beispiel Zwei Layout-Klassen, jeweils bestehend aus fünf horizontal angeordneten Buttons: Layout-Klasse ButtonField nutzt Layout- Inflating, ButtonField2 definiert das Layout im Quelltext. Main-Layout main.xml enthält je eine Instanz der definierten Layout-Klassen. Siehe Homepage Entwicklung mobiler Anwendungen Europäische Fachhochschule Brühl, 3. Quartal

20 Definition von Views mit neuen Darstellungsmöglichkeiten Klasse ableiten von android.view.view Konstruktoren implementieren und Konstruktoren der Oberklasse aufrufen (vgl. Folie 159) Methoden, die überschreiben werden müssen: protected void onmeasure (int widthmeasurespec, int heightmeasurespec) protected void ondraw (Canvas canvas) Entwicklung mobiler Anwendungen Europäische Fachhochschule Brühl, 3. Quartal

21 Größenberechnung Standardgröße für eine View: 100 mal 100 Pixel Soll die selbstdefinierte View eine andere Größe haben, muss onmeasure() überschrieben werden. Zweck von onmeasure(): Das die View umgebende Layout-Objekt fragt bei der Berechnung des Layouts an, wieviel Platz die View im Layout einnehmen soll. Setzen der Größe mittels: protected final void setmeasureddimension (int measuredwidth, int measuredheight) Entwicklung mobiler Anwendungen Europäische Fachhochschule Brühl, 3. Quartal

22 Wenn onmeasure() überschrieben wird, muss stets ein Aufruf von setmeasureddimension() erfolgen! Ansonsten: IllegalStateException Die Parameter von onmeasure() müssen zunächst decodiert werden, z.b.: int mode = MeasureSpec.getMode(measureSpec); int width = MeasureSpec.getSize(measureSpec); Mögliche Werte für mode (siehe View.measureSpec): EXACT: Das umgebende Layout-Objekt stellt der View exakt die übergebene Größe bereit. AT MOST: Das umgebende Layout-Objekt fragt nach der Größe der darzustellenden View. Die übergebene Größe ist dabei eine maximale Größe für die View. Entwicklung mobiler Anwendungen Europäische Fachhochschule Brühl, 3. Quartal

23 UNSPECIFIED: Das umgebende Layout-Objekt hat keine Restriktionen für die Größe der View festgelegt. Die Grenzen sollten als strikt betrachtet werden. Durch eine geeignete Layout-Definition kann man dafür sorgen, dass ausreichend Platz zur Verfügung steht. Entwicklung mobiler Anwendungen Europäische Fachhochschule Brühl, 3. Quartal

24 Zeichnen einer View Die Darstellung einer View erfolgt durch Überschreiben der Methode: protected void ondraw (Canvas canvas) Canvas stellt eine Fläche (Leinwand) dar, auf die die View gezeichnet werden kann. Das Zeichnen geschieht mit Hilfe von Instanzmethoden der Klasse Canvas. Zum Zeichnen benötigen wir i.d.r. zusätzlich ein Paint-Objekt. Dieses beeinflusst die Art der Zeichnung (z.b. die Linienstärke). Entwicklung mobiler Anwendungen Europäische Fachhochschule Brühl, 3. Quartal

25 Drawables sind Objekte, die direkt auf eine Leinwand platziert werden können (z.b. Grafiken) Entwicklung mobiler Anwendungen Europäische Fachhochschule Brühl, 3. Quartal

26 Methoden zum Zeichnen Eine Auswahl (siehe android.graphics.canvas): public void drawcolor (int color) public void drawargb (int a, int r, int g, int b) public void drawrgb (int r, int g, int b) Ausfüllen der Leinwand mit einer einzelnen Farbe public void drawarc (RectF oval, float startangle, float sweepangle, boolean usecenter, Paint paint) Zeichnet einen Kreisbogen innerhalb eines Rechtecks. Entwicklung mobiler Anwendungen Europäische Fachhochschule Brühl, 3. Quartal

27 public void drawbitmap (Bitmap bitmap, float left, float top, Paint paint) Zeichnet die Bitmap an die angegebene Stelle. public void drawcircle (float cx, float cy, float radius, Paint paint) Zeichnet einen Kreis. public void drawline (float startx, float starty, float stopx, float stopy, Paint paint) public void drawlines (float[] pts, Paint paint) Zeichnet eine bzw. mehrere Strecken. public void drawoval (RectF oval, Paint paint) Entwicklung mobiler Anwendungen Europäische Fachhochschule Brühl, 3. Quartal

28 Zeichnet eine Ellipse. public void drawpath (Path path, Paint paint) Mehrere Primitive in einem Path-Objekt, hier auch quadratische, kubische Splines möglich. public void drawrect (float left, float top, float right, float bottom, Paint paint) Zeichnet ein Rechteck. public void drawroundrect (RectF rect, float rx, float ry, Paint paint) Rechteck mit abgerundeten Ecken public void drawtext (String text, float x, float y, Paint paint) Entwicklung mobiler Anwendungen Europäische Fachhochschule Brühl, 3. Quartal

29 Zeichnet einen String auf die Leinwand. public void drawtextonpath (String text, Path path, float hoffset, float voffset, Paint paint) Zeichnet einen Text entlang eines Path-Objekts Entwicklung mobiler Anwendungen Europäische Fachhochschule Brühl, 3. Quartal

30 Paint Ein Paint-Objekt legt für das Zeichnen fest: Farbe mittels setcolor(int color) Siehe Klasse android.graphics.color zum Erzeugen von Farben, z.b. int cyan = Color.rgb(0,255,255); Style mittels setstyle(paint.style style) Werte für Paint.Style: FILL: Geometry and text drawn with this style will be filled, ignoring all stroke-related settings in the paint. Entwicklung mobiler Anwendungen Europäische Fachhochschule Brühl, 3. Quartal

31 FILL AND STROKE: Geometry and text drawn with this style will be both filled and stroked at the same time, respecting the stroke-related fields on the paint. STROKE: Geometry and text drawn with this style will be stroked, respecting the stroke-related fields on the paint. Font: z.b. settypeface(typeface typeface) und settextsize(float textsize) Effekte: z.b. Antialiasing Entwicklung mobiler Anwendungen Europäische Fachhochschule Brühl, 3. Quartal

32 Sonstiges Erzwingen des Neuzeichnens: Methode invalidate() einer View Tatsächliche Größe erfragen in ondraw(): getmeasuredheight() und getmeasuredwidth() Empfehlung: Paint-Objekte nur einmal anlegen MVC-Muster verwenden Entwicklung mobiler Anwendungen Europäische Fachhochschule Brühl, 3. Quartal

33 Beispiel: Bunte Kreise Beispiel Spezialisierte View zur Anzeige einer Menge von bunten Kreisen. Siehe Homepage Entwicklung mobiler Anwendungen Europäische Fachhochschule Brühl, 3. Quartal