![](/img/trans.png)
[英]How to handle ConstraintLayout horizontal & vertical with view.GONE
[英]ConstraintLayout View.GONE usage
我最近開始使用ConstraintLayout。 正如我發現的那樣,大多數功能都非常簡單,並且在文檔中對樣本,文本和視頻教程等進行了詳細解釋。
我想到的是如何盡可能優雅地解決這個“謎題”?
如您所見,在布局的右側部分,我有多個左對齊的視圖。 在最后一行中,有3個視圖水平對齊(它們也在彼此之間對齊)。 問題是:如果我將第一個View的可見性從該行設置為GONE,則另外兩個(在同一行中)按預期向左移動,但下面的那個(垂直對齊中的最后一行)超過該行(因為它constraintTop屬性設置為View設置為GONE的底部。
我能想到的唯一解決方案是使用ViewGroup對這3個視圖進行分組,並將約束添加到最后一行View。
我錯過了ConstraintLayout上的一些屬性,這對我的情況有幫助嗎? 如果在GONE View中設置其中一個,可能會出現某種后退(或多個)約束?
對不起,如果我的解釋看起來很深奧,也許圖片會幫助你更多:)
LE:增加了布局: https : //gist.github.com/DooruAdryan/7e7920a783f07b865489b1af0d933570
您可以使用ConstraintLayout的新“ Barriers
功能。
<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>
現在,最后一行取決於屏障而不是第三行的其中一個視圖。 由於障礙取決於第二行的三個視圖,因此您不會出現邊緣問題。
另外,我注意到你不需要指南。 右段可以直接依賴於imageview。
如果您不熟悉障礙,這里有一個幫助您的鏈接 。
由於此功能僅在ConstraintLayout的1.1.0 beta1版本中可用,因此不要忘記將此行添加到build.gradle文件中。
compile 'com.android.support.constraint:constraint-layout:1.1.0-beta1'
確保包含maven { url "https://maven.google.com" }
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.