web-dev-qa-db-fra.com

Comment puis-je faire défiler verticalement le ConstraintLayout?

Le contenu de l'activité principale ressemble à ceci:

l’écran principal ressemble à (tout cela à l’intérieur de ConstraintLayout):

  • titre de l'image
  • rendez-vous amoureux
  • l'image elle-même
  • description de l'image

La description de l'image peut être trop longue pour être affichée. Pour résoudre ce problème, je peux la placer dans un ScrollView, et cela fonctionne très bien. Cependant, je voudrais ScrollView l’ensemble de ConstraintLayout, et cela ne fonctionne pas correctement: impossible de faire défiler et certaines TextViews n’apparaissent pas!

Je suis nouveau dans le développement Android; l'aide serait appréciée!

Code pertinent:

<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:id="@+id/desciptionScroll"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.picture.nasa.nasadailyimage.NasaDailyImage"
    tools:showIn="@layout/activity_nasa_daily_image">

 <TextView
    Android:id="@+id/imageTitle"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:layout_marginLeft="8dp"
    Android:layout_marginStart="8dp"
    Android:text="@string/test_image_title"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

 <TextView
    Android:id="@+id/imageDate"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:layout_marginLeft="8dp"
    Android:layout_marginStart="8dp"
    Android:text="@string/test_image_date"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/imageTitle" />

 <ImageView
    Android:id="@+id/imageDisplay"
    Android:layout_width="368dp"
    Android:layout_height="408dp"
    Android:layout_marginLeft="8dp"
    Android:layout_marginStart="8dp"
    Android:layout_marginTop="3dp"
    Android:src="@mipmap/test_image"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/imageDate" />

<TextView 
    Android:id="@+id/imageDescription"
    Android:layout_width="368dp"
    Android:layout_height="0dp"
    Android:layout_marginLeft="8dp" 
    Android:layout_marginStart="8dp" 
    Android:layout_marginTop="4dp" 
    Android:text="@string/test_image_description" 
    app:layout_constraintLeft_toLeftOf="parent" 
    app:layout_constraintTop_toBottomOf="@+id/imageDisplay" />

</Android.support.constraint.ConstraintLayout>
androidandroid-scrollviewandroid-constraintlayout
5
user7879812

Pour faire défiler les éléments à l'écran, je pense que vous pourriez utiliser un NestedScrollView dans un CoordinatorLayout . J'ai l'habitude de mettre un LinearLayout avec tous les éléments que j'y afficherais.

Par exemple:

<Android.support.design.widget.CoordinatorLayout
    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="com.xengar.Android.puzzlewildanimals.ui.HelpActivity">

    <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
            Android:id="@+id/toolbar"
            Android:layout_width="match_parent"
            Android:layout_height="?attr/actionBarSize"
            Android:background="?attr/colorPrimary"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Dark" />

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

    <Android.support.v4.widget.NestedScrollView
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <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:id="@+id/desciptionScroll"
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            tools:context="com.picture.nasa.nasadailyimage.NasaDailyImage"
            tools:showIn="@layout/activity_nasa_daily_image">


            <TextView
                Android:id="@+id/imageTitle"
                Android:layout_width="wrap_content"
                Android:layout_height="wrap_content"
                Android:layout_marginLeft="8dp"
                Android:layout_marginStart="8dp"
                Android:text="@string/test_image_title"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <TextView
                Android:id="@+id/imageDate"
                Android:layout_width="wrap_content"
                Android:layout_height="wrap_content"
                Android:layout_marginLeft="8dp"
                Android:layout_marginStart="8dp"
                Android:text="@string/test_image_date"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/imageTitle" />

            <ImageView
                Android:id="@+id/imageDisplay"
                Android:layout_width="368dp"
                Android:layout_height="408dp"
                Android:layout_marginLeft="8dp"
                Android:layout_marginStart="8dp"
                Android:layout_marginTop="3dp"
                Android:src="@mipmap/test_image"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/imageDate" />

            <TextView
                Android:id="@+id/imageDescription"
                Android:layout_width="wrap_content"
                Android:layout_height="wrap_content"
                Android:layout_marginLeft="8dp"
                Android:layout_marginStart="8dp"
                Android:layout_marginTop="4dp"
                Android:text="@string/test_image_description"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/imageDisplay" />




        </Android.support.constraint.ConstraintLayout>
    </Android.support.v4.widget.NestedScrollView>

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

Si cela ne fonctionne pas, vous pouvez remplacer ConstraintLayout par LinearLayout . J'espère que cela vous aidera.

8
Angel Garcia

Pour ajouter le défilement à n’importe quelle vue, vous ajoutez une ScrollView. Dans votre code, ajoutez-le en tant que racine (si ScrolLView n'est pas la racine et qu'il y a plus de contenu, ajoutez ScrollView autour de ConstraintLayout). déplacez les espaces de noms (lignes contenant xmlns) vers la nouvelle racine. Ajoutez largeur et hauteur dans ScrollView à match_parent (ou ce que vous avez déjà) et définissez la hauteur de ConstraintLayout sur wrap_content.

Cependant, vous ne pourrez pas faire défiler correctement en mode Création. ( référence ). Mais cela fonctionnera toujours comme prévu sur un périphérique.

REMARQUE:

Si votre mise en page ne défile pas avec un SCrollView, veillez à définir le height du ConstraintLayout sur wrap_content

0
Zoe