web-dev-qa-db-fra.com

Est-il possible de mettre un ConstraintLayout dans un ScrollView?

Si récemment, avec Android Studio 2.2, il existe un nouveau ConstraintLayout qui facilite beaucoup la conception, mais contrairement à RelativeLayout et Linearlayout, je ne peux pas utiliser ScrollView pour entourer ConstraintLayot. Est-ce possible? Si c'est le cas, comment? 

c'est à dire. 

<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:layout_editor_absoluteX="0dp"
        tools:layout_editor_absoluteY="0dp">

        <Android.support.constraint.ConstraintLayout
            Android:id="@+id/constraintLayout"
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            tools:layout_editor_absoluteX="0dp"
            tools:layout_editor_absoluteY="0dp">

            <!-- Have whatever children you want inside -->

        </Android.support.constraint.ConstraintLayout>

</ScrollView>
androidandroid-layoutuser-interfaceandroid-constraintlayoutconstraint-layout
58
Seth Painter

Il y avait un bogue avec ConstraintLayout dans ScrollViews et il a été corrigé. Google a corrigé le bogue dans Android Studio 2.2 Preview 2 (constraintlayout 1.0.0-alpha2). 

Vérifiez ce lien pour les nouvelles mises à jour (Preview 2): fonctionne correctement dans ScrollView et RecycleView

29
Govinda Paliwal

Essayez d’ajouter Android:fillViewport="true" à la ScrollView.

Trouvez la solution ici: LinearLayout n'étend pas dans ScrollView

143
eric.mcgregor

utiliser NestedScrollView avec viewport true fonctionne bien pour moi 

<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>
23
rajesh vinew

Définissez ScrollViewlayout_height en tant que wrap_content, puis cela fonctionnera correctement. Vous trouverez ci-dessous des exemples qui peuvent aider quelqu'un . J'ai utilisé compile 'com.Android.support.constraint:constraint-layout:1.0.2' pour la disposition des contraintes.

<?xml version="1.0" encoding="utf-8"?>
<Android.support.constraint.ConstraintLayout
    Android:orientation="vertical"
    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:id="@+id/activity_main"
    tools:context=".ScrollViewActivity">

    <ScrollView
        Android:layout_width="0dp"
        Android:layout_height="wrap_content"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        >

        <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="wrap_content"
            Android:orientation="vertical"
            Android:paddingLeft="8dp"
            Android:paddingRight="8dp"
            Android:scrollbars="vertical">

            <TextView
                Android:id="@+id/tvCommonSurname"
                Android:layout_width="wrap_content"
                Android:layout_height="wrap_content"
                Android:text="surname"
                Android:textAppearance="?android:attr/textAppearanceLarge"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                tools:layout_constraintLeft_creator="1"
                tools:layout_constraintTop_creator="1" />

            <EditText
                Android:id="@+id/editText3"
                Android:layout_width="0dp"
                Android:layout_height="wrap_content"
                Android:layout_marginTop="8dp"
                Android:ems="10"
                Android:inputType="text"
                Android:maxLines="1"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/tvCommonSurname"
                tools:layout_constraintLeft_creator="1"
                tools:layout_constraintRight_creator="1"
                tools:layout_constraintTop_creator="1" />

            <TextView
                Android:id="@+id/tvCommonName"
                Android:layout_width="wrap_content"
                Android:layout_height="wrap_content"
                Android:layout_marginTop="8dp"
                Android:text="firstName"
                Android:textAppearance="?android:attr/textAppearanceLarge"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/editText3"
                tools:layout_constraintLeft_creator="1"
                tools:layout_constraintTop_creator="1" />

            <EditText
                Android:id="@+id/editText"
                Android:layout_width="0dp"
                Android:layout_height="wrap_content"
                Android:layout_marginTop="8dp"
                Android:ems="10"
                Android:inputType="text"
                Android:maxLines="1"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/tvCommonName"
                tools:layout_constraintLeft_creator="1"
                tools:layout_constraintRight_creator="1"
                tools:layout_constraintTop_creator="1" />

            <TextView
                Android:id="@+id/tvCommonLastName"
                Android:layout_width="wrap_content"
                Android:layout_height="wrap_content"
                Android:layout_marginTop="8dp"
                Android:text="middleName"
                Android:textAppearance="?android:attr/textAppearanceLarge"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/editText"
                tools:layout_constraintLeft_creator="1"
                tools:layout_constraintTop_creator="1" />

            <EditText
                Android:id="@+id/editText2"
                Android:layout_width="0dp"
                Android:layout_height="wrap_content"
                Android:layout_marginTop="8dp"
                Android:ems="10"
                Android:inputType="text"
                Android:maxLines="1"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/tvCommonLastName"
                tools:layout_constraintLeft_creator="1"
                tools:layout_constraintRight_creator="1"
                tools:layout_constraintTop_creator="1" />

            <TextView
                Android:id="@+id/tvCommonPhone"
                Android:layout_width="wrap_content"
                Android:layout_height="wrap_content"
                Android:layout_marginTop="8dp"
                Android:text="Phone number"
                Android:textAppearance="?android:attr/textAppearanceLarge"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/editText2"
                tools:layout_constraintLeft_creator="1"
                tools:layout_constraintTop_creator="1" />

            <EditText
                Android:id="@+id/editText4"
                Android:layout_width="0dp"
                Android:layout_height="wrap_content"
                Android:layout_marginTop="8dp"
                Android:digits="0123456789"
                Android:ems="10"
                Android:inputType="phone"
                Android:maxLength="10"
                Android:maxLines="1"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/tvCommonPhone"
                tools:layout_constraintLeft_creator="1"
                tools:layout_constraintRight_creator="1"
                tools:layout_constraintTop_creator="1" />

            <TextView
                Android:id="@+id/textView3"
                Android:layout_width="wrap_content"
                Android:layout_height="wrap_content"
                Android:layout_marginTop="8dp"
                Android:text="sex"
                Android:textAppearance="?android:attr/textAppearanceLarge"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/editText4"
                tools:layout_constraintLeft_creator="1"
                tools:layout_constraintTop_creator="1" />

            <RadioGroup 
                xmlns:Android="http://schemas.Android.com/apk/res/Android"
                Android:id="@+id/radiogroup"
                Android:layout_width="0dp"
                Android:layout_height="48dp"
                Android:layout_marginTop="8dp"
                Android:orientation="horizontal"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/textView3"
                tools:layout_constraintLeft_creator="1"
                tools:layout_constraintTop_creator="1">

                <RadioButton
                    Android:layout_width="wrap_content"
                    Android:layout_height="wrap_content"
                    Android:text="pirates" />

                <RadioButton
                    Android:layout_width="wrap_content"
                    Android:layout_height="wrap_content"
                    Android:text="ninjas" />
            </RadioGroup>

            <TextView
                Android:id="@+id/tvCommonDOB"
                Android:layout_width="wrap_content"
                Android:layout_height="wrap_content"
                Android:layout_marginTop="8dp"
                Android:text="dob"
                Android:textAppearance="?android:attr/textAppearanceLarge"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/radiogroup"
                tools:layout_constraintLeft_creator="1"
                tools:layout_constraintTop_creator="1" />

            <EditText
                Android:id="@+id/editText5"
                Android:layout_width="0dp"
                Android:layout_height="wrap_content"
                Android:layout_marginTop="8dp"
                Android:ems="10"
                Android:inputType="date"
                Android:maxLines="1"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/tvCommonDOB"
                tools:layout_constraintLeft_creator="1"
                tools:layout_constraintRight_creator="1"
                tools:layout_constraintTop_creator="1" />

            <TextView
                Android:id="@+id/tvCommonLivingCity"
                Android:layout_width="wrap_content"
                Android:layout_height="wrap_content"
                Android:layout_marginTop="8dp"
                Android:text="livingCity"
                Android:textAppearance="?android:attr/textAppearanceLarge"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/editText5"
                tools:layout_constraintLeft_creator="1"
                tools:layout_constraintTop_creator="1" />

            <EditText
                Android:id="@+id/editText34"
                Android:layout_width="0dp"
                Android:layout_height="wrap_content"
                Android:layout_marginTop="8dp"
                Android:ems="10"
                Android:inputType="text"
                Android:maxLines="1"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/tvCommonLivingCity"
                tools:layout_constraintLeft_creator="1"
                tools:layout_constraintRight_creator="1"
                tools:layout_constraintTop_creator="1" />

            <TextView
                Android:id="@+id/tvCommonPlaceOfBithday"
                Android:layout_width="wrap_content"
                Android:layout_height="wrap_content"
                Android:layout_marginTop="8dp"
                Android:text="placeOfBirth"
                Android:textAppearance="?android:attr/textAppearanceLarge"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/editText34"
                tools:layout_constraintLeft_creator="1"
                tools:layout_constraintTop_creator="1" />

            <EditText
                Android:id="@+id/editText6"
                Android:layout_width="0dp"
                Android:layout_height="wrap_content"
                Android:layout_marginTop="8dp"
                Android:ems="10"
                Android:inputType="text"
                Android:maxLines="1"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/tvCommonPlaceOfBithday"
                tools:layout_constraintLeft_creator="1"
                tools:layout_constraintRight_creator="1"
                tools:layout_constraintTop_creator="1" />

            <TextView
                Android:id="@+id/textView4"
                Android:layout_width="wrap_content"
                Android:layout_height="wrap_content"
                Android:layout_marginTop="8dp"
                Android:text="education"
                Android:textAppearance="?android:attr/textAppearanceLarge"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/editText6"
                tools:layout_constraintLeft_creator="1"
                tools:layout_constraintTop_creator="1" />

            <Spinner
                Android:id="@+id/spinner_id"
                Android:layout_width="0dp"
                Android:layout_height="48dp"
                Android:layout_marginTop="8dp"
                Android:spinnerMode="dialog"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/textView4"
                tools:layout_constraintLeft_creator="1"
                tools:layout_constraintRight_creator="1"
                tools:layout_constraintTop_creator="1" />

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


</Android.support.constraint.ConstraintLayout>
7
Sakib Syed

J'ai signalé le bogue à l'équipe de Google.

Vous pouvez le voir ici .

5
amorenew

J'ai passé 2 jours à essayer de convertir les mises en page en ConstraintLayout dans la version dite "stable" d'Android Studio 2.2 et je n'ai pas ScrollView pour travailler dans le concepteur. Je ne vais pas commencer par ajouter des contraintes XML pour Views qui sont plus loin dans le défilement. Après tout, ceci est censé être un outil de conception visuel. 

Et le nombre d'erreurs de rendu, de débordements de pile et de problèmes de thèmes que j'ai eus m'a amené à conclure que toute l'implémentation de ConstraintLayout est toujours truffée de bugs. À moins que vous ne développiez des schémas simples, je le laisserais bien jusqu'à ce qu'il y ait au moins quelques itérations supplémentaires.

Cela fait 2 jours que je ne vais pas revenir. 

3
SimonH

N'oubliez pas que si vous contraignez le bas d'une vue au bas de la présentation, la vue ne peut pas défiler.

1
ahmetvefa53

Le nouveau studio Android après 2.2 ConstraintLayout fonctionne désormais correctement dans ScrollView.

Comme cet exemple ci-dessous:

<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">
<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">
</Android.support.constraint.ConstraintLayout>
    </ScrollView>
</Android.support.constraint.ConstraintLayout>

J'espère que ça vous aidera ..!

0
Viral Patel

Puisque la ScrollView réelle est encapsulée dans une CoordinatorLayout avec une Toolbar ...

<?xml version="1.0" encoding="utf-8"?>
<Android.support.design.widget.CoordinatorLayout
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:tools="http://schemas.Android.com/tools"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent">

    <Android.support.design.widget.AppBarLayout
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:theme="@style/AppTheme.AppBarOverlay">

        <Android.support.v7.widget.Toolbar
            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="?attr/actionBarSize"
            Android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay"/>

    </Android.support.design.widget.AppBarLayout>

    <include layout="@layout/list"/>

</Android.support.design.widget.CoordinatorLayout>

... je devais définir Android:layout_marginTop="?attr/actionBarSize" pour que le défilement fonctionne:

<?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="wrap_content"
    Android:layout_marginTop="?attr/actionBarSize">

    <Android.support.constraint.ConstraintLayout
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <!-- UI elements here -->

    </Android.support.constraint.ConstraintLayout>

</ScrollView>

Ce qui précède fonctionne également avec NestedScrollView au lieu de ScrollView. Définir Android:fillViewport="true" n’est pas nécessaire pour moi.

0
JJD

J'ai eu une erreur que ConstraintLayout n'est pas autorisée, puis j'ai ajouté Android.support.constraint.ConstraintLayout et fonctionne. Je suis débutant et je ne comprends pas pourquoi.

0
Cristi Băluță

N'oubliez pas la propriété tools:context=".YouClassName" dans ScrollView.

C'est ce qui causait le blocage de mon application.

0
Dmitry