Sonntag, 17. November 2013

Android: Layout per AXML definieren

Im vorigen Post habe ich die Erstellung einer ersten Android App beschrieben. Dort haben wir 2 Steuerelemente auf dem App Fenster angelegt, ein Textview und einen Button, und diese mittels einem LinearLayout untereinander angeordnet. Die Erzeugung der Steuerelemente und ihre Platzierung haben wir im Code der OnCreate() Funktion vorgenommen.
Doch wie auch bei WPF Anwendungen, kann bei Android Apps das Layout über eine auf XML basierende Datei festgelegt werden. Im heutigen Post möchte ich darüber schreiben und das Layout der App aus dem vorigen Post mit diesem Prinzip anlegen.
Xamarin speichert das Layout als sogenannte axml Datei. Bei Anlegen des Projekts wird für die Hauptactivity direkt eine dazugehörige Layout Datei angelegt. Diese findet sich bei Expansion des Ordners "Resources" auf der linken Seite, und dann "layout" unter dem Namen "main.axml".
Klickt man diese an, öffnet sich die Datei, entweder können nun wie im Visual Studio Steuerelemente per Drag & Drop auf das Fenster gezogen werden oder nach Klick auf "Quelle" per AXML Code angelegt werden. Ich werde hier die zweite Variante beschreiben.
Die ersten Zeilen der Datei sehen so aus:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">

Hier wird unter anderem die verwendete XML Version klassifiziert, und, für uns wichtig, schon der Typ des Layouts festgelegt, nämlich das von uns gewünschte LinearLayout.
Wir fügen nun mit ein paar Zeilen XML Code, welcher selbsterklärend sein sollte, die Steuerelemente hinzu:

<TextView
android:text="Hello Android"
    android:textAppearance="?android:attr/textAppearanceMedium"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/TextView1" />
<Button
    android:id="@+id/Button1"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="Click me" />

Nach einem Klick auf "Inhalt", wird eine Vorschau der Programmoberfläche angezeigt:
Der komplette XML Code der Datei Main.axml lautet dann:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <TextView
     android:text="Hello Android"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/TextView1" />
    <Button
        android:id="@+id/Button1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Click me" />
</LinearLayout>

Zurück im C# Code der Datei "MainActivity.cs" müssen wir dem Programm nun zuerst mitteilen, das Layout aus den Ressourcen zu nehmen, welches wir mit
SetContentView (Resource.Layout.Main);

erledigen. Über Resource.Layout greifen wir auf den entsprechenden Ressourcenordner zu, Main(.axml) ist der Name unserer gewünschten Datei.
Um auf die Steuerelemente zugreifen zu können, müssen wir sie anhand ihrer ID referenzieren:

Button Button1 = FindViewById<button> (Resource.Id.Button1);
TextView TextView1 = FindViewById (Resource.Id.TextView1);

Der restliche Code zur Hinzufügung des Ereignishandlers ist natürlich gleich, der komplette Code der Datei "MainActivity.cs" lautet:

using System;
using Android.App;
using Android.Content;
using Android.Runtime;
using Android.Views;
using Android.Widget;
using Android.OS;

namespace FirstApplicationAXML
{
     [Activity (Label = "FirstApplicationAXML", MainLauncher = true)]
     public class MainActivity : Activity
     {
          protected override void OnCreate (Bundle bundle)
          {
               base.OnCreate (bundle);

               SetContentView (Resource.Layout.Main);

               Button Button1 = FindViewById<button> (Resource.Id.Button1);
               TextView TextView1 = FindViewById (Resource.Id.TextView1);

               Button1.Click += delegate {
                    TextView1.Text = "Button clicked";
               };
          }
     }
}

Kommentare:

  1. Hi Oliver,
    erstmal danke für deine Tutorials immer wieder bringen die mich weiter wenn ich nicht selbst weiterkommen kann.
    Habe hier einen kleinen Fehler endeckt:
    TextView TextView1 = FindViewById(Resource.Id.TextView1);

    hier fehlt das element"
    so wäre das wieder In Ordnung
    TextView TextView1 = FindViewById(Resource.Id.TextView1);

    Mit freundlichen Grüßen
    Eddy

    AntwortenLöschen
  2. Ich meine das TextView in den < >

    AntwortenLöschen