[英]Constraint Layout Getting a default top margin for 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. 我正在尝试使用约束布局创建布局,在其顶部为ImageView,在ImageView中为按钮,在其下方为TextView,然后在其下方为另一个TextView。 Following is the xml:
以下是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. 一切正确,除了第一个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. 请注意,ImageView顶部和卡之间的边距使我感到困扰。
Your news_image
, news_title1
, and news_read_more1
views form a chain. 您的
news_image
, news_title1
和news_read_more1
视图构成一个链。 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 . 换句话说,
layout_marginTop
三个视图之一应用layout_marginTop
或layout_marginBottom
属性将最终将其应用于所有三个视图。
You will have to re-allocate your margins, keeping this in mind. 请记住这一点,您必须重新分配边距。
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). 首先,它看起来像它仅适用于使用意见
spread
“连锁式”(这是默认值)。 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).
最后,看来边距是累积的(因此,如果底部视图的顶部边距为10dp,中间视图的顶部边距为20dp,则最终结果是顶部视图为30dp,中间视图为30dp,而顶部视图为10dp底视图)。
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.
然后可能应该在顶视图上使用底部页边距将三个视图隔开。
Muthukrishnan's answer made me realize that you could solve this problem by simply removing the chain from your views. Muthukrishnan的回答使我意识到,您只需从视图中删除链条就可以解决此问题。 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. 如果您从ImageView中删除
app:layout_constraintBottom_toTopOf="@+id/news_title1"
约束,这将打破链条,并且现在不共享垂直边距。
Thanks to the great starter by Ben P, I managed to figure out a solution. 感谢Ben P的出色入门,我设法找到了解决方案。 There are three(plus one weighed) chaining styles available in ConstraintLayout.
ConstraintLayout中提供了三种(加一称重)链接样式。 According to this great tutorial the chaining styles are explained as:
根据这个很棒的教程 ,链式的解释如下:
app:layout_constraintHorizontal_chainStyle=”spread” app:layout_constraintVertical_chainStyle=”spread”
app:layout_constraintHorizontal_chainStyle=”spread” app:layout_constraintVertical_chainStyle=”spread”
app:layout_constraintHorizontal_chainStyle=”spread_inside” app:layout_constraintVertical_chainStyle=”spread_inside”
app:layout_constraintHorizontal_chainStyle=”spread_inside” app:layout_constraintVertical_chainStyle=”spread_inside”
app:layout_constraintHorizontal_chainStyle=”packed” app:layout_constraintVertical_chainStyle=”packed”
app:layout_constraintHorizontal_chainStyle=”packed” app:layout_constraintVertical_chainStyle=”packed”
thelayout_constraintHorizontal_weight
and layout_constraintVertical_weight attributes
. thelayout_constraintHorizontal_weight
和layout_constraintVertical_weight attributes
为每个视图分配重要的权重。 If you're familiar with layout_weight
in a linear layout, this works the same way. layout_weight
,则其工作方式相同。 So the view with the highest weight value gets the most amount of space; spread
is the default chaining style. spread
是默认的链接样式。 I changed it to spread_inside
so that the first and last views are affixed to the constraints on each end of the chain(hence obeying the margins provided). 我将其更改为
spread_inside
以便将第一个视图和最后一个视图附加到链条两端的约束上(因此要遵守提供的边距)。 The xml now looks like: 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_constraintVertical_chainStyle="spread_inside"
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_constraintVertical_chainStyle="spread_inside"
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_constraintVertical_chainStyle="spread_inside"
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>
Try this, I remove app:layout_constraintTop_toTopOf="parent"
in your layout it works 试试这个,我在您的布局中删除了
app:layout_constraintTop_toTopOf="parent"
<?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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.