ScrollView ne défile pas avec ConstraintLayout et le guide

Question

Je dois faire une mise en page avec une image en haut et le texte ci-dessus. La hauteur des images doit correspondre à 40% de la hauteur de la disposition racine. Le texte a une hauteur variable. Par conséquent, le tout doit être mis dans un ScrollView.

Voici mon code:

<?xml version="1.0" encoding="utf-8"?> 
<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="@color/colorTutorialGrey" 
> 


<ScrollView 
    android:layout_width="0dp" 
    android:layout_height="0dp" 
    app:layout_constraintTop_toTopOf="parent" 
    app:layout_constraintLeft_toLeftOf="parent" 
    app:layout_constraintRight_toRightOf="parent" 
    app:layout_constraintBottom_toBottomOf="parent" 
    android:fillViewport="true" 
    > 

    <android.support.constraint.ConstraintLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     > 

     <android.support.constraint.Guideline 
      android:id="@+id/guideline" 
      android:orientation="horizontal" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      app:layout_constraintGuide_percent="0.4"/> 

     <ImageView 
      android:id="@+id/tutorial_image" 
      android:layout_width="0dp" 
      android:layout_height="0dp" 
      android:scaleType="centerCrop" 
      app:layout_constraintTop_toTopOf="parent" 
      app:layout_constraintLeft_toLeftOf="parent" 
      app:layout_constraintRight_toRightOf="parent" 
      app:layout_constraintBottom_toTopOf="@+id/guideline" 
      tools:src="@drawable/splash_bg" 
      /> 

     <LinearLayout 
      android:orientation="vertical" 
      android:layout_width="0dp" 
      android:layout_height="wrap_content" 
      android:padding="32dp" 
      app:layout_constraintTop_toBottomOf="@id/guideline" 
      app:layout_constraintLeft_toLeftOf="parent" 
      app:layout_constraintRight_toRightOf="parent" 
      > 

      <TextView 
       android:id="@+id/tutorial_title" 
       style="@style/Tutorial.Title" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       tools:text="Alle Neuerungen der App auf einen Blick" 
       /> 

      <TextView 
       android:id="@+id/tutorial_description" 
       style="@style/Tutorial.Description" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       tools:text="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. no sea takimata sanctus est Lorem ipsum dolor sit amet. no sea takimata sanctus est Lorem ipsum dolor sit amet. no sea takimata sanctus est Lorem ipsum dolor sit amet. no sea takimata sanctus est Lorem ipsum dolor sit amet. no sea takimata sanctus est Lorem ipsum dolor sit amet. no sea takimata sanctus est Lorem ipsum dolor sit amet. no sea takimata sanctus est Lorem ipsum dolor sit amet. no sea takimata sanctus est Lorem ipsum dolor sit amet. no sea takimata sanctus est Lorem ipsum dolor sit amet. no sea takimata sanctus est Lorem ipsum dolor sit amet. no sea takimata sanctus est Lorem ipsum dolor sit amet. no sea takimata sanctus est Lorem ipsum dolor sit amet. no sea takimata sanctus est Lorem ipsum dolor sit amet. no sea takimata sanctus est Lorem ipsum dolor sit amet." 
       /> 

     </LinearLayout> 

    </android.support.constraint.ConstraintLayout> 

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

La mise en page est comme on le souhaite, mais dès que je l'ai mis dans la ligne directrice, la ScrollView ne défile plus.

Quelle erreur est-ce que je fais et comment puis-je obtenir la disposition et le comportement souhaités?

Answer 1

La ligne directrice et la vue d'image doivent avoir le même ConstraintLayout en tant que parent. Déplacez la ligne de repère juste au-dessus de la vue de l'image et vous devriez être défini. Sur une note de côté, vous n'avez probablement pas besoin de ConstraintLayout. Vous pouvez également vous débarrasser probablement du LinearLayout imbriqué pour une mise en page plus plate.

---

La ligne directrice que vous avez définie est basée sur un pourcentage. Malheureusement, ce pourcentage semble être une fraction de la hauteur de la vue et non pas seulement ce que vous voyez à l'écran scrollable.

Vous souhaitez que l'image occupe 40% de la partie visible de la vue défilement. Je suggère que vous définissez la ligne directrice dans le fichier XML pour être une taille fixe (app:layout_constraintGuide_begin="100dp" par exemple) et modifier la mise en place des lignes directrices dans le code de faire quelque chose comme ce qui suit:

protected void onCreate(@Nullable Bundle savedInstanceState) { 
    super.onCreate(savedInstanceState); 
    setContentView(R.layout.scrollable); 
    final ConstraintLayout layout = (ConstraintLayout) findViewById(R.id.layout); 

    layout.post(new Runnable() { 
     @Override 
     public void run() { 
      final ScrollView scrollView = (ScrollView) layout.findViewById(R.id.scrollView); 
      final Guideline guideline = (Guideline) findViewById(R.id.guideline); 
      final ConstraintLayout.LayoutParams lp = (ConstraintLayout.LayoutParams) guideline.getLayoutParams(); 
      lp.guideBegin = (int) ((scrollView.getHeight()) * 0.4); 
      guideline.setLayoutParams(lp); 
     } 
    }); 
} 

Je suggère d'utiliser ConstraintSet#setGuidelineBegin, mais je peux » Pour que ça marche. Vous pourriez avoir plus de chance.