Dienstag, 19. November 2013

Android: Grafiken

Bei der Android App Programmierung gibt es im wesentlichen zwei Möglichkeiten, um 2D Grafiken zu erzeugen: Dies geht zum einen mit sogenannten DrawableResources oder durch die Verwendung eines Canvas Objekts.
DrawableResources sind geometrische Formen, die in einer XML Datei definiert sind und dann auf der App angezeigt werden können.
Auf ein Canvas Objekt kann dagegen beliebig gezeichnet werden, ähnlich wie in System.Graphics.

Zuerst ein kurzes Beispiel zu DrawableResources: Wir klicken rechts auf den Order Resources - Drawable und wählen Datei hinzufügen - XML Datei aus. In dieser fügen wir dann den folgenden XML Code ein:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="line">
    <stroke android:width="1dp" android:color="#FFFFFF"/>
    <size android:height="50dp" />
</shape>

Wir definieren also, dass die Datei  eine Figur (shape) beschreibt, und legen fest, dass wir eine Linie darstellen möchten. Diese soll 1dp breit sein und 50dp lang, außerdem schwarze Farbe haben. Dp steht für Density-independent Pixels und ist eine Maßeinheit, welche sich der physikalischen Bildschirmgröße anpasst. Die definierte Figur kann dann z.B. als Hintergrund für ein Steuerelement verwendet werden (bei mir heißt die XML Datei Line.xml):

var TxtLine = new TextView (this);
TxtLine.SetBackgroundResource(Resource.Drawable.Line);

Natürlich stehen noch weitere Figuren außer Linie zur Verfügung, auf dieser Seite von Xamarin gibt es ein weiteres Beispiel.

Nun möchte ich mich etwas mehr der zweiten vorgestellten Methode widmen. Eine oft benutze Technik ist die Erstellung einer eigenen View Klasse, in der das Zeichnen erledigt wird, und die dann als Layout für die Anwendung festgelegt wird.
Ich werde hier das Zeichnen einer Ellipse zeigen, aufbauend auf diesem Tutorial von Xamarin.
Ich poste einfach mal den kompletten Code der Klasse:

     public class ViewWithOval : View
     {
          private readonly ShapeDrawable Oval;

          public ViewWithOval(Context context) : base (context)
          {
               var paint = new Paint();
               paint.SetARGB(255, 0, 255, 0);

               Oval = new ShapeDrawable(new OvalShape());
               Oval.Paint.Set(paint);

               Oval.SetBounds(0, 0, 500, 500);
          }

          protected override void OnDraw(Canvas canvas)
          {
               Oval.Draw(canvas);
          }
     }

Wir legen also eine Klasse namens ViewWithOval an, und leiten sie von der Basisklasse View ab. Darin legen wir eine Variable vom Typ ShapeDrawable an, in welcher wir eine beliebige Zeichenfigur speichern können. Im Konstruktor der Klasse legen wir fest, dass es eine Ellipse werden soll. Außerdem setzen wir die Farbe dieser auf Grün. Mittels SetBounds() legen wir den Zeichenbereich fest, welcher von der Ellipse voll ausgenutzt werden wird. Der quadratische Bereich hier führt also zum Zeichnen eines Kreises.
Wichtig ist die Überladung der Funktion OnDraw(), welche beim Neuzeichnen der Klasse aufgerufen wird, hier sorgen wir dafür, dass die Figur gezeichnet wird.
Hier könnten zum Beispiel auch andere Objekte gezeichnet werden, z.B. über canvas.DrawText("Ich zeichne einen String", ...) eine Zeichenfolge.
In unserer MainActivity Klasse müssen wir nun nur noch das Layout auf diese Klasse festlegen, was wir in der OnCreate() Funktion folgendem Befehl machen:

SetContentView (new ViewWithOval(this));

Das Ergebnis sieht auf meinem Handy so aus:


Keine Kommentare:

Kommentar veröffentlichen