Android - wie erstelle ich ein scrollbares Constraintlayout?

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:

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.

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 oben

Bildlauf unten

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.

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>

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.

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.

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.

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>

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

In Version 2.2 gibt es einen Fehler , der das Scrollen im ConstraintLayout unmöglich macht. Ich denke es existiert noch. Sie können alternativ LinearLayout oder RelativeLayout verwenden.

Auch Besuche: Ist es möglich , eine Einschränkung Layout innerhalb eines Scroll zu setzen .

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.

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>

Sie können verwenden HorizontalScrollViewund es wird auch funktionieren!

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">

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

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