Android
Layouts

Einführung

Syntax

• android: gravity = "oben | unten | links | rechts | center_vertical | fill_vertical | center_horizontal | fill_horizontal | center | fill | clip_vertical | clip_horizontal | start | end"
• android: layout_gravity = "oben | unten | links | rechts | center_vertical | fill_vertical | center_horizontal | fill_horizontal | center | fill | clip_vertical | clip_horizontal | start | end"

Bemerkungen

LinearLayout

Das LinearLayout ist eine ViewGroup , die ihre untergeordneten ViewGroup in einer einzelnen Spalte oder einer einzelnen Zeile ViewGroup . Die Ausrichtung kann durch Aufrufen der Methode setOrientation() oder mithilfe des XML-Attributs android:orientation .

1. Vertikale Ausrichtung : android:orientation="vertical"

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

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/app_name" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@android:string/cancel" />

</LinearLayout>

Hier ist ein Screenshot, wie das aussehen wird:

2. Horizontale Ausrichtung : android:orientation="horizontal"

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/app_name" />
   
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@android:string/cancel" />
   

Das LinearLayout unterstützt auch das Zuweisen einer Gewichtung für einzelne Kinder mit dem Attribut android:layout_weight .

RelativesLayout

RelativeLayout ist eine ViewGroup , die ViewGroup Ansichten in relativen Positionen anzeigt. Standardmäßig werden alle untergeordneten Ansichten oben links im Layout gezeichnet. Sie müssen daher die Position jeder Ansicht unter Verwendung der verschiedenen Layout-Eigenschaften definieren, die in RelativeLayout.LayoutParams verfügbar sind. Der Wert für jede Layout-Eigenschaft ist entweder ein Boolescher Wert, um eine Layoutposition relativ zum übergeordneten RelativeLayout zu aktivieren, oder eine ID, die auf eine andere Ansicht im Layout verweist, gegenüber der die Ansicht positioniert werden soll.

Beispiel:

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

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageView"
        android:src="@mipmap/ic_launcher" />

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/editText"
        android:layout_toRightOf="@+id/imageView"
        android:layout_toEndOf="@+id/imageView"
        android:hint="@string/hint" />

</RelativeLayout>

Hier ist ein Screenshot, wie das aussehen wird:

Schwerkraft und Layout Schwerkraft

android: layout_gravity

• android:layout_gravity wird verwendet, um die Position eines Elements in seinem übergeordneten Element android:layout_gravity (z. B. eine android:layout_gravity View in einem Layout ).
• Unterstützt von LinearLayout und FrameLayout

android: schwerkraft

• android:gravity wird die Position des Inhalts innerhalb eines Elements (z. B. eines Textes in einer TextView ) festgelegt.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="vertical"
        android:layout_gravity="left"
        android:gravity="center_vertical">

        <TextView
            android:layout_width="@dimen/fixed"
            android:layout_height="wrap_content"
            android:text="@string/first"
            android:background="@color/colorPrimary"
            android:gravity="left"/>

        <TextView
            android:layout_width="@dimen/fixed"
            android:layout_height="wrap_content"
            android:text="@string/second"
            android:background="@color/colorPrimary"
            android:gravity="center"/>

        <TextView
            android:layout_width="@dimen/fixed"
            android:layout_height="wrap_content"
            android:text="@string/third"
            android:background="@color/colorPrimary"
            android:gravity="right"/>

    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="vertical"
        android:layout_gravity="center"
        android:gravity="center_vertical">

        <TextView
            android:layout_width="@dimen/fixed"
            android:layout_height="wrap_content"
            android:text="@string/first"
            android:background="@color/colorAccent"
            android:gravity="left"/>

        <TextView
            android:layout_width="@dimen/fixed"
            android:layout_height="wrap_content"
            android:text="@string/second"
            android:background="@color/colorAccent"
            android:gravity="center"/>

        <TextView
            android:layout_width="@dimen/fixed"
            android:layout_height="wrap_content"
            android:text="@string/third"
            android:background="@color/colorAccent"
            android:gravity="right"/>

    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="vertical"
        android:layout_gravity="right"
        android:gravity="center_vertical">

        <TextView
            android:layout_width="@dimen/fixed"
            android:layout_height="wrap_content"
            android:text="@string/first"
            android:background="@color/colorPrimaryDark"
            android:gravity="left"/>

        <TextView
            android:layout_width="@dimen/fixed"
            android:layout_height="wrap_content"
            android:text="@string/second"
            android:background="@color/colorPrimaryDark"
            android:gravity="center"/>

        <TextView
            android:layout_width="@dimen/fixed"
            android:layout_height="wrap_content"
            android:text="@string/third"
            android:background="@color/colorPrimaryDark"
            android:gravity="right"/>

    </LinearLayout>

</LinearLayout>

Was wird wie folgt gerendert:

Gitterstruktur

GridLayout ist, wie der Name schon sagt, ein Layout zum Anordnen von Ansichten in einem Raster. Ein GridLayout teilt sich in Spalten und Zeilen auf. Wie Sie im folgenden Beispiel sehen können, wird die Anzahl der Spalten und / oder Zeilen durch die Eigenschaften columnCount und rowCount . Durch das Hinzufügen von Ansichten zu diesem Layout wird die erste Ansicht der ersten Spalte, die zweite Ansicht der zweiten Spalte und die dritte Ansicht der ersten Spalte der zweiten Zeile hinzugefügt.

<?xml version="1.0" encoding="utf-8"?>
<GridLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:columnCount="2"
    android:rowCount="2">

    <TextView
        android:layout_width="@dimen/fixed"
        android:layout_height="wrap_content"
        android:text="@string/first"
        android:background="@color/colorPrimary"
        android:layout_margin="@dimen/default_margin" />

    <TextView
        android:layout_width="@dimen/fixed"
        android:layout_height="wrap_content"
        android:text="@string/second"
        android:background="@color/colorPrimary"
        android:layout_margin="@dimen/default_margin" />

    <TextView
        android:layout_width="@dimen/fixed"
        android:layout_height="wrap_content"
        android:text="@string/third"
        android:background="@color/colorPrimary"
        android:layout_margin="@dimen/default_margin" />

</GridLayout>

Prozentuale Layouts

compile 'com.android.support:percent:25.3.1'

<android.support.percent.PercentFrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        app:layout_widthPercent="100%"
        app:layout_heightPercent="50%"
        android:background="@android:color/black" />

<android.support.percent.PercentFrameLayout>

<fraction name="margin_start_percent">25%</fraction>

 <ImageView
    app:layout_widthPercent="100%"
    app:layout_aspectRatio="178%"
    android:scaleType="centerCrop"
    android:src="@drawable/header_background"/>

FrameLayout

FrameLayout dient dazu, einen Bereich auf dem Bildschirm zu sperren, um ein einzelnes Element anzuzeigen. Sie können jedoch einem FrameLayout mehrere untergeordnete Objekte hinzufügen und deren Position innerhalb des FrameLayout steuern, indem Sie jedem untergeordneten Element die Schwerkraft zuweisen, indem Sie das Attribut android: layout_gravity verwenden .

Im Allgemeinen wird FrameLayout verwendet, um eine einzelne FrameLayout Ansicht zu FrameLayout . Übliche Anwendungsfälle sind das Erstellen von Platzhaltern für das Aufblasen von Fragments in der Activity , das Überlappen von Ansichten oder das Anwenden des Vordergrunds auf die Ansichten.

Beispiel:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

    <ImageView
        android:src="@drawable/nougat"
        android:scaleType="fitCenter"
        android:layout_height="match_parent"
        android:layout_width="match_parent"/>

    <TextView
        android:text="FrameLayout Example"
        android:textSize="30sp"
        android:textStyle="bold"
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        android:gravity="center"/>

</FrameLayout>

Es wird so aussehen:

KoordinatorLayout

compile 'com.android.support:design:25.3.1'

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/coord_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">

    <android.support.v4.widget.SwipeRefreshLayout
        android:id="@+id/swipe_refresh_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.v7.widget.RecyclerView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/recycler_view"/>

    </android.support.v4.widget.SwipeRefreshLayout>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:clickable="true"
        android:color="@color/colorAccent"
        android:src="@mipmap/ic_add_white"
        android:layout_gravity="end|bottom"
        app:layout_anchorGravity="bottom|right|end"/>

</android.support.design.widget.CoordinatorLayout>

CoordinatorLayout-Scrolling-Verhalten

<android.support.design.widget.CoordinatorLayout
    android:id="@+id/main_layout"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">


    <android.support.design.widget.AppBarLayout
        android:id="@+id/appBarLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:elevation="6dp">
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:background="?attr/colorPrimary"
        android:minHeight="?attr/actionBarSize"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        app:elevation="0dp"
        app:layout_scrollFlags="scroll|enterAlways"
        />

    <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        app:tabMode="fixed"
        android:layout_below="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        app:elevation="0dp"
        app:tabTextColor="#d3d3d3"
        android:minHeight="?attr/actionBarSize"
        />

    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_below="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        />

</android.support.design.widget.CoordinatorLayout>

Gewicht anzeigen

Eines der am häufigsten verwendeten Attribute für LinearLayout ist die Gewichtung der untergeordneten Ansichten. Die Gewichtung legt fest, wie viel Platz eine Ansicht im Vergleich zu anderen Ansichten in einem LinearLayout verbraucht.

Die Gewichtung wird verwendet, wenn Sie einer Komponente im Vergleich zu anderen Komponenten einen bestimmten Bildschirmbereich zuweisen möchten.

Schlüsseleigenschaften :

• weightSum ist die Gesamtsumme der Gewichtungen aller untergeordneten Ansichten. Wenn Sie die weightSum nicht angeben, berechnet das System die Summe aller Gewichtungen alleine.

• layout_weight gibt die Menge an Speicherplatz an, die das Widget insgesamt layout_weight .

Code:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:weightSum="4">

    <EditText
        android:layout_weight="2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Type Your Text Here" />

    <Button
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Text1" />

    <Button
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Text1" />

</LinearLayout>

Die Ausgabe ist:

Auch wenn die Größe des Geräts größer ist, nimmt der EditText 2/4 der Bildschirmfläche ein. Daher ist das Aussehen Ihrer App auf allen Bildschirmen konsistent.

Hinweis: Hier wird die layout_width auf 0dp layout_width gehalten, da der 0dp horizontal geteilt wird. Wenn die Widgets vertikal layout_height werden sollen, wird 0dp auf 0dp . Dies geschieht, um die Effizienz des Codes zu erhöhen, da das System zur Laufzeit nicht versucht, die Breite bzw. Höhe zu berechnen, da dies vom Gewicht verwaltet wird. Wenn Sie stattdessen wrap_content verwenden, wrap_content das System zuerst, die Breite / Höhe zu berechnen, bevor Sie das Gewichtsattribut anwenden, wodurch ein weiterer Berechnungszyklus ausgelöst wird.

LinearLayout programmgesteuert erstellen

Hierarchie

- LinearLayout(horizontal)
   - ImageView
   - LinearLayout(vertical)
     - TextView
     - TextView

Code

LinearLayout rootView = new LinearLayout(context);
rootView.setLayoutParams(new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT));
rootView.setOrientation(LinearLayout.HORIZONTAL);

// for imageview
ImageView imageView = new ImageView(context);
// for horizontal linearlayout
LinearLayout linearLayout2 = new LinearLayout(context);
linearLayout2.setLayoutParams(new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT));
linearLayout2.setOrientation(LinearLayout.VERTICAL);    

TextView tv1 = new TextView(context);
TextView tv2 = new TextView(context);
// add 2 textview to horizontal linearlayout
linearLayout2.addView(tv1);
linearLayout2.addView(tv2);

// finally, add imageview and horizontal linearlayout to vertical linearlayout (rootView) 
rootView.addView(imageView);
rootView.addView(linearLayout2);

LayoutParams

Jede einzelne ViewGroup (z. B. LinearLayout , RelativeLayout , CoordinatorLayout usw.) muss Informationen über die Eigenschaften ihrer Kinder speichern. ViewGroup die ViewGroup in der ViewGroup . Diese Informationen werden in Objekten der Wrapper-Klasse ViewGroup.LayoutParams .

ViewGroups verwendet Unterklassen der ViewGroup.LayoutParams Klasse, um spezifische Parameter für einen bestimmten ViewGroups ViewGroup.LayoutParams .

ZB für

• LinearLayout es LinearLayout.LayoutParams
• RelativeLayout es RelativeLayout.LayoutParams
• CoordinatorLayout Es ist CoordinatorLayout.LayoutParams
• ...

Die meisten ViewGroups die Möglichkeit, margins für ihre Kinder ViewGroup.LayoutParams , sodass sie ViewGroup.LayoutParams direkt subclassieren, sondern ViewGroup.MarginLayoutParams (die selbst eine Subklasse von ViewGroup.LayoutParams ).

LayoutParams in XML

LayoutParams Objekte werden basierend auf der aufgeblasenen Layout- xml Datei erstellt.

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:layout_gravity="right"
        android:gravity="bottom"
        android:text="Example text"
        android:textColor="@android:color/holo_green_dark"/>

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="@android:color/holo_green_dark"
        android:scaleType="centerInside"
        android:src="@drawable/example"/>

</LinearLayout>

Alle Parameter, die mit layout_ beginnen, layout_ , wie das umschließende Layout funktionieren soll. Wenn das Layout aufgeblasen wird, werden diese Parameter in ein richtiges LayoutParams Objekt eingeschlossen, das später vom Layout verwendet wird, um eine bestimmte View in der ViewGroup richtig zu positionieren. Andere Attribute einer View sind direkt auf die View und werden von der View selbst verarbeitet.

Für TextView :

• layout_width , layout_height und layout_gravity werden in einem LinearLayout.LayoutParams Objekt gespeichert und vom LinearLayout
• gravity , text und textColor werden vom TextView selbst verwendet

Für ImageView :

• layout_width , layout_height und layout_weight werden in einem LinearLayout.LayoutParams Objekt gespeichert und vom LinearLayout
• background , scaleType und src werden von ImageView selbst verwendet

LayoutParams Objekt LayoutParams

getLayoutParams ist eine View's Methode, mit der ein aktuelles LayoutParams Objekt abgerufen werden kann.

Da das LayoutParams Objekt direkt mit dem umschließenden zusammenhängt ViewGroup , gibt diese Methode einen Wert ungleich Null nur dann , wenn View auf das angebracht ist ViewGroup . Sie müssen bedenken, dass dieses Objekt möglicherweise nicht immer vorhanden ist. Insbesondere sollten Sie nicht darauf angewiesen sein, dass es sich innerhalb View's Konstruktors von View's .

public class ExampleView extends View {
    
    public ExampleView(Context context) {
        super(context);
        setupView(context);
    }

    public ExampleView(Context context, AttributeSet attrs) {
        super(context, attrs);
        setupView(context);
    }

    public ExampleView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        setupView(context);
    }

    private void setupView(Context context) {
        if (getLayoutParams().height == 50){  // DO NOT DO THIS!
                                              // This might produce NullPointerException
            doSomething();
        }
    }
    
    //...
}

Wenn Sie sich auf das LayoutParams Objekt verlassen LayoutParams , sollten onAttachedToWindow stattdessen die Methode onAttachedToWindow verwenden.

public class ExampleView extends View {

    public ExampleView(Context context) {
        super(context);
    }

    public ExampleView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public ExampleView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    @Override
    protected void onAttachedToWindow() {
        super.onAttachedToWindow();
        if (getLayoutParams().height == 50) { // getLayoutParams() will NOT return null here
            doSomething();
        }
    }

    //...
}

Casting des LayoutParams Objekts

Möglicherweise müssen Sie Funktionen verwenden, die für eine bestimmte ViewGroup spezifisch sind (z. B. möchten Sie die Regeln eines RelativeLayout programmgesteuert ändern). Zu diesem Zweck müssen Sie wissen, wie das ViewGroup.LayoutParams Objekt ordnungsgemäß ViewGroup.LayoutParams wird.

Dies kann etwas verwirrend sein, wenn ein LayoutParams Objekt für eine LayoutParams View ViewGroup , bei der es sich tatsächlich um eine andere ViewGroup .

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:id="@+id/outer_layout"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical">

    <FrameLayout
        android:id="@+id/inner_layout"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_gravity="right"/>

</LinearLayout>

WICHTIG: Der Typ des LayoutParams Objekts hängt direkt mit dem Typ der ENCLOSING- ViewGroup .

Falsches Casting :

FrameLayout innerLayout = (FrameLayout)findViewById(R.id.inner_layout);
FrameLayout.LayoutParams par = (FrameLayout.LayoutParams) innerLayout.getLayoutParams();
                                          // INCORRECT! This will produce ClassCastException

Korrektes Gießen :

FrameLayout innerLayout = (FrameLayout)findViewById(R.id.inner_layout);
LinearLayout.LayoutParams par = (LinearLayout.LayoutParams) innerLayout.getLayoutParams();
                                         // CORRECT! the enclosing layout is a LinearLayout