约束布局获取imageview的默认上边距(Constraint Layout Getting a default top margin for imageview)

约束布局获取imageview的默认上边距(Constraint Layout Getting a default top margin for imageview)

我正在尝试使用约束布局创建布局，顶部是ImageView，ImageView中有一个按钮，下面是TextView，然后是下面的另一个TextView。 以下是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>

除了第一个ImageView顶部的小边距外，一切都是正确的。 无论我做什么，我都无法摆脱这种差距。 见下图。

请注意ImageView顶部和卡之间的边距，这是令我不安的。

I am trying to create a layout using constraint layout, with an ImageView on top, a button in the ImageView, a TextView below it and then another TextView below it. Following is the 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>

Everything is correct except for a small margin on top of the first ImageView. Whatever I do I cannot get rid of that margin. See the image below.

Please note the margin between the top of the ImageView and the card, that is what is troubling me.

最满意答案

您的news_image ， news_title1和news_read_more1视图形成一个链。 显然，虽然我找不到相关的文档，但垂直链中的所有视图都将共享垂直边距。 换句话说，将layout_marginTop或layout_marginBottom属性应用于这三个视图之一将最终将其应用于所有这三个视图。

您将不得不重新分配您的利润，记住这一点。

编辑

看起来这种行为比我想象的要复杂一些。 首先，看起来它只适用于具有spread “链式”的视图（这是默认值）。 其次，看起来上边距应用于指定的视图以及链中的那个上方的所有视图，而底边距应用于指定的视图以及下面的所有视图。链。 最后，看起来边距是累积的（所以如果你的底部视图有10dp的上边距，中间视图上有20dp的上边距，最终结果将是你的顶视图30dp，中间视图30dp，你的10dp）底部视图）。

至于如何在特定情况下解决这个问题？ 您应该可以使用左/右边距而不会出现问题。 然后你可能应该在顶视图上使用底部边距来区分三个视图。

编辑＃2

Muthukrishnan的回答让我意识到你可以通过简单地从你的观点中删除链来解决这个问题。 如果从ImageView中删除app:layout_constraintBottom_toTopOf="@+id/news_title1"约束，则会破坏链，现在不会共享垂直边距。

Your news_image, news_title1, and news_read_more1 views form a chain. Apparently, though I cannot find documentation on this, all views in a vertical chain will share vertical margins. In other words, applying a layout_marginTop or layout_marginBottom attribute to one of those three views will wind up applying it to all three of them.

You will have to re-allocate your margins, keeping this in mind.

Edit

Looks like the behavior is a little more sophisticated than I thought. First of all, it looks like it only applies to views with the spread "chain style" (which is the default). Second, it looks like top margin is applied to the view it is specified on as well as all views above that one in the chain, while bottom margin is applied to the view it is specified on as well as all views below that one in the chain. Finally, it appears that margins are cumulative (so if you had 10dp top margin on your bottom view and 20dp top margin on your middle view, the final result would be 30dp on your top view, 30dp on your middle view, and 10dp on your bottom view).

As for how to solve this problem in your specific case? You should be able to use left/right margins without issue. And then probably you should use bottom margin on your top view to space the three views out.

Edit #2

Muthukrishnan's answer made me realize that you could solve this problem by simply removing the chain from your views. If you delete the app:layout_constraintBottom_toTopOf="@+id/news_title1" constraint from your ImageView, that will break the chain and now the vertical margins aren't shared.