Android ConstraintLayout存在问题-ImageView 16:9顶部边距不适当
我想使用ConstraintLayout构建以下布局: 我使用此源进行布局:Android ConstraintLayout存在问题-ImageView 16:9顶部边距不适当,android,android-imageview,margin,android-constraintlayout,constraint-layout-chains,Android,Android Imageview,Margin,Android Constraintlayout,Constraint Layout Chains,我想使用ConstraintLayout构建以下布局: 我使用此源进行布局: <?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_pa
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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="match_parent">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="@color/colorAccent">
<ImageView
android:id="@+id/imageView"
android:layout_width="0dp"
android:layout_height="0dp"
android:scaleType="centerCrop"
app:srcCompat="@android:color/darker_gray"
app:layout_constraintDimensionRatio="h,16:9"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toTopOf="@+id/textView1" />
<TextView
android:id="@+id/textView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:text="Title"
android:textAppearance="@style/TextAppearance.AppCompat.Headline"
app:layout_constraintTop_toBottomOf="@+id/imageView"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toTopOf="@+id/textView2" />
<TextView
android:id="@+id/textView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginBottom="24dp"
android:text="Subtle"
app:layout_constraintTop_toBottomOf="@+id/textView1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent" />
</android.support.constraint.ConstraintLayout>
</FrameLayout>
正如您所见,ImageView顶部有一个不必要的边距,尽管layout指示marginTop=0。试试这个->我删除了ImageView中的app:layout\u constraint bottom\u tototopof=“@+id/textView1”
,效果很好
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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="match_parent">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="@color/colorAccent">
<ImageView
android:id="@+id/imageView"
android:layout_width="0dp"
android:layout_height="0dp"
android:scaleType="centerCrop"
app:srcCompat="@android:color/darker_gray"
app:layout_constraintDimensionRatio="h,16:9"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />
<TextView
android:id="@+id/textView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:text="Title"
android:textAppearance="@style/TextAppearance.AppCompat.Headline"
app:layout_constraintTop_toBottomOf="@+id/imageView"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toTopOf="@+id/textView2" />
<TextView
android:id="@+id/textView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginBottom="24dp"
android:text="Subtle"
app:layout_constraintTop_toBottomOf="@+id/textView1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent" />
</android.support.constraint.ConstraintLayout>
</FrameLayout>
试试这个->我在图像视图中删除了应用程序:layout\u constraintBottom\u toTopOf=“@+id/textView1”
,效果很好
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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="match_parent">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="@color/colorAccent">
<ImageView
android:id="@+id/imageView"
android:layout_width="0dp"
android:layout_height="0dp"
android:scaleType="centerCrop"
app:srcCompat="@android:color/darker_gray"
app:layout_constraintDimensionRatio="h,16:9"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />
<TextView
android:id="@+id/textView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:text="Title"
android:textAppearance="@style/TextAppearance.AppCompat.Headline"
app:layout_constraintTop_toBottomOf="@+id/imageView"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toTopOf="@+id/textView2" />
<TextView
android:id="@+id/textView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginBottom="24dp"
android:text="Subtle"
app:layout_constraintTop_toBottomOf="@+id/textView1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent" />
</android.support.constraint.ConstraintLayout>
</FrameLayout>
我需要去掉这个最高利润
为此,只需删除此行
app:layout_constraintBottom_toTopOf="@+id/textView1"
从您的ImageView
我需要去掉这个最高利润
为此,只需删除此行
app:layout_constraintBottom_toTopOf="@+id/textView1"
从您的ImageView
中,前两个答案将起作用。如果要维护垂直链,您还可以将app:layout\u constraintVertical\u chainStyle=“spread\u inside”
添加到顶部ImageView
下面是添加此语句后的图像(但不更改任何其他内容)
以下是XML:
<FrameLayout 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="match_parent">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="@color/colorAccent">
<ImageView
android:id="@+id/imageView"
android:layout_width="0dp"
android:layout_height="0dp"
android:scaleType="centerCrop"
app:srcCompat="@android:color/darker_gray"
app:layout_constraintDimensionRatio="h,16:9"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintVertical_chainStyle="spread_inside"
app:layout_constraintBottom_toTopOf="@+id/textView1" />
<TextView
android:id="@+id/textView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:text="Title"
android:textAppearance="@style/TextAppearance.AppCompat.Headline"
app:layout_constraintTop_toBottomOf="@+id/imageView"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toTopOf="@+id/textView2" />
<TextView
android:id="@+id/textView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginBottom="24dp"
android:text="Subtle"
app:layout_constraintTop_toBottomOf="@+id/textView1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent" />
</android.support.constraint.ConstraintLayout>
</FrameLayout>
更新:因此上述内容在API 23上不适用于ConstraintLayout
1.0.2版。请尝试以下操作:
从textView2
中删除android:layout\u marginTop=“16dp”
,并将android:layout\u marginBottom=“16dp”
添加到textView1
。这就不同了。前两个答案会起作用。如果要维护垂直链,您还可以将app:layout\u constraintVertical\u chainStyle=“spread\u inside”
添加到顶部ImageView
下面是添加此语句后的图像(但不更改任何其他内容)
以下是XML:
<FrameLayout 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="match_parent">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="@color/colorAccent">
<ImageView
android:id="@+id/imageView"
android:layout_width="0dp"
android:layout_height="0dp"
android:scaleType="centerCrop"
app:srcCompat="@android:color/darker_gray"
app:layout_constraintDimensionRatio="h,16:9"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintVertical_chainStyle="spread_inside"
app:layout_constraintBottom_toTopOf="@+id/textView1" />
<TextView
android:id="@+id/textView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:text="Title"
android:textAppearance="@style/TextAppearance.AppCompat.Headline"
app:layout_constraintTop_toBottomOf="@+id/imageView"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toTopOf="@+id/textView2" />
<TextView
android:id="@+id/textView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginBottom="24dp"
android:text="Subtle"
app:layout_constraintTop_toBottomOf="@+id/textView1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent" />
</android.support.constraint.ConstraintLayout>
</FrameLayout>
更新:因此上述内容在API 23上不适用于ConstraintLayout
1.0.2版。请尝试以下操作:
从textView2
中删除android:layout\u marginTop=“16dp”
,并将android:layout\u marginBottom=“16dp”
添加到textView1
。这会产生不同。根据回答此问题时发布的答案和评论,并考虑到constraint layout v1.1.0仍处于测试阶段,此时最好的解决方案是使用app:layout\u constraint Vertical\u chainStyle=“packed”
:
基于对该问题的回答和评论,并考虑到constraint layout v1.1.0仍处于测试阶段,目前最好的解决方案是使用app:layout\u constraint Vertical\u chainStyle=“packed”
:
其要点是使用垂直偏差为0的包装链,以便链的内容物位于顶部。另外,我不知道为什么要使用框架布局——您可能不需要这样做
对于1.1.0-beta2:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colorAccent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<ImageView
android:id="@+id/imageView"
android:layout_width="0dp"
android:layout_height="0dp"
android:scaleType="centerCrop"
app:layout_constraintBottom_toTopOf="@+id/textView1"
app:layout_constraintDimensionRatio="h,16:9"
app:layout_constraintVertical_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="packed"
app:srcCompat="@android:color/darker_gray" />
<TextView
android:id="@+id/textView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:text="Title"
android:textAppearance="@style/TextAppearance.AppCompat.Headline"
app:layout_constraintTop_toBottomOf="@+id/imageView"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toTopOf="@+id/textView2" />
<TextView
android:id="@+id/textView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginBottom="24dp"
android:text="Subtle"
app:layout_constraintTop_toBottomOf="@+id/textView1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent" />
</android.support.constraint.ConstraintLayout>
其要点是使用垂直偏差为0的包装链,以便链的内容物位于顶部。另外,我不知道为什么要使用框架布局——您可能不需要这样做
对于1.1.0-beta2:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colorAccent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<ImageView
android:id="@+id/imageView"
android:layout_width="0dp"
android:layout_height="0dp"
android:scaleType="centerCrop"
app:layout_constraintBottom_toTopOf="@+id/textView1"
app:layout_constraintDimensionRatio="h,16:9"
app:layout_constraintVertical_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="packed"
app:srcCompat="@android:color/darker_gray" />
<TextView
android:id="@+id/textView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:text="Title"
android:textAppearance="@style/TextAppearance.AppCompat.Headline"
app:layout_constraintTop_toBottomOf="@+id/imageView"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toTopOf="@+id/textView2" />
<TextView
android:id="@+id/textView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginBottom="24dp"
android:text="Subtle"
app:layout_constraintTop_toBottomOf="@+id/textView1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent" />
</android.support.constraint.ConstraintLayout>
你的布局重心在中心。把它去掉,你就可以很好地go@NSimon不,这没用。。。查看此屏幕截图删除此:app:layou-constraint-bottom\u-toTopOf=“@+id/textView1”@SuhaylSH如果app:layou-constraint-bottom\u-tototopof=“@+id/textView1”
已删除,则我会以某种方式获得textView1和imageView之间40dp的垂直距离。看这个屏幕截图,你的布局是重心。把它去掉,你就可以很好地go@NSimon不,这没用。。。查看此屏幕截图删除此:app:layou-constraint-bottom\u-toTopOf=“@+id/textView1”@SuhaylSH如果app:layou-constraint-bottom\u-tototopof=“@+id/textView1”
已删除,则我会以某种方式获得textView1和imageView之间40dp的垂直距离。查看此屏幕截图,查看结果。现在textView1和imageView之间的垂直距离约为40dp。请参见结果。现在textView1和imageView之间的垂直距离约为40dp。请参见results dropbox.com/s/tjw1raf224aaq6l/…。现在textView1和imageView之间的垂直距离约为40dp。请参见results dropbox.com/s/tjw1raf224aaq6l/…。现在textView1和imageView之间的垂直距离约为40dp。前两个答案不起作用,我得到textView1和imageView之间的距离约为40dp。使用“spread_inside”时,textView1和textView2之间没有垂直边距。请看这个屏幕截图。只需复制/粘贴您的源代码,并在运行于API 23的Nexus 5模拟器上获得这些结果,在运行于API 23的real Nexus 5上获得相同的结果。正如您现在看到的,textView1和textView2之间没有空格。请告诉我,您使用的是哪种约束布局版本@Cheticamp?@EugeneBrusov?我想我们之前讨论过您的另一个问题。我使用最新的beta版本:1.1.0-beta2。如果你不想运行一个beta版本(可以理解),你可能想考虑1.0.1作为最新的生产版本,如果你还没有运行它。是的,1.1.0-beta2解决了很多问题,只是它还处于测试阶段。无论如何,谢谢你为我测试这个!前两个答案不起作用,textView1和imageView之间的距离大约为40dp。使用“spread_inside”时,textView1和textView2之间没有垂直边距。请看这个屏幕截图。只需复制/粘贴您的源代码,并在运行于API 23的Nexus 5模拟器上获得这些结果,在运行于API 23的real Nexus 5上获得相同的结果。正如您现在看到的,textView1和textView2.Tel之间没有空格