Die Anleitung zu Android UI Layouts

View more Tutorials:

1- Was ist Layout?

Android Layout ist eine Klasse, die die Gliederung ihrer Unter-Elementen in dem Bildschirm managet. Etwas, das ein  View (oder aus  View erben) ist, kann ein Kind von Layout sein. Alle Klasse  Layout erweiten aus der Klasse  ViewGroup (die aus  View erben), so können Sie Ihr eigene Klasse  Layout durch die Erstellung einer aus  ViewGroup erbenden Klasse erstellen.
  • Das folgende Foto bezeichnet das Erbendiagramm zwischen Interface-Elemente in Android.

2- Die Standard Layout in Android

  • Die Standard Layouts
Layout Description
LinearLayout


(Horizontal)

(Vertical)

LinearLayout is a view group that aligns all children in a single direction, vertically or horizontally.

RelativeLayout

RelativeLayout is a view group that displays child views in relative positions.

TableLayout

TableLayout is a view that groups views into rows and columns.

GridLayout

GridLayout uses a grid of infinitely-thin lines to separate its drawing area into: rows, columns, and cells. It supports both row and column spanning, which together allow a widget to occupy a rectangular range of cells that are next to each other.
FrameLayout

The FrameLayout is a placeholder on screen that you can use to display a single view.

AbsoluteLayout

AbsoluteLayout enables you to specify the exact location of its children. Arrange the children views according coordinates x, y.

  • The standard Containers:
Container Description
RadioGroup

 

ListView

 

GridView

 

ExpandableListView

 
ScrollView

 

HorizontalScrollView

 

SearchView

 

TabHost

 

VideoView

 
DialerFilter

 

3- RelativeLayout

RelativeLayout ist ein  ViewGroup , das die Unter-View in die relativen Stellen anzeigt. Die Stelle jedes View kann relativ zur gleichgeordneten View (wie links oder unter vom anderen View) oder in die Stelle relativ zum übergeordneten Bereich  RelativeLayout (wie unter, links oder mittel gegliedert) bestimmt werden.
RelativeLayout ist eine strenge Utility für die Gestaltung einer Benutzer-Interface denn es kann die eingenisten Gruppe View löschen und Ihr Hierarchie flach halten. gleichzeigtig erhöht die Leistungen. Wenn Sie einige eingenisten Gruppe  LinearLayout benutzen, können Sie es durch ein einziges  RelativeLayout ersetzen.
Sehen Sie die Interface unten, und Sie können es die Verwendung von  RelativeLayout gestalten.
  • SLIDER:

4- LinearLayout

LinearLayout ist ein  ViewGroup , die die untergeordneten  View in einer einzigen Richtung anordnet, entweder vertikal oder horizontal.

5- TableLayout

TableLayout ordnet die  View im Tabellenformat an. Insbesondere ist  TableLayout ein  ViewGroup , die eine oder mehrere  TableRow enthält. Jede  TableRow ist eine Zeile in der Tabelle, die Zellen enthält. Die untergeordnete  View können in einer Zelle oder in einer zusammengeführten Zelle aus benachbarten Zellen einer Zeile platziert werden. Im Gegensatz zur Tabelle in  HTML können Sie keine aufeinanderfolgenden Zellen in einer Spalte zusammenführen.

6- GridLayout

GridLayout benutzt ein Gitter von der unendlichen und dünnen Linien um seinen Zeichenbereich in : Zeilen, Spalten und Zellen zu unterteilen. Es unterstützt auch die Zeilen-und Spaltenspanning,d.h die benachbarten Zellen in einer größen Zellen (einem Recksteck) zusammengefügt werden können um ein View zu enthalten.
Die Größe (Size), die Ränder (Margin) und die Ausrichtung/Schwerkraft (Alignment/Gravity)
Im  GridLayout wird die Festlegung der Größe und Ränder so ähnlich wie mit  LinearLayout gemacht . Die Ausrichtung/die Schwerkraft (Alignment/gravity) funktioniert wie die Schwerkraft (gravity) in  LinearLayout und benutzt die gleichen Konstante : left, top, right, bottom, center_horizontal, center_vertical, center, fill_horizontal, fill_vertical und  fill.
Die Flexibilität (Flexibility)
Im Gegensatz zu der meisten Gittern in der anderen Toolkits verknüpft Android GridLayout die Daten mit der Zeilen oder Spalten nicht. Stattdessen wird alles, was mit der Ausrichtung und der Flexibilität zu tun hat, mit seinen Komponenten selbst verbunden.

Die Flexibilität der Spalten wird aus dem Attribut  gravity (Schwerkraft) der Komponenten innerhalb der Spalten inferiert. Wenn alle Komponenten ein  gravity definieren, die Spalte wird als flexibel betrachtet, sonst wird es als unflexibel betrachtet

Zum Beispiel:

Achtung: Wenn das Root Element nicht GridLayout ist, können Sie den Name des Tag ohne die Veränderungen ändern. Deshalb haben Sie eine Interface mit dem Root Element als GridLayout.

Die Sub Elementen bestimmen ihre Stellen in das Gitter nach dem Attribut  layout_row & layout_column:
Für  GridLayout, wenn keine Objekt die Gitterspalte noch nicht verchoben hat, ist die Breite des Gitter 0. Ähnlich wenn die Gitterzeile noch nicht durch die Objekte verschoben wird, ist die Höhe des Gitter 0.

layout_columnWeight

Im  GridLayout ist das Attribut  layout_columnWeight das Gewicht nach der Spalte (column) vom Objekt in die Zelle. Es kann sich auf die Belegung nach Spalte auswirken. Die Defaultwert ist 0.

Wenn Sie eine anderen Wert als 0 für layout_columnWeight angeben, sollen Sie die Wert layout_gravity (die Layoutschwerkraft) für das Objekt setzen. Das ist obligatorisch. Wenn die Wert layout_gravity nicht angegeben, kann das Objekt im Gitter nicht angezeigt werden:

  • Die Wert für layout_gravity in dieser Situation ist:
  • left
  • right
  • center_horizontal
  • center
  • fill_horizontal
  • fill

layout_rowSpan

layout_rowWeight

Im  GridLayout ist das Attribut  layout_rowWeight das Gewicht nach der Zeile (row) des Objekt in die Zelle. Es kann sich auf die Belegung nach der Zeile auswirken. Die Defaultwert ist 0.

layout_columnSpan

OK, können Sie  GridLayout verwenden um die Interface wie folgend zu gestalten?

7- FrameLayout

FrameLayout ist ein einfaches Layout. Es kann eine oder mehrere untergeordnete View enthalten, die sich überlappen können. Daher wird das Attribut android:layout_gravity verwenden um die untergeordneten View zu positionieren.
Verwenden Sie das Attribut  android:layout_gravity um die Position von  button anzupassen.

View more Tutorials: