Utilisation de ConstraintLayout View.GONE
J'ai récemment commencé à utiliser ConstraintLayout. Comme je l'ai découvert, la plupart des fonctionnalités sont assez simples et bien expliquées dans les documents avec des exemples, des didacticiels texte et vidéo et tout.
La chose qui m'est venue à l'esprit est de savoir comment résoudre ce "puzzle" le plus élégant possible?
Comme vous pouvez le voir, dans la partie droite de la mise en page, j'ai plusieurs vues alignées à gauche. Sur la dernière mais une ligne, il y a 3 vues alignées horizontalement (elles sont également alignées en haut les unes des autres). Le problème est: si je définit la visibilité de la première vue à partir de cette ligne comme GONE, les deux autres (dans la même ligne), allez à gauche comme prévu, mais celle en dessous (dernière ligne dans l'alignement vertical) passe sur la ligne précédente (parce que son La propriété constraintTop est définie en bas de la vue définie comme GONE).
La seule solution à laquelle je peux penser est d'utiliser un ViewGroup pour regrouper ces 3 vues et y ajouter la contrainte de la dernière vue de la ligne.
Suis-je en train de manquer une propriété sur ConstraintLayout qui pourrait aider mon cas? Peut-être une sorte de contrainte de repli (ou plusieurs) si l'une d'entre elles est définie sur une vue GONE?
Désolé si mon explication semble assez abstraite, peut-être que les photos vous aideront davantage :)
LE: Mise en page ajoutée: https://Gist.github.com/DoruAdryan/7e7920a783f07b865489b1af0d93357
Vous pouvez utiliser la nouvelle fonctionnalité Barriers de ConstraintLayout.
<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.support.v7.widget.AppCompatImageView
Android:id="@+id/iv_item_small_product_image"
Android:layout_width="113dp"
Android:layout_height="113dp"
Android:layout_marginLeft="7dp"
Android:layout_marginStart="7dp"
Android:background="@Android:drawable/btn_radio"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Android.support.v7.widget.AppCompatImageView
Android:id="@+id/iv_row_1"
Android:layout_width="0dp"
Android:layout_height="wrap_content"
Android:layout_marginStart="8dp"
Android:background="@Android:drawable/bottom_bar"
app:layout_constraintLeft_toRightOf="@+id/iv_item_small_product_image"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ro.emag.Android.views.FontTextView
Android:id="@+id/tv_row_2"
Android:layout_width="0dp"
Android:layout_height="wrap_content"
Android:layout_marginStart="8dp"
Android:layout_marginTop="3dp"
Android:ellipsize="end"
Android:maxLines="2"
app:layout_constraintLeft_toRightOf="@+id/iv_item_small_product_image"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@+id/iv_row_1"
app:layout_goneMarginTop="0dp"
tools:text="Some text long enough to be split on multiple lines on some devices." />
<Android.support.v7.widget.AppCompatRatingBar
Android:id="@+id/rb_row_3_1"
style="@style/Widget.AppCompat.RatingBar.Small"
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:layout_marginStart="8dp"
Android:layout_marginTop="9dp"
Android:isIndicator="true"
Android:numStars="5"
Android:stepSize="0.1"
app:layout_constraintLeft_toRightOf="@+id/iv_item_small_product_image"
app:layout_constraintTop_toBottomOf="@id/tv_row_2" />
<TextView
Android:id="@+id/tv_row_3_2"
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:layout_marginLeft="6dp"
Android:layout_marginStart="6dp"
Android:layout_marginTop="9dp"
app:layout_constraintLeft_toRightOf="@+id/rb_row_3_1"
app:layout_constraintTop_toBottomOf="@id/tv_row_2"
tools:text="106" />
<TextView
Android:id="@+id/tv_row_3_3"
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:layout_marginLeft="6dp"
Android:layout_marginStart="6dp"
Android:layout_marginTop="9dp"
app:layout_constraintLeft_toRightOf="@+id/tv_row_3_2"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@id/tv_row_2"
app:layout_goneMarginLeft="0dp"
app:layout_goneMarginStart="0dp"
tools:text="Options available" />
<Android.support.constraint.Barrier
Android:id="@+id/barrier"
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
app:barrierDirection="bottom"
app:constraint_referenced_ids="rb_row_3_1, tv_row_3_2, tv_row_3_3" />
<TextView
Android:id="@+id/tv_row_4"
Android:layout_width="0dp"
Android:layout_height="wrap_content"
Android:layout_marginStart="8dp"
Android:layout_marginTop="3dp"
Android:ellipsize="end"
Android:maxLines="1"
app:layout_constraintLeft_toRightOf="@+id/iv_item_small_product_image"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@+id/barrier"
tools:text="Some text on last row" />
</Android.support.constraint.ConstraintLayout>
Maintenant, la dernière ligne dépend de la barrière au lieu d'une des vues de la troisième ligne. Comme la barrière dépend des trois vues de la deuxième rangée, vous n'aurez pas le problème de la marge disparue.
De plus, j'ai remarqué que vous n'avez pas besoin de la directive. Le bon segment peut dépendre directement de la vue d'image.
Si vous n'êtes pas familier avec les obstacles, voici un lien pour vous aider.
Comme cette fonctionnalité n'est disponible que dans la version 1.1.0 beta1 de ConstraintLayout, n'oubliez pas d'ajouter cette ligne à votre fichier build.gradle.
compile 'com.Android.support.constraint:constraint-layout:1.1.0-beta1'
assurez-vous d'inclure maven { url "https://maven.google.com" }