Problèmes avec ConstraintLayout - marge verticale ne fonctionne

Question

Je veux pas construire cette simple mise en page en utilisant ConstraintLayout:

Il fonctionne comme prévu lorsque Titre et Subtil ne sont que seule ligne de texte. Le problème vient avec un texte plus long. Comme vous pouvez le voir, Titre et Subtil se chevauchent les uns les autres:

Voici le code source que j'utilise pour la mise en page:

<?xml version="1.0" encoding="utf-8"?> 
<FrameLayout 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="match_parent"> 

    <android.support.constraint.ConstraintLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_gravity="center" 
     android:background="#EEEEEE"> 

     <TextView 
      android:id="@+id/textView1" 
      android:layout_width="0dp" 
      android:layout_height="wrap_content" 
      android:layout_marginTop="24dp" 
      android:layout_marginLeft="16dp" 
      android:layout_marginRight="16dp" 
      android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." 
      android:textAppearance="@style/TextAppearance.AppCompat.Headline" 
      app:layout_constraintTop_toTopOf="parent" 
      app:layout_constraintLeft_toLeftOf="parent" 
      app:layout_constraintRight_toRightOf="parent" /> 

     <TextView 
      android:id="@+id/textView2" 
      android:layout_width="0dp" 
      android:layout_height="wrap_content" 
      android:layout_marginTop="16dp" 
      android:layout_marginLeft="16dp" 
      android:layout_marginRight="16dp" 
      android:layout_marginBottom="24dp" 
      android:text="Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." 
      app:layout_constraintTop_toBottomOf="@+id/textView1" 
      app:layout_constraintLeft_toLeftOf="parent" 
      app:layout_constraintRight_toRightOf="parent" 
      app:layout_constraintBottom_toBottomOf="parent" /> 

    </android.support.constraint.ConstraintLayout> 

</FrameLayout> 

Alors, où est le problème?

---

EDIT 1 05/10/2017 13:19

On dirait que peut être reproduit uniquement sur les périphériques/simulateurs fonctionnant sous Android 6.0 (API 23). Fonctionne comme prévu sur les périphériques exécutant API 21-22, 24+.

Answer 1

Je vous recommande d'utiliser uniquement le ConstraintLayout qui vous donne chaining option. Avec elle, vous pouvez pack deux TextViews et les centrer verticalement dans ConstraintLayout lui-même sans le FrameLayout et le problème que vous rencontrez:

<android.support.constraint.ConstraintLayout 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="match_parent" 
    android:background="#EEEEEE"> 

    <TextView 
     android:id="@+id/textView1" 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     android:layout_marginLeft="16dp" 
     android:layout_marginRight="16dp" 
     android:layout_marginTop="24dp" 
     android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." 
     android:textAppearance="@style/TextAppearance.AppCompat.Headline" 
     app:layout_constraintBottom_toTopOf="@+id/textView2" 
     app:layout_constraintLeft_toLeftOf="parent" 
     app:layout_constraintRight_toRightOf="parent" 
     app:layout_constraintTop_toTopOf="parent" 
     app:layout_constraintVertical_chainStyle="packed" /> 

    <TextView 
     android:id="@+id/textView2" 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     android:layout_marginBottom="24dp" 
     android:layout_marginLeft="16dp" 
     android:layout_marginRight="16dp" 
     android:layout_marginTop="16dp" 
     android:text="Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." 
     app:layout_constraintBottom_toBottomOf="parent" 
     app:layout_constraintLeft_toLeftOf="parent" 
     app:layout_constraintRight_toRightOf="parent" 
     app:layout_constraintTop_toBottomOf="@+id/textView1" /> 

</android.support.constraint.ConstraintLayout> 

Answer 2

Votre TextView1 n'a pas de limites inférieures.

ajouter simplement

app:layout_constraintBottom_toTopOf="@+id/textView2" 

pour votre première textView

Answer 3

Sur API 23 avec ConstraintLayout la version 1.0.0-beta5, il ressemble à la la marge supérieure n'est pas respectée ou la hauteur du haut TextView n'est pas calculée correctement. Je vois un chevauchement sur API 23 mais pas sur API 24 avec cette version de ConstraintLayout. Toutefois, avec ConstraintLayout version 1.1.0-beta2, tout semble OK sur API 23 et API 24, donc cela a pu être un problème qui a été corrigé. Je suggère que vous mettre à niveau vers une version ultérieure de ConstraintLayout pour voir si le problème persiste.