web-dev-qa-db-fra.com

Android - comment faire une définition de contrainte défilable?

Je veux faire une mise en page qui me permet de faire défiler en utilisant une mise en page de contrainte, mais je ne sais pas comment s'y prendre. Le ScrollView devrait-il être le parent du ConstraintLayout comme ceci?

<?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 me diriger vers un bon tutoriel à ce sujet ou donner un exemple, je n'arrive pas à en trouver un.

De plus, je ne sais pas s'il s'agit d'un bogue ou d'une configuration que je n'ai pas encore configurée, mais j'ai déjà vu des images comme celle-ci:

enter image description here

où il y a des composants en dehors du modèle "rectangle bleu" pourtant ils sont visibles, tandis que de mon côté si je place un composant sur "l'espace blanc", je ne peux pas le voir ni le déplacer n'importe où, et il apparaît dans l'arborescence des composants .

MISE À JOUR :

J'ai trouvé un moyen de faire défiler la disposition des contraintes dans l'outil de conception en utilisant un repère horizontal pour abaisser le bord de la disposition des contraintes et l'étendre au-delà du périphérique. Vous pouvez ensuite utiliser le repère comme nouveau bas de la disposition des contraintes. ancrer les composants.

androidandroid-layoutandroid-scrollviewandroid-constraintlayout
110
gtovar

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

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

Travaille, c'est 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>

Défiler vers le haut enter image description here

Défiler en bas enter image description here

66
sealroto

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

Assurez-vous simplement que ne pas utiliser cette contrainte sur n’importe quelle vue lorsque vous souhaitez que votre ConstraintLayout puisse défiler avec ScrollView:

app:layout_constraintBottom_toBottomOf=“parent”

Si vous les supprimez, votre parchemin devrait fonctionner.

Explication:

Régler la taille de l'enfant pour qu'elle corresponde à celle d'un parent ScrollView est en contradiction avec ce que le composant est censé faire. Ce que nous voulons le plus souvent, c’est que certains contenus de taille dynamique puissent défiler quand ils sont plus grands qu’un écran/cadre; Faire correspondre la hauteur au parent ScrollView forcerait tout le contenu à s'afficher dans un cadre fixe (la hauteur du parent), annulant ainsi toute fonctionnalité de défilement.

Cela se produit également lorsque les composants enfants directs sont définis sur layout_height="match_parent".

Si vous voulez que l'enfant de la variable ScrollView corresponde à la hauteur du parent lorsqu'il n'y a pas assez de contenu, définissez simplement Android:fillViewport sur true pour la variable ScrollView.

35
SuppressWarnings

Utilisez simplement 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 ça. profitez de votre codage.

7
mahendren

En résumé, vous encapsulez votre vue Android.support.constraint.ConstraintLayout dans une ScrollView dans le texte du fichier *.xml associé à votre mise en page.

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

Note 1: Les barres de défilement n'apparaissent que si un retour à la ligne est nécessaire, y compris lorsque le clavier apparaît.

Note 2: Ce ne serait pas non plus une mauvaise idée de vous assurer que votre ConstraintLayout est assez grand pour atteindre le bas et les côtés d'un écran donné, en particulier si vous avez un arrière-plan, car cela vous assurera qu'il n'y a pas d'espaces blancs étranges. Vous pouvez le faire avec des espaces si rien d'autre.

7
StackAttack

Pour faire une mise en page à défilement, la mise en page est correcte. Il ne sera pas possible de faire défiler l'écran jusqu'à ce qu'il y ait une raison de le faire défiler (comme dans toute autre mise en page). Ajoutez donc suffisamment de contenu et vous pourrez le faire défiler, comme pour n’importe quelle mise en page (linéaire, relative, etc.). Cependant, vous ne pouvez pas faire défiler correctement en mode Plan ou en mode conception lors de la conception avec ConstraintLayout et ScrollView.

Sens:

Vous pouvez créer un objet ConstraintLayout à défilement, mais celui-ci ne défilera pas correctement dans l’éditeur en raison d’un bogue ou d’un scénario qui n’a pas été pris en compte. Mais même si le défilement ne fonctionne pas dans l'éditeur, cela fonctionne sur les appareils. (J'ai fait plusieurs scrolling COnstraintLayouts, je l'ai donc testé)

Remarque

En ce qui concerne votre code. Il manque une balise de fermeture à ScrollView. Je ne sais pas si c'est le cas dans le fichier ou s'il s'agit d'un échec de copier-coller, mais vous voudrez peut-être l'examiner.

4
Zoe

Pour compléter les réponses précédentes, j’ajoute l’exemple suivant, qui prend également en compte l’utilisation de la barre d’application. Avec ce code, l'éditeur de conception Android Studio semble fonctionner correctement avec ConstraintLayout.

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

vous devez entourer ma disposition de contrainte d'une balise ScrollView et lui attribuer la propriété Android: isScrollContainer = "true".

2
Sam

Constraintlayout est la valeur par défaut pour une nouvelle application. Je suis en train "d'apprendre à Android" et j'ai eu beaucoup de difficulté à comprendre comment gérer le code "exemple" par défaut à faire défiler lorsqu'un clavier est en place. J'ai vu de nombreuses applications où je dois fermer le clavier pour cliquer sur le bouton "Soumettre" et parfois, il ne disparaît pas. En utilisant cette hiérarchie [ScrollView/ContraintLayout/Fields], cela fonctionne très bien maintenant. De cette façon, nous pouvons tirer parti des avantages et de la facilité d'utilisation de ConstraintLayout dans une vue défilable.

1
Renato Bourdon

Il existe un bug dans la version 2.2 qui rend impossible le défilement de ConstraintLayout. Je suppose que ça existe toujours. Vous pouvez également utiliser LinearLayout ou RelativeLayout.

Voir aussi: Est-il possible de placer une disposition de contrainte dans une ScrollView .

1
Ege Kuzubasioglu

Vous pouvez utiliser HorizontalScrollView et ça fonctionnera aussi!

0
Morgan Koh

dans scrollview, make height et width 0 ajoutent les contraintes Top_toBottomOf et Bottom_toTopOf.

0
mohammad al-momani

Voici comment je l'ai résolu:
Si vous utilisez Nested ScrollView, à savoir ScrollView dans ConstraintLayout, utilisez la configuration suivante pour ScrollView au lieu de "WRAP_CONTENT" ou "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">
0
Sajid2405