Mit ListView-innen ConstraintLayout

Habe ich gelesen, auf Android-Entwickler, dass ConstraintLayout kann verwendet werden, um das design einer responsive layout für eine Anwendung. Es besteht eine Eltern-ConstraintLayout die Häuser eine Symbolleiste und zwei andere ConstraintLayouts. Das erste Kind ConstraintLayout ist handeln als leere Ansicht für meine ListView. Die zweite ConstraintLayout hält meine listview und ein floating-action-button. Derzeit ist die listview erscheint unter der Symbolleiste, anstatt darunter. Auch wie man in dem screenshot sieht, wird die floating-action-button erscheint außerhalb sichtbaren Bereichs.

Siehe screenshot unten:

Mit ListView-innen ConstraintLayout

- Und das ist das app-layout, wenn die Liste leer ist:

Mit ListView-innen ConstraintLayout

Dies ist der code für mein layout:

<?xml version="1.0" encoding="utf-8"?>


<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/content"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    >

    <android.support.v7.widget.Toolbar xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>


    <android.support.constraint.ConstraintLayout
        app:layout_constraintTop_toBottomOf="@id/toolbar"
        android:id="@+id/empty_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="?attr/actionBarSize">

        <TextView
            app:layout_constraintTop_toTopOf="parent"
            android:id="@+id/tv_empty_view"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/list_is_empty"
            android:textSize="@dimen/large_text"
            android:textStyle="bold"
            />

        <ImageView
            android:id="@+id/iv_empty_view"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintTop_toBottomOf="@id/tv_empty_view"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            android:contentDescription="@string/list_is_empty"
            android:src="@drawable/emptybox" />
    </android.support.constraint.ConstraintLayout>
    <android.support.constraint.ConstraintLayout
        android:id="@+id/main_area"
        android:layout_marginTop="50dp"
        android:layout_marginBottom="?actionBarSize"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@id/toolbar"
        app:layout_constraintBottom_toBottomOf="parent">

    <ListView
        android:id="@+id/listview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="?attr/actionBarSize"
        android:layout_marginLeft="@dimen/margin_side"
        android:layout_marginStart="@dimen/margin_side"
        android:layout_marginRight="@dimen/margin_side"
        android:layout_marginEnd="@dimen/margin_side"
        android:layout_marginTop="?attr/actionBarSize"
        />
    <android.support.design.widget.FloatingActionButton
        android:layout_below="@+id/listview"
        android:id="@+id/fab"
        android:layout_width="@android:dimen/notification_large_icon_width"
        android:layout_height="@android:dimen/notification_large_icon_height"
        android:layout_gravity="end|bottom"
        android:src="@drawable/plus"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        />
    </android.support.constraint.ConstraintLayout>



</android.support.constraint.ConstraintLayout>

Hinzufügen Sie nicht constraints zwei ConstraintLayouts.

InformationsquelleAutor codezombie | 2017-10-14

2

Während der Verwendung ConstraintLayout Sie Hinzugefügt haben, um die Einschränkungen für 'constraintTop',constraintRight,constraintBottom,constraintLeft oder constraintStart und constraintEnd. nur wenn Sie Einschränkung alle Ihre vier Seiten der constraint-layout (oder ein Constraint Starten oder zu Beenden, mit anderen Referenzen) funktioniert gut. Ansonsten wird das layout nicht korrekt

Weitere Referenz https://codelabs.developers.google.com/codelabs/constraint-layout/index.html?index=..%2F..%2Findex#0

https://developer.android.com/training/constraint-layout/index.html

InformationsquelleAutor Tomin B Azhakathu
2

Gibt es ein paar Dinge, die Sie verbessern können im XML-und machen das design einfacher.

Erste, die Haupt-layout entspricht dem Bildschirm, um die Vorschau korrekt simulieren, können Sie seine Breite/Höhe match_parent
```
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
```
Dann, Android Studio sollte Ihnen Warnungen/Fehler und sagen:The view is not constrained horizontally/vertically. In ConstraintLayout haben, müssen Sie Einschränkungen festlegen, wie Ihre Ansichten platziert werden. Wenn Sie nicht standardmäßig position auf 0/0 und wird wahrscheinlich anders Aussehen, wenn es auf dem Gerät ausgeführt wird:
```
<ListView
        android:id="@+id/listview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginBottom="0dp" />
```
Nun, Sie sollten in der Lage sein, dass die main_area überschneidungen mit der Symbolleiste. Um es zu beheben, können Sie ändern main_area Höhe entsprechend der Auflagen:
```
android:id="@+id/main_area"
android:layout_height="0dp"
```
Sollten Sie in der Lage sein, erhalten Sie eine design ähnlich wie das, was Sie soll.
- Oh, vielen Dank! Es hilft mir.
InformationsquelleAutor merterpam

Hier ist das gewünschte Ergebnis, ich habe einige änderungen vorgenommen, wie Seitenränder, src, nur um es in meinem studio, so müssen Sie wählen, was Sie verwenden, ersetzen Sie einfach mine mit Ihren SRK und Margen usw...

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 android:id="@+id/content"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical"
 >

 <android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="0dp"
    android:layout_height="56dp"
    android:background="?attr/colorPrimary"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"/>


<android.support.constraint.ConstraintLayout
    app:layout_constraintTop_toBottomOf="@+id/toolbar"
    android:id="@+id/empty_view"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent">

    <TextView
        app:layout_constraintTop_toTopOf="parent"
        android:id="@+id/tv_empty_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        android:text="list_is_empty"
        android:textSize="30sp"
        android:textStyle="bold"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />

    <ImageView
        android:id="@+id/iv_empty_view"
        android:layout_width="20dp"
        android:layout_height="20dp"
        app:layout_constraintTop_toBottomOf="@+id/tv_empty_view"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:background="#fff222" />
</android.support.constraint.ConstraintLayout>
<android.support.constraint.ConstraintLayout
    android:id="@+id/main_area"

    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintTop_toBottomOf="@+id/toolbar"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent">

    <ListView
        android:id="@+id/listview"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />
    <android.support.design.widget.FloatingActionButton
        android:layout_marginEnd="30dp"
        android:layout_marginBottom="30dp"
        android:id="@+id/fab"
        android:layout_width="64dp"
        android:layout_height="64dp"
        android:src="@drawable/bg"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        />
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>

Hier ist die Ausgabe:
Mit ListView-innen ConstraintLayout

InformationsquelleAutor Lalit Singh Fauzdar

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.