J'essaie de créer une mise en page en utilisant la mise en page de contraintes, avec un ImageView en haut, un bouton dans ImageView, un TextView en dessous, puis un autre TextView en dessous. Voici le xml:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
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="wrap_content"
android:layout_margin="10dp"
app:cardElevation="4dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/white">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/news_image1"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="16:9"
android:scaleType="centerCrop"
android:adjustViewBounds="true"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="0dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintBottom_toTopOf="@+id/news_title1"/>
<ImageButton
android:id="@+id/news_share_button_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@android:color/transparent"
android:src="@drawable/share_button_big"
app:layout_constraintBottom_toBottomOf="@+id/news_image1"
app:layout_constraintRight_toRightOf="@+id/news_image1"
android:layout_marginRight="15dp"
android:layout_marginEnd="15dp"/>
<TextView
android:id="@+id/news_title1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:gravity="center_vertical|start"
android:layout_alignParentBottom="true"
android:lines="3"
android:ellipsize="end"
app:layout_constraintTop_toBottomOf="@+id/news_image1"
app:layout_constraintBottom_toTopOf="@+id/news_read_more1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:textColor="@color/colorPrimaryText"
android:layout_margin="@dimen/news_cell0_textview_margin"
android:textSize="12sp"
android:typeface="monospace" />
<TextView
android:id="@+id/news_read_more1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:gravity="center_vertical|start"
android:layout_alignParentBottom="true"
android:lines="1"
android:ellipsize="end"
app:layout_constraintTop_toBottomOf="@+id/news_title1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
android:textColor="@color/read_more_text_color"
android:text="@string/news_read_more"
android:layout_margin="@dimen/news_cell0_textview_margin"
android:textSize="10sp" />
</android.support.constraint.ConstraintLayout>
</RelativeLayout>
</android.support.v7.widget.CardView>
Tout est correct à l'exception d'une petite marge au-dessus du premier ImageView. Quoi que je fasse, je ne peux pas me débarrasser de cette marge. Voir l'image ci-dessous.
Veuillez noter la marge entre le haut de l'ImageView et la carte, c'est ce qui me dérange.
2 réponses
Vos vues news_image, news_title1 et news_read_more1 forment une chaîne. Apparemment, bien que je ne trouve pas de documentation à ce sujet, toutes les vues d'une chaîne verticale partageront des marges verticales. En d'autres termes, l'application d'un attribut layout_marginTop ou layout_marginBottom à l'une de ces trois vues finira par l'appliquer à toutes les trois .
Vous devrez réallouer vos marges en gardant cela à l'esprit.
Éditer
On dirait que le comportement est un peu plus sophistiqué que je ne le pensais. Tout d'abord, il semble que cela ne s'applique qu'aux vues avec le spread "style de chaîne" (qui est la valeur par défaut). Deuxièmement, il semble que la marge supérieure soit appliquée à la vue sur laquelle elle est spécifiée ainsi qu'à toutes les vues au-dessus de celle-ci dans la chaîne, tandis que la marge inférieure est appliquée à la vue sur laquelle elle est spécifiée ainsi que toutes les vues ci-dessous celle-là dans la chaîne. Enfin, il semble que les marges soient cumulatives (donc si vous aviez une marge supérieure de 10dp sur votre vue de dessous et une marge supérieure de 20dp sur votre vue du milieu, le résultat final serait 30dp sur votre vue de dessus, 30dp sur votre vue du milieu et 10dp sur votre vue de dessous).
Quant à savoir comment résoudre ce problème dans votre cas spécifique? Vous devriez pouvoir utiliser les marges gauche / droite sans problème. Et puis vous devriez probablement utiliser la marge inférieure sur votre vue de dessus pour espacer les trois vues.
Éditer # 2
La réponse de Muthukrishnan m'a fait comprendre que vous pouviez résoudre ce problème en supprimant simplement la chaîne de vos vues. Si vous supprimez la contrainte app:layout_constraintBottom_toTopOf="@+id/news_title1" de votre ImageView, cela cassera la chaîne et maintenant les marges verticales ne seront pas partagées.
Essayez ceci, je supprime app:layout_constraintTop_toTopOf="parent" dans votre mise en page cela fonctionne
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
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="wrap_content"
android:layout_margin="10dp"
app:cardElevation="4dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/news_image1"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="16:9"
android:scaleType="centerCrop"
android:adjustViewBounds="true"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"/>
<ImageButton
android:id="@+id/news_share_button_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@android:color/transparent"
android:src="@drawable/ic_menu_share"
app:layout_constraintBottom_toBottomOf="@+id/news_image1"
app:layout_constraintRight_toRightOf="@+id/news_image1"
android:layout_marginRight="15dp"
android:layout_marginEnd="15dp"/>
<AliasTextView
android:id="@+id/news_title1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:gravity="center_vertical|start"
android:layout_alignParentBottom="true"
android:lines="3"
android:ellipsize="end"
app:layout_constraintTop_toBottomOf="@+id/news_image1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:textColor="@color/colorPrimaryText"
android:layout_margin="@dimen/news_cell0_textview_margin"
android:textSize="12sp"
android:typeface="monospace" />
<TextView
android:id="@+id/news_read_more1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:gravity="center_vertical|start"
android:layout_alignParentBottom="true"
android:lines="1"
android:ellipsize="end"
app:layout_constraintTop_toBottomOf="@+id/news_title1"
app:layout_constraintLeft_toLeftOf="parent"
android:textColor="@color/read_more_text_color"
android:text="@string/news_read_more"
android:layout_margin="@dimen/news_cell0_textview_margin"
android:textSize="10sp" />
</android.support.constraint.ConstraintLayout>
</RelativeLayout>
</android.support.v7.widget.CardView>