Vorherige

Nächste

Erstellen einer Benutzeroberfläche für eine Aktivität

Abgeschlossen

In der vorherigen Einheit haben Sie sich mit den Grundlagen der Erstellung einer Xamarin.Android-App beschäftigt. Hier geht es nun um das Erstellen einer Benutzeroberfläche für eine Xamarin.Android-App. Diese Informationen sollen Ihnen helfen, zu entscheiden, wie viel Wissen Ihr Entwicklungsteam über Layoutkonzepte für eine Android-Benutzeroberfläche benötigt.

Was ist eine Aktivität?

Aktivitäten stellen die Basis von Android-Anwendungen dar. Sie kombiniert die Benutzeroberfläche und den Code, der erforderlich ist, damit Benutzer mit Ihrer App interagieren können.

Mit einer Aktivität wird eine Benutzeroberfläche für eine einzelne Benutzeraufgabe in Ihrer Anwendung definiert. Im Folgenden sind einige Beispiele für Aufgaben aufgeführt:

• Neuen Kontakt hinzufügen
• Alle Kontakte auflisten
• Eine Telefonnummer wählen
• Benachrichtigung festlegen

Sie können sich eine Aktivität als Seite oder Anzeige in einer App vorstellen, auf der der Benutzer eine einzelne Aufgabe ausführt.

Angenommen, wir haben eine App mit einer Anzeige, auf der der Benutzer den Wert von Pi berechnen kann. Der Benutzer führt hier eine einzelne Aufgabe aus. Diese Aufgabe eignet sich ideal für die Implementierung in einer Aktivität.

Hinweis

Pi ist das Verhältnis des Umfangs eines Kreises zu seinem Durchmesser (Pi = Umfang ÷ Durchmesser).

Im Folgenden wird ein Beispiel für die Benutzeroberfläche der App veranschaulicht:

Mit der App kann der Benutzer eingeben, wie viele Dezimalstellen von Pi berechnet werden sollen. Anschließend startet der Benutzer die Berechnung durch Tippen auf eine Schaltfläche. Das Verhalten der Benutzeroberfläche wird dann im Code verwaltet.

Im Folgenden sehen Sie ein Beispiel für Code, der ausgeführt wird, wenn der Benutzer auf die Schaltfläche zum Berechnen tippt:

void OnClick(object sender, EventArgs e)
{
    int digits = int.Parse(input.Text);
    string result = CalculatePi(digits);
    output.Text = result;
}

Die Kombination von Benutzeroberfläche und Verhalten ist ein wesentliches Merkmal einer Aktivität. Einen XML-Parser (Extensible Markup Language), eine Datenstruktur oder einen Teil Ihres Datenmodells würden Sie beispielsweise nicht als Aktivität implementieren. Diese Elemente bieten keine Benutzeroberfläche.

Der Umfang einer Aktivität kann variieren. Sie ist jedoch in der Regel auf eine einzige, zusammenhängende Aufgabe beschränkt, die die App für den Benutzer bereitstellt.

Beispiele für Aktivitäten

Angenommen, Sie haben sich entschieden, eine E-Mail-App zu entwickeln. Der Benutzer könnte damit z. B. folgende Aufgaben ausführen:

• Erstellen einer neuen E-Mail
• Durchsuchen einer Liste empfangener E-Mails
• Lesen einer E-Mail
• Hinzufügen eines neuen Kontos
• Bearbeiten eines Kontos
• Bearbeiten von Benutzereinstellungen

Alle diese Aufgaben sind vermutlich sinnvolle Aktivitäten für Ihre App. Für jede dieser Aufgaben ist eine Benutzeroberfläche und ein Verhalten erforderlich.

Grundlegendes zu Android-Steuerelementen und zur Hierarchie von Ansichten

Android stellt für Benutzeroberflächen viele Steuerelemente bereit, mit denen Sie Aktivitäten erstellen können. Im Folgenden finden Sie die am häufigsten verwendeten Steuerelemente unter Android im direkten Vergleich zu den Steuerelementen unter Windows und iOS. In der Tabelle sind die Steuerelemente, die Sie für Ihre Beispiel-App verwenden, durch Fettformatierung hervorgehoben:

Windows	iOS	Android
Schaltfläche	UIButton	Schaltfläche
CheckBox	UISwitch	CheckBox
Kombinationsfeld	UIPickerView	Spinner
Image	UIImageView	ImageView
Bezeichnung	UILabel	TextView
ListBox	UITableView	ListView
ProgressBar	UIProgressView	ProgressBar
Schieberegler	UISlider	Schieberegler
TextBox	UITextField	EditText

In der Beispiel-App zur Berechnung von Pi führt Ihr Benutzer die folgenden Aufgaben aus:

• Eingeben der Anzahl der zu berechnenden Dezimalstellen.
• Tippen auf eine Schaltfläche, um die Berechnung zu starten.

Wenn auf die Schaltfläche getippt wird, berechnet die App den Wert von Pi auf die angegebene Anzahl von Dezimalstellen genau. Anschließend wird der errechnete Wert angezeigt.

Sie verwenden folgende Steuerelemente:

• Button zum Anzeigen einer interaktiven Schaltfläche zum Aktivieren eines Features.
• TextView, wobei es sich um schreibgeschützten Text handelt.
• EditText, ein Bearbeitungssteuerelement, das die Dateneingabe auf dem Bildschirm oder über eine physische Tastatur ermöglicht.

Was ist eine View?

Eine Ansicht (View) ist der grundlegender Baustein einer Android-Benutzeroberfläche.

Ansichten setzen sich aus einer visuellen Komponente und aus programmiertem Verhalten zusammen. Beispiel:

• TextView: Benutzeroberfläche zur Anzeige des Werts der Text-Eigenschaft.
• EditText: Benutzeroberfläche, auf der der Benutzer z. B. einen Wert für die Text-Eigenschaft oder ein TextChanged-Ereignis eingeben kann.
• Button: Benutzeroberfläche, die den Wert der Text-Eigenschaft, ein Click-Ereignis usw. anzeigt.

Die Beschreibung einer Ansicht als visuelle Komponente und Code erinnert an eine Aktivität. Doch obwohl die Konzepte ähnlich sind, unterscheiden sie sich in ihrem Umfang. Eine Aktivität enthält mehr Teile als eine Ansicht.

Hinweis

Unter Android wird die Benennung Ansicht allgemein für das Konzept verwendet, das hier beschrieben wird. Allerdings wird gelegentlich auch das Wort Widget verwendet. Widget ist der Name des Namespace, in dem viele der Views definiert sind. Der Hauptgrund, weshalb wir uns hier entscheiden, die Benennung Ansicht zu verwenden, ist der, dass Android die Benennung Widget auch verwendet, um Miniatur-Apps zu beschreiben, die sich möglicherweise auf Ihrem Startbildschirm befinden. Wegen dieser möglichen Verwechslung verwenden wir hier den Begriff Ansicht.

Übersicht: Ansichtshierarchie

Die Benutzeroberflächenelemente, die Sie einer Anzeige hinzufügen, sind in einer Vererbungshierarchie mit der View-Klasse am Stamm angeordnet.

Object is the parent of View. View is the parent of both "Controls like button, text box, etc." and ViewGroup. ViewGroup is the parent of "Collection views like lists and grids" and "Layout panels that size and position their children".

Eigenständige Elemente wie Button erben von View. Elemente mit mehreren Ansichten werden von einer ViewGroup abgeleitet. Dadurch können Sammlungen von untergeordneten Ansichten wie Listen oder Raster verwaltet werden. Android bietet außerdem Möglichkeiten, die Steuerelemente mithilfe von Panels in Gruppen zusammenzufassen, die von ViewGroup abgeleitet werden. Diese Ansichten werden als Layoutpanels bezeichnet.

Was ist ein Layoutpanel?

Layoutpanels verwalten Sammlungen untergeordneter Ansichten. Seine Aufgabe besteht darin, Größe und Position jedes untergeordneten Elements zu berechnen.

Untergeordnete Panels können eine beliebige Layoutgröße angeben. Die meisten Panels versuchen, die Wünsche ihrer untergeordneten Panels zu erfüllen. Sie können diese aber auch ignorieren, wenn nicht genügend Speicherplatz vorhanden ist, der der gewünschten Größe entspricht.

LinearLayout

LinearLayout ist das einfachste Panel. Sie können entweder eine vertikale oder eine horizontale Ausrichtung angeben. Dann werden die untergeordneten Panels in einer einzelnen Spalte oder Zeile angezeigt.

GridLayout

Bei einem GridLayout-Panel wird ein Raster aus Zeilen und Spalten erstellt, und die untergeordneten Panels werden in den Zellen positioniert.

RelativeLayout

Ein RelativeLayout-Panel erfordert, dass Sie die Beziehungen zwischen den untergeordneten Panels angeben. Sie können z. B. Folgendes festlegen: „Dieses untergeordnete Panel soll links neben diesem anderen platziert werden“ oder „Dieses untergeordnete Panel soll auf den rechten Rand des Bildschirms ausgerichtet werden“. „RelativeLayout“ ist ein leistungsfähiges und flexibles Panel und eignet sich hervorragend als Stammpanel für eine Benutzeroberfläche.

In unserem Beispiel verwenden wir LinearLayout. Dies eignet sich gut für den Einstieg, weil es sich dabei um die einfachste Panelversion handelt. Außerdem ist es das am häufigsten verwendete Panel in Fällen, in denen Sie eine einfache Benutzeroberfläche wie diejenige haben, die wir erstellen werden.

Panels können auch geschachtelt werden. So kann beispielsweise eine der Zeilen eines vertikalen LinearLayout-Panels eine horizontale LinearLayout-Zeile oder eine RelativeLayout-Zeile sein.

Was ist eine Layoutdatei?

Sie können Ihre Benutzeroberfläche mit XML-Code definieren. Die XML-Elemente sind die Namen der View-Klasse, z. B. Button und TextView.

Die Datei mit dem XML-Code wird als Layoutdatei bezeichnet. In Xamarin.Android haben Layoutdateien die Erweiterung .axml (Android XML). Der folgende XML-Codeausschnitt zeigt die grundlegenden Strukturen der Elemente in der Layoutdatei:

<LinearLayout ... >
    <TextView ... />
    <EditText ... />
    <Button ... />
    <TextView ... />
</LinearLayout ... >

Zwei Dinge sind hervorzuheben:

1. Untergeordnete Ansichten sind in ein Layoutpanel eingebettet. In diesem Fall hat das Layoutpanel die Struktur LinearLayout.

2. Die Reihenfolge der untergeordneten Panels im Layoutpanel bestimmt die Reihenfolge, in der die Elemente angezeigt werden.

In der Regel sollten Sie ein Layoutpanel als Stammelement verwenden und dessen untergeordnete Panels darin einbetten.

Was sind Ressourcen?

Bei Android sind Ressourcen Dateien ohne Code, die Sie in Ihre Anwendung einbinden.

Xamarin.Android erstellt einen besonderen Ordner mit dem Namen Resources, in dem die Ressourcen Ihrer App gespeichert werden. Ressourcen können viele Arten von Elementen enthalten. Nachfolgend werden die häufigsten aufgeführt:

• Bilder
• Layoutdateien
• Für Text und Lokalisierung verwendete Zeichenfolgen
• Stile

Übersicht: Layoutdateien

Android betrachtet die Layoutdateien für die Benutzeroberfläche als Ressourcen, weshalb sie in einem Ordner namens layout unter Resources abgelegt werden müssen.

Der Ordner Resources enthält mehrere Dateitypen:

• drawable: Bilddateien.
• mipmap: Symbole in verschiedenen Größen. Der Ordnername gibt an, welche Bildschirmdichte die enthaltenen Bilder haben sollen. Mmdpi für Bildschirme mittlerer Dichte mit ca. 160 dpi, hdpi für Bildschirme mit hoher Dichte mit ca. 240 dpi usw. Stellen Sie das gleiche Bild in mehreren Größen zur Verfügung. Dann wählt Android automatisch das richtige Bild basierend auf der Bildschirmdichte des Geräts aus.
• layout: Layoutdateien für die Benutzeroberfläche.
• values: Zeichenfolgen, Farben, Stile usw. Aufgrund der Dateien im Order values müssen Sie keine Werte in Ihren Layoutdateien hartcodieren. Sie können die Werte hier definieren und anschließend in Ihren Layoutdateien suchen.

Was ist ein Benutzeroberflächen-Designer?

Xamarin bietet ein Tool an, das Benutzeroberflächen-Designer genannt wird und Sie beim Erstellen von Benutzeroberflächen unterstützt. Dieses Tool ist in Visual Studio und Visual Studio für Mac verfügbar.

Sie müssen keinen XML-Code manuell programmieren, sondern können die Ansichten aus der Toolbox per Drag & Drop auf die Designoberfläche ziehen. Anstatt Attribute in XML festzulegen, legen Sie sie in einem Eigenschaften-Editor fest. Mit dem Benutzeroberflächen-Designer sind sie viel schneller als beim manuellen Programmieren von XML-Code.

Einrichten von Ansichtsattributen

Wenn Sie eine Benutzeroberfläche in XML definieren, werden Objekte indirekt instanziiert. Wenn Sie ein <Button>-Elementtag verwenden, wird beispielsweise der Objekttyp Button zur Laufzeit erstellt.

Sie verwenden Attributtags im XML-Code, um Eigenschaftswerte für diese zugrunde liegenden Objekte festzulegen. So legt beispielsweise das „Text“-Attribut in XML die Eigenschaft Text für das Objekt fest.

Im folgenden Beispiel wird die Eigenschaft Text von TextView auf "Enter number of digits:" festgelegt:

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical">
      <TextView android:text="Enter number of digits:" ... />
      ...
</LinearLayout>

Beachten Sie, dass das XML-Attribut und die entsprechenden Klassennamen nicht immer identisch sind. Manchmal lassen sie sich richtig erraten, manchmal aber auch nicht.

Die am ehesten mit der C#-Eigenschaft TypeFace übereinstimmende Eigenschaft ist beispielsweise das XML-Attribut fontFamily. Konsultieren Sie die Android-Dokumentation, wenn Sie sich bei einem Attribut oder dessen Verwendung nicht sicher sind. Für jede View-Klasse ist in der Android-Dokumentation eine Tabelle mit den Namen alle verfügbaren XML-Attribute enthalten.

Verwenden eines Android-Namespaces

Objekte werden als Typen in Assemblys definiert. Sie müssen wissen, welche Assembly referenziert werden soll, um aus ihr zu instanziieren. Wenn Sie eine Benutzeroberfläche in XML definieren, werden Objekte indirekt instanziiert. Um Typen zu instanziieren, erfordert die Android Runtime, dass XML-Code der Benutzeroberfläche den Android-Namespace http://schemas.android.com/apk/res/android enthält. Dieser Namespace gibt die Assemblys an, in denen gängige Android-Typen für Java definiert sind. Er wird von einem xmlns:-Attribut deklariert:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical">

Gemäß Konvention wird die Zeichenfolge android dem Android-Namespace zugeordnet. Die Verwendung der Zeichenfolge android ist nur eine Konvention. Sie wird fast durchgängig eingehalten, weshalb empfohlen wird ist, diese ebenfalls zu verwenden.

Sie definieren zusätzliche Namespaces, wenn Sie Typen einbeziehen, die sich außerhalb der üblichen Android-Umgebung befinden. Es kann beispielsweise sein, dass Sie ein benutzerdefiniertes Steuerelement erstellt haben, das benutzerdefiniertes Attribute verwendet.

Formatieren von Ansichten

In der Regel müssen die Breiten und Längen von Ansichten angegeben werden. Ein Beispiel einer solchen View ist LinearLayout.

LinearLayout erfordert, dass Sie die Attribute layout_width und layout_height für jedes Element in der XML-Layoutdatei festlegen. Wenn Sie nicht beide festlegen, erfolgt zur Laufzeit eine Ausnahme.

Automatisches Anpassen der Größe von Ansichten

Android stellt zwei Werte bereit, die Sie mit layout_width und layout_height verwenden können. Diese weisen ein besonderes Verhalten auf:

• match_parent: Das Element wird an die Größe des übergeordneten Elements angepasst.
• wrap_content: Die Größe des Elements wird so angepasst, dass die zugehörigen Inhalte darin angezeigt werden können.

<LinearLayout ... >
    ...
    <TextView android:layout_width="match_parent" android:layout_height="wrap_content" ... />
    ...
</LinearLayout>

Diese beiden Werte werden häufig verwendet. Sie können mit nur diesen beiden Größenwerten in Kombination mit geschachtelten Layoutpanels komplexe Benutzeroberflächen erstellen.

Sie verwenden die automatische Größenanpassung, wenn Sie möchten, dass das übergeordnete Element eines untergeordneten Elements, normalerweise ein Layoutpanel, die Größe des untergeordneten Elements verwaltet.

Festlegen der Größe in Pixel

Sie können die Größe des untergeordneten Elements in bestimmten Einheiten festlegen, wenn das untergeordnete Element seine eigene Größe verwalten soll. Android ermöglicht Ihnen die Angabe der Größe in Pixel (px).

<Button android:layout_width="100px" ... />

Die von Android empfohlenen Vorgehensweisen sehen jedoch vor, die Verwendung von px zu vermeiden.

Was ist ein von der Dichte unabhängiges Pixel?

Ein von der Dichte unabhängiges Pixel (density-independet pixel, dp) ist eine Maßeinheit. Beim Rendern für die Anzeige verwenden Objekte, die in dp gemessen werden, die Anzahl physischer Pixel, die auf Grundlage der Pixeldichte des Bildschirms berechnet wurde.

Angenommen, Sie haben die folgende Schaltfläche auf Ihrer Benutzeroberfläche definiert:

<Button android:layout_width="100dp" ... />

Ziel ist es, dass die Schaltfläche unabhängig von der Bildschirmdichte des Geräts etwa immer den gleichen Bereich auf dem Bildschirm einnimmt. Auf einem hochauflösenden Bildschirm würden dabei mehr als 100 physische Pixel eingenommen.

Eine Schaltfläche mit einer Breite von 100 dp wird auf einem Bildschirm mit 500 dpi und einem Bildschirm mit 250 dpi etwa gleich groß angezeigt. Sie nimmt in den beiden Fällen eine unterschiedliche Anzahl physischer Pixel ein, um die erforderliche Größe zu erreichen.

Die von Android empfohlenen Vorgehensweisen sehen vor, dass Sie zum Angeben von Größen von der Dichte unabhängige Pixel verwenden.

Weiter