Android - comment créer un modèle de contrainte déroulable ?

Question

Je veux créer une mise en page qui me permette de faire défiler les pages en utilisant la mise en page par contrainte, mais je ne sais pas comment m'y prendre. Est-ce que le ScrollView être le parent de la ConstraintLayout comme ça ?

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

Ou l'inverse ? Peut-être que quelqu'un peut m'indiquer un bon tutoriel sur ce sujet ou me donner un exemple, je n'arrive pas à en trouver un.

Par ailleurs, je ne sais pas s'il s'agit d'un bogue ou d'une configuration que je n'ai pas mise en place, mais j'ai vu des images comme celle-ci :

où il y a des composants en dehors du "rectangle bleu" du blueprint, mais qui sont pourtant visibles, alors que de mon côté, si je place un composant sur l'"espace blanc", je ne peux pas le voir ni le déplacer, et il apparaît dans l'arbre des composants.

UPDATE :

J'ai trouvé un moyen de faire défiler la disposition des contraintes dans l'outil de conception, en utilisant une ligne de guidage horizontale pour pousser vers le bas le bord de la disposition des contraintes et l'étendre au-delà du dispositif, après quoi, vous pouvez utiliser la ligne de guidage comme le nouveau fond de la disposition des contraintes pour ancrer les composants.

Answer 1

Il semble que cela fonctionne, je ne sais pas avec quelle dépendance vous travailliez mais dans celle-ci

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

Ça marche, voilà ce que j'ai fait

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

Scroll Top

Défilement du fond

Answer 2

Il existe un type de contrainte qui brise la fonction de défilement :

Assurez-vous juste que vous êtes ne pas utiliser cette contrainte sur n'importe quelle vue lorsque vous voulez que votre ConstraintLayout pour qu'il soit possible de le faire défiler avec ScrollView :

app:layout_constraintBottom_toBottomOf=“parent”

Si vous les supprimez, votre défilement devrait fonctionner.

Explication :

Définir la hauteur de l'enfant pour qu'elle corresponde à celle d'un enfant. ScrollView parent est contradictoire avec ce que le composant est censé faire. Ce que nous voulons la plupart du temps, c'est qu'un contenu de taille dynamique puisse défiler lorsqu'il est plus grand qu'un écran/un cadre ; faire correspondre la hauteur avec le parent ScrollView obligerait à afficher tout le contenu dans un cadre fixe (la hauteur du parent), ce qui invaliderait toute fonctionnalité de défilement.

Cela se produit également lorsque les composants enfants directs réguliers sont définis comme suit layout_height="match_parent" .

Si vous voulez que l'enfant du ScrollView pour correspondre à la hauteur du parent lorsqu'il n'y a pas assez de contenu, il suffit d'activer la fonction android:fillViewport à true pour le ScrollView .

Answer 3

Pour résumer, il s'agit essentiellement d'envelopper votre android.support.constraint.ConstraintLayout vue dans un ScrollView dans le texte de la *.xml associé à votre mise en page.

Exemple activité_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>

---

Note 1 : Les barres de défilement n'apparaissent que si un enveloppement est nécessaire de quelque manière que ce soit, y compris l'apparition du clavier.

Note 2 : Ce ne serait pas non plus une mauvaise idée de s'assurer que votre ConstraintLayout est suffisamment grand pour atteindre le bas et les côtés de n'importe quel écran, surtout si vous avez un arrière-plan, car cela garantira qu'il n'y a pas d'espace blanc bizarre. Vous pouvez le faire avec des espaces, à défaut d'autre chose.

Answer 4

Il suffit d'utiliser la disposition des contraintes dans NestedScrollView ou 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>

C'est tout. Profitez de votre codage.

Answer 5

POUR faire une mise en page défilable, la mise en page est correcte. Il ne sera pas possible de le faire défiler tant qu'il n'y aura pas de raison de le faire (comme dans toute autre mise en page). Ajoutez donc suffisamment de contenu et il sera possible de le faire défiler, comme avec n'importe quelle mise en page (linéaire, relative, etc.). Cependant, vous ne peut pas défiler correctement en mode Blueprint ou design lors de la conception avec ConstraintLayout et ScrollView.

C'est-à-dire :

Vous pouvez créer un ConstraintLayout défilable, mais il ne défilera pas correctement dans l'éditeur en raison d'un bug/scénario qui n'a pas été pris en compte. Mais même si le défilement ne fonctionne pas dans l'éditeur, il fonctionne sur les appareils. (J'ai créé plusieurs ConstraintLayouts défilants, donc je l'ai testé).

Note

En ce qui concerne votre code. Il manque une balise de fermeture au ScrollView, je ne sais pas si c'est le cas dans le fichier ou si c'est un copier-coller raté, mais vous pouvez y jeter un œil.