Android - wie erstelle ich ein scrollbares Constraintlayout?

149

Ich möchte ein Layout erstellen, mit dem ich mithilfe des Einschränkungslayouts nach unten scrollen kann, weiß aber nicht, wie ich vorgehen soll. Sollte das ScrollViewder Elternteil ConstraintLayoutdavon sein?

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

<ScrollView 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"
    android:fillViewport="true">

<android.support.constraint.ConstraintLayout
    android:id="@+id/Constraint"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

Oder umgekehrt? Vielleicht kann mich jemand auf ein gutes Tutorial dazu verweisen oder ein Beispiel geben, ich kann anscheinend keines finden.

Ich weiß auch nicht, ob dies ein Fehler oder eine Konfiguration ist, die ich nicht eingerichtet habe, aber ich habe Bilder wie dieses gesehen:

Geben Sie hier die Bildbeschreibung ein

Wenn sich einige Komponenten außerhalb der Blaupause "blaues Rechteck" befinden, diese jedoch sichtbar sind, kann ich sie auf meiner Seite nicht sehen oder verschieben, wenn ich sie auf dem "weißen Raum" platziere, und sie wird im Komponentenbaum angezeigt .

UPDATE:

Ich habe eine Möglichkeit gefunden, das Einschränkungslayout im Entwurfstool scrollbar zu machen, indem ich eine horizontale Richtlinie verwendet habe, um den Rand des Einschränkungslayouts nach unten zu drücken und über das Gerät hinaus zu erweitern. Danach können Sie die Richtlinie als neuen unteren Rand des Einschränkungslayouts verwenden Verankern Sie die Komponenten.

gtovar
quelle

Antworten:

83

Es scheint, dass es funktioniert, ich weiß nicht, mit welcher Abhängigkeit Sie gearbeitet haben, aber in dieser

compile 'com.android.support.constraint:constraint-layout:1.0.2'

Funktioniert, das habe ich getan

<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.design.widget.TextInputLayout
            android:id="@+id/til_input"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:hint="Escriba el contenido del archivo"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toLeftOf="@+id/btn_save"
            app:layout_constraintTop_toTopOf="@id/btn_save"
            app:layout_constraintVertical_chainStyle="spread">

            <EditText
                android:layout_width="match_parent"
                android:layout_height="match_parent" />
        </android.support.design.widget.TextInputLayout>

        <Button
            android:id="@+id/btn_save"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="onClickButtonSave"
            android:text="Guardar"
            app:layout_constraintLeft_toRightOf="@+id/til_input"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/txt_content"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="0dp"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@id/til_input"
            app:layout_constraintVertical_chainStyle="spread"
            app:layout_constraintVertical_weight="1" />

        <Button
            android:id="@+id/btn_delete"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:onClick="onClickButtonDelete"
            android:text="Eliminar"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@id/txt_content"
            app:layout_constraintVertical_chainStyle="spread" />

    </android.support.constraint.ConstraintLayout>

</ScrollView>

Bildlauf nach obenGeben Sie hier die Bildbeschreibung ein

Bildlauf untenGeben Sie hier die Bildbeschreibung ein

Sealroto
quelle
3
Dank war das Problem , dass ich habe nicht scroll auf der Vorschau, so etwas zu bauen gibt es imposible aber ich fand heraus , dass eine Leitlinie ich mit dem Layout nach unten ziehen kann leer scrollbaren Raum zu machen und es dann entfernen , wenn ich fertig bin
gtovar
1
Diese Antwort sollte oben sein!
Kostanos
60

Es gibt eine Art von Einschränkung, die die Bildlauffunktion unterbricht:

So stellen Sie sicher , dass Sie nicht mit dieser Einschränkung auf einem beliebigen Ansicht , wenn Sie wollen , ConstraintLayoutmit sein scrollbaren ScrollView:

app:layout_constraintBottom_toBottomOf=“parent

Wenn Sie diese entfernen, sollte Ihre Schriftrolle funktionieren.

Erläuterung:

Das Einstellen der Größe des Kindes auf die Größe eines ScrollViewElternteils widerspricht dem, was die Komponente tun soll. Was wir die meiste Zeit wollen, ist, dass einige Inhalte mit dynamischer Größe scrollbar sind, wenn sie größer als ein Bildschirm / Frame sind. Wenn Sie die Höhe mit dem übergeordneten ScrollViewElement abgleichen, wird der gesamte Inhalt in einem festen Rahmen (der Höhe des übergeordneten Elements) angezeigt, wodurch alle Bildlauffunktionen ungültig werden.

Dies geschieht auch, wenn reguläre direkte untergeordnete Komponenten auf eingestellt sind layout_height="match_parent".

Wenn Sie möchten, dass das untergeordnete ScrollViewElement der Größe des übergeordneten Elements entspricht, wenn nicht genügend Inhalt vorhanden ist, setzen Sie es einfach android:fillViewportauf true für das ScrollView.

SuppressWarnings
quelle
1
@ BasilBattikhi Hinzugefügt eine Erklärung
SuppressWarnings
3
Verdammt, das hat tatsächlich funktioniert! Ich hasse Scroll-Ansichten im Ernst.
Uday
2
Vielen Dank an @SuppressWarnings, ich weiß es wirklich zu schätzen. Sie schlagen vor, "app: layout_constraintBottom_toBottomOf =" parent "" zu 100% zu
entfernen
1
+1, wirklich nützlich, wusste nicht, warum die Elemente in meiner Bildlaufansicht nicht an der gewünschten Stelle positioniert waren.
Jesús Hagiwara
1
Ja, richtig ... aber um die gleiche Anforderung zu erreichen, folgen Sie dem oben erwähnten Ansatz.
Raghav Sharma
28

Die Verwendung von NestedScrollView mit dem Ansichtsfenster true funktioniert gut für mich

<android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fillViewport="true">

        <android.support.constraint.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="700dp">

        </android.support.constraint.ConstraintLayout>

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

für android x benutze dies

 <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fillViewport="true">
    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
.....other views....

</androidx.constraintlayout.widget.ConstraintLayout>
    </androidx.core.widget.NestedScrollView>
Abhay Pratap
quelle
4
Vielen Dank! Das habe ich gesucht - android: fillViewport = "true" ist der Schlüssel.
Pratt
Vergessen Sie nicht, in nestedscrollview hinzuzufügen, wenn Sie AppBarLayoutapp:layout_behavior="@string/appbar_scrolling_view_behavior"
majurageerthan
1
Bisher ist dies die richtige Antwort!
madfree
11

Zusammenfassend lässt sich sagen, dass Sie Ihre android.support.constraint.ConstraintLayoutAnsicht grundsätzlich in ScrollViewden Text der *.xmlDatei einbinden, die Ihrem Layout zugeordnet ist.

Beispiel activity_sign_in.xml

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

<ScrollView 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=".SignInActivity"> <!-- usually the name of the Java file associated with this activity -->

    <android.support.constraint.ConstraintLayout 
        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"
        android:background="@drawable/gradient"
        tools:context="app.android.SignInActivity">

        <!-- all the layout details of your page -->

    </android.support.constraint.ConstraintLayout>
</ScrollView>

Hinweis 1: Die Bildlaufleisten werden nur angezeigt, wenn in irgendeiner Weise ein Wrap erforderlich ist, einschließlich des Aufspringens der Tastatur.

Hinweis 2: Es wäre auch keine schlechte Idee, sicherzustellen, dass Ihr ConstraintLayout groß genug ist, um den unteren Rand und die Seiten eines bestimmten Bildschirms zu erreichen, insbesondere wenn Sie einen Hintergrund haben, da dies sicherstellt, dass keine merkwürdigen Leerzeichen vorhanden sind . Sie können dies mit Leerzeichen tun, wenn nichts anderes.

StackAttack
quelle
9

Verwenden Sie einfach das Einschränkungslayout in NestedScrollViewoder ScrollView.

<android.support.v4.widget.NestedScrollView
        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">

    <android.support.constraint.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/white">

 </android.support.constraint.ConstraintLayout>

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

das ist es. Viel Spaß beim Codieren.

Mahendren
quelle
4

Um ein scrollbares Layout zu erstellen, ist das Layout korrekt. Es kann erst gescrollt werden, wenn Grund zum Scrollen besteht (genau wie in jedem anderen Layout). Fügen Sie also genügend Inhalte hinzu, und es kann wie bei jedem Layout (linear, relativ usw.) gescrollt werden. Beim Entwerfen mit ConstraintLayout und ScrollView können Sie jedoch im Blueprint- oder Design-Modus nicht richtig scrollen.

Bedeutung:

Sie können ein scrollbares ConstraintLayout erstellen, das jedoch im Editor aufgrund eines nicht berücksichtigten Fehlers / Szenarios nicht ordnungsgemäß gescrollt wird. Obwohl das Scrollen im Editor nicht funktioniert, funktioniert es auf Geräten. (Ich habe mehrere COnstraintLayouts zum Scrollen erstellt und sie getestet.)

Hinweis

In Bezug auf Ihren Code. In der ScrollView fehlt ein schließendes Tag. Ich weiß nicht, ob dies in der Datei der Fall ist oder ob es sich um einen Fehler beim Kopieren und Einfügen handelt, aber Sie können es sich ansehen.

Zoe
quelle
1
Um ein scrollbares Einschränkungslayout zu entwerfen, können Sie im aktuellen Status von CL die Höhe des Geräts erweitern und es benutzerdefinieren. Stellen Sie die Höhe der Layouts (ScrollView und CL) auf eine hohe Zahl (z. B. 2000DP) ein und führen Sie einfach das normale Design durch. Beachten Sie, dass Sie einen guten Computer benötigen, um die Erweiterung zu bewältigen, da die wirklich großen benutzerdefinierten Geräte viel vom Computer verlangen. Es ist eine Schande, dass CL das Entwerfen mit SCrollViews nicht unterstützt, aber es gibt Problemumgehungen. B. die Höhe des Geräts vergrößern.
Zoe
3

Zum Vervollständigen der vorherigen Antworten füge ich das folgende Beispiel hinzu, das auch die Verwendung der AppBar berücksichtigt. Mit diesem Code scheint der Android Studio-Designeditor mit dem ConstraintLayout einwandfrei zu funktionieren.

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    android:background="@drawable/bg"
    android:orientation="vertical">

<android.support.design.widget.AppBarLayout
    android:id="@+id/app_bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.ActionBar.AppOverlayTheme">
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:popupTheme="@style/AppTheme.PopupOverlay"/>
</android.support.design.widget.AppBarLayout>

<ScrollView
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <ImageView
            android:id="@+id/image_id"
            android:layout_width="match_parent"
            android:layout_height="@dimen/app_bar_height"
            android:fitsSystemWindows="true"
            android:scaleType="centerCrop"
            android:src="@drawable/intro"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="parent" />

        <TextView
            android:id="@+id/desc_id"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/text_margin"
            android:text="@string/intro_desc"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/image_id" />

        <Button
            android:id="@+id/button_scan"
            style="?android:textAppearanceSmall"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:backgroundTint="@color/colorAccent"
            android:padding="8dp"
            android:text="@string/intro_button_scan"
            android:textStyle="bold"
            app:layout_constraintTop_toBottomOf="@+id/desc_id" />

        <Button
            android:id="@+id/button_return"
            style="?android:textAppearanceSmall"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="8dp"
            android:layout_marginTop="8dp"
            android:backgroundTint="@color/colorAccent"
            android:padding="8dp"
            android:text="@string/intro_button_return"
            android:textStyle="bold"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/button_recycle" />

        <Button
            android:id="@+id/button_recycle"
            style="?android:textAppearanceSmall"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:backgroundTint="@color/colorAccent"
            android:padding="8dp"
            android:text="@string/intro_button_recycle"
            android:textStyle="bold"
            app:layout_constraintTop_toBottomOf="@+id/button_scan" />
    </android.support.constraint.ConstraintLayout>
</ScrollView>
</LinearLayout>
Narko
quelle
2

Sie müssen mein Constraint-Layout mit einem ScrollView-Tag umgeben und ihm die Eigenschaft android geben: isScrollContainer = "true".

Sam
quelle
1

Das Einschränkungslayout ist die Standardeinstellung für eine neue App. Ich lerne jetzt "Android" und hatte große Schwierigkeiten herauszufinden, wie ich mit dem Standard-Beispielcode umgehen soll, um zu scrollen, wenn eine Tastatur aktiv ist. Ich habe viele Apps gesehen, bei denen ich die Tastatur schließen muss, um auf die Schaltfläche "Senden" zu klicken, und manchmal verschwindet sie nicht. Mit dieser Hierarchie [ScrollView / ContraintLayout / Fields] funktioniert es jetzt einwandfrei. Auf diese Weise können wir die Vorteile und die Benutzerfreundlichkeit von ConstraintLayout in einer scrollbaren Ansicht nutzen.

Renato Bourdon
quelle
1

Nehmen Sie die untere Schaltfläche aus der verschachtelten Bildansicht heraus und nehmen Sie das lineare Layout als übergeordnetes Element. Fügen Sie als Ihre Kinder bottom und nestedscrollview hinzu. Es wird absolut gut funktionieren. Verwenden Sie im Manifest für die Aktivität Folgendes: Dadurch wird die Schaltfläche beim Öffnen der Tastatur angehoben

android:windowSoftInputMode="adjustResize|stateVisible"

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <androidx.core.widget.NestedScrollView xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:fillViewport="true">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <com.google.android.material.textfield.TextInputLayout
                android:id="@+id/input_city_name"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginStart="20dp"
                android:layout_marginTop="32dp"
                android:layout_marginEnd="20dp"
                android:hint="@string/city_name"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintTop_toTopOf="parent">

                <com.google.android.material.textfield.TextInputEditText
                    android:id="@+id/city_name"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:digits="abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ"
                    android:lines="1"
                    android:maxLength="100"
                    android:textSize="16sp" />

            </com.google.android.material.textfield.TextInputLayout>

        </androidx.constraintlayout.widget.ConstraintLayout>

    </androidx.core.widget.NestedScrollView>

    <Button
        android:id="@+id/submit"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        android:onClick="onSubmit"
        android:padding="12dp"
        android:text="@string/string_continue"
        android:textColor="#FFFFFF"
        app:layout_constraintBottom_toBottomOf="parent" />

</LinearLayout>
Raghav Sharma
quelle
0

Sie können verwenden HorizontalScrollViewund es wird auch funktionieren!

Morgan Koh
quelle
Bitte erläutern Sie die Verwendung
FindOutIslamNow
0

So habe ich es gelöst:
Wenn Sie Nested ScrollView verwenden, dh ScrollView in einem ConstraintLayout, verwenden Sie die folgende Konfiguration für ScrollView anstelle von "WRAP_CONTENT" oder "MATCH_PARENT":


<ScrollView
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintBottom_toTopOf="@+id/someOtherWidget"
    app:layout_constraintTop_toTopOf="parent">
Sajid2405
quelle
0

In der Bildlaufansicht machen Sie Höhe und Breite. 0 Fügen Sie die Einschränkungen Top_toBottomOf und Bottom_toTopOf hinzu.

mohammad al-momani
quelle
Bitte erläutern Sie diese Antwort genauer, z. B. ein Beispiel für den zu implementierenden Code.
Jake
0

Für mich schien keiner der Vorschläge zum Entfernen der unteren Einschränkungen oder zum Setzen des Bildlaufcontainers auf true zu funktionieren. Was hat funktioniert: Erweitern Sie die Höhe einzelner / verschachtelter Ansichten in meinem Layout, sodass sie über das übergeordnete Element hinaus "überspannt" werden, indem Sie die Option "Vertikal erweitern" des Constraint-Layout-Editors verwenden (siehe unten).

Für jeden Ansatz ist es wichtig, dass die gepunkteten Vorschaulinien vertikal über die oberen oder unteren Abmessungen des übergeordneten Elements hinausragen

Vertikal erweitern

kip2
quelle