Die Anleitung zu Android UI Layouts

View more Tutorials:

1- What is 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- The standard Layouts 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 , das die untergeordneten Elemente in einer einzigen Richtung gliedert, vertikal oder horizontal. Sie können seine Richtung nach dem Attribut :  android:orientation ​​​​​​​festlegen.
Die Attributes:
Das Attribut Die Bezeichnung
android:orientation Das Attribut regelt die Gliederungsrichtung von Layout, Sie benutzen "horizontal" für die Linie und "vertical" für die Spalte. Default ist es "horizontal".

Zum Beispiel:

Achtung: Wenn das Root-Element der Interface nicht  LinearLayout ist, können Sie den Name des Tag ohne die anderen Veränderungen ändern. So werden Sie eine Interface mit dem Root-Element als  LinearLayout ​​​​​​​haben.
Die SubView in  LinearLayout haben ein wichtiges Attribut: android:layout_weight.

android:layout_weight

Das Attribut wiest eine  "wichtige " Wert für  View zu. Es bestimmt, wieviele Raum im Bildschirm  View besetzen wird. Eine größere Gewicht-wert erlaubt es zu erweitern,um den restlichen Raum im Vater  View zu erfüllen. Das Sub View kann eine Gewichtwert festlegen und dann der restlichen Raum im  ViewGroup wird zu den Sub  View nach ihrer deklarierten Gewicht zugewiesen. Das Defaultgewicht ist 0.
Die Sub-Elementen, die das Gewicht haben, werden den restlichen Raum vom  LinearLayout nach ihrem Gewicht erfüllen.
Für  LinearLayout (Vertical) werden die Sub-Elemente, die das Attribut  android:width=fill_parent haben, die Breite von  LinearLayout (Vertical) erfüllen .
Die Sub-Elemente können die bestimmten Wert für  width, height auch setzen:
Der Unterschied von  gravity und  layout_gravity:
  • android:layout_gravity setzt die Gravitation von View oder Layout in seinem Vater Element.
  • android:gravity setzt die Gravitation für die Inhalt von View , die es benutzt (z.B text). 

5- TableLayout

TableLayout ist  ViewGroup , das die Sub-Elementen in die Reihe und die Spalte anzeigt
TableLayout stellt seine Sub-Komponenten in die Zeilen und Spalten. Der Enthalter  TableLayout zeigt die Ränder (border) für die Zeilen, die Spalten oder seine Zelle nicht an. Die Tabelle wird viele Spalten, viele Zeilen mit vielen Zellen haben. Eine Tabelle kann die leeren Zellen haben aber die Zellen können vertikal wie im HTML nicht spannen (span).
  • TableRow
Die Objekte  TableRow sind die Sub View von einem  TableLayout (jedes  TableRow definiert eine einzige Zeile in die Tabelle). Jede Zeile hat 0 oder viele Zelle, von denen jede Zeile irgendein Typ vom  View enthaltet. Deshal kann eine Zeile einige Typen vom  View, wie  ImageView oder  TextView. Eine Zeile kann  ViewGroup enthalten (zum Beispiel, Sie können ein anderes  TableLayout in einer Zelle verschachteln).

Zum Beispiel:

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

TableRow wird automatisch erstellt (wenn diese Reihe ist nicht vorhanden) wenn Sie die Sub View in die Tabelle-zelle ziehen und ablegen.
Die Zelle können horizontal spannen (span), aber nicht vertikal. Es gibt vielleicht die Zellen, die keine Sub View enthalten.
Sie können die bestimmte Größe für die  View in die Zelle festlegen. Es wird die Größe der Zelle ändern
Die andere  view in die Zellen können die Attribute  android:layout_gravity und  android:gravity gesetzt werden. I habe detailiert in LinearLayout beschrieben.

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 Platzhalter im Bildschirm, den Sie benutzen können um ein einzelnes View anzuzeigen.

Zum Beispiel:

Die folgende Interface mit  FrameLayout gestalten.
Bereitten Sie eine Bild Datei vor
  • halong.png
Kopieren und kleben Sie die Bilddatei im Verzeichnis  mipmap auf.
Ziehen und legen Sie das Objekt  ImageView zum Bildschirm in dem  left+top ​​​​​​​ab.
Ähnlich ziehen und legen Sie 2 andere Objekte  TextView zum Bildschirm ab:
Setzen Sie die Attribute, die  ImageView den Bildschirm zu füllen erlaubt.
ImageView:
  • layout_width: fill_parent
  • layout_height: fill_parent
  • src: @mipmap/halong
Ändern Sie die Attributes für  TextView 1:
TextView 1:
  • layout_width: fill_parent
  • text: Halong Bay, Vietnam
  • layout_gravity:
    • top
    • left
  • layout_marginTop: 100dp
  • padding: 10dp
  • background: #d7cece
Ändern Sie die Attributes für  TextView 2:
TextView 2:
  • text: Photo by intrepidtravel.com
  • layout_gravity:
    • right
    • bottom
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="match_parent">

    <ImageView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:id="@+id/imageView"
        android:layout_gravity="top|left"
        android:src="@mipmap/halong" />

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Halong Bay, Vietnam"
        android:id="@+id/textView"
        android:layout_gravity="top|left|center_vertical"
        android:layout_marginTop="100dp"
        android:background="#d7cece"
        android:padding="10dp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Photo by intrepidtravel.com"
        android:id="@+id/textView2"
        android:layout_gravity="right|bottom" />

</FrameLayout>
Ihre Applikation laufen

View more Tutorials: