Montag, 18. November 2013

Android: Layouting

Heute möchte etwas mehr auf das Thema Layouting für Android Apps eingehen und insbesondere die Verwendung des TableLayouts zeigen, mit dem sich schon eine Menge machen lässt.
In den vorigen beiden Posts haben wir eine erste Android Anwendung erstellt und darin Steuerelemente mit einem LinearLayout untereinander angeordnet.
Mit einem TableLayout lassen sich, wie der Name schon sagt, diese in Tabellenform anordnen, sodass quasi beliebige Positionierungen möglich sind.
Zuerst werde ich die Erstellung des Layouts per AXML Datei beschreiben, wie im vorigen Post erklärt, und am Ende den C# Code zeigen, welcher zum gleichen Ergebnis führt.
In der Datei "Main.axml" ändern wir zuerst das Layout von Linear zu Table:

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

Ein TableLayout besteht aus TableRows (Zeilen). In jeder Zeile können wir Steuerelemente platzieren, welche dann nebeneinander angeordnet werden.
Folgendermaßen fügen wir dem Layout eine neue Zeile hinzu und dieser ein Textview Steuerelement:

<TableRow>
    <TextView
        android:text="Textview1"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textView1" />
</TableRow>

Durch Hinzufügen einer leeren TableRow können wir einen vertikalen Abstand einfügen. Darunter legen wir eine neue Zeile mit einem Button und einer Textview an:

<TableRow>
</TableRow>
<TableRow>
    <Button
        android:id="@+id/button1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Button1" />
    <TextView
        android:text="Textview2"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textView2" />
</TableRow>

Das entstandene Layout sieht so aus:










Die einzelnen Tabellenzellen passen sich also von der horizontalen Ausrichtung und Größe her an, das heißt, die Zelle, die Button1 beinhaltet, hat die gleiche Größe wie die Zelle von Textview1. Wird diese z.B. größer weil sich der enthaltene Text verlängert, wird auch die Zelle von Button1 größer, Textview2 schiebt sich nach rechts.
Möchte man ein davon losgelöstes Steuerelement erstellen, zum Beispiel eine Überschrift, welche nicht die Größe der folgenden Zellen beeinflusst, deklariert man dieses ohne umfassende TableRow.
Hier der komplette axml Code, mit einer weiteren Textview, welches eine lange Überschrift am oberen Bildschirmrand enthält:

<?xml version="1.0" encoding="utf-8"?>
<TableLayout 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="Looooong Headline"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textView3" />
    <TableRow>
        <TextView
            android:text="Textview1"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/textView1" />
    </TableRow>
    <TableRow>
    </TableRow>
    <TableRow>
        <Button
            android:id="@+id/button1"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="Button1" />
        <TextView
            android:text="Textview2"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/textView2" />
    </TableRow>
</TableLayout>

Nun noch wie angekündigt, der Inhalt der Datei "MainActivity.cs", welcher alternativ zur oben genannten Möglichkeit der Definition per axml das gleiche Resultat erzeugt:

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

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

               var Layout = new TableLayout (this);
               Layout.Orientation = Orientation.Vertical;

               var Textview3 = new TextView (this);
               Textview3.Text = "Looooong Headline";
               Layout.AddView (Textview3);

               TableRow TableRow1 = new TableRow (this);
               var Textview1 = new TextView (this);
               Textview1.Text = "Textview1";
               TableRow1.AddView (Textview1);
               Layout.AddView (TableRow1);

               TableRow TableRow2 = new TableRow (this);
               Layout.AddView (TableRow2);

               TableRow TableRow3 = new TableRow (this);
               var Button1 = new Button (this);
               Button1.Text = "Button1";
               var Textview2 = new TextView (this);
               Textview2.Text = "Textview2";
               TableRow3.AddView (Button1);
               TableRow3.AddView (Textview2);
               Layout.AddView (TableRow3);

               SetContentView (Layout);
          }
     }
}


Keine Kommentare:

Kommentar veröffentlichen