ConstraintLayout 高度与 `wrap_content`
ConstraintLayout height with `wrap_content`
我有以下 xml:
<ImageView
android:id="@+id/iv1"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="@color/gray"
android:layout_margin="8dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@id/iv2"
app:layout_constraintDimensionRatio="1:1"
/>
<ImageView
android:id="@+id/iv2"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="@color/red"
android:layout_margin="8dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="@id/iv1"
app:layout_constraintRight_toLeftOf="@id/iv3"
app:layout_constraintDimensionRatio="1:1"
/>
<ImageView
android:id="@+id/iv3"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="8dp"
android:background="@color/yellow"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="@id/iv2"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintDimensionRatio="1:1"
/>
这在布局预览中给出了以下内容:
但是,我打算 ConstraintLayout
成为 RelativeLayout
的 child,ConstraintLayout
的高度设置为 wrap_content
。但是设置 wrap_content
会导致整个 ConstraintLayout
的高度缩小为 0。如何让 wrap_content
工作?
好的,首先你可能不应该将 ConstraintLayout 放在 RelativeLayout 中。
其次,如果您的 Constraintlayout 没有定义大小并且其子元素也没有定义大小,则您不能 "make wrap_content work"
要完成这项工作,您可以 A:将 Constraintlayout 的高度和宽度设置为 100dp 或 match_parent,或 B:将 Constraintlayout 的子元素的高度和宽度设置为 100dp
100dp 为例
您可以使用线性布局和权重使其兼容所有屏幕尺寸。
下面是一个这样的示例,
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:weightSum="3">
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="1" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="2" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="3" />
</LinearLayout>
ConstraintLayout
不能直接分屏。您必须添加指南才能为您的 ImageView
设置最大宽度。您可以获得有关 Guideline
here.
的更多信息
顺便说一句,根据您在评论部分描述的需要,您可以使用 GuideLine
进行布局,如下所示:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/sunriseContainerRL"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!-- first box end guide-line -->
<android.support.constraint.Guideline
android:id="@+id/firstBoxEndGL"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.33" />
<!-- second box end guide-line -->
<android.support.constraint.Guideline
android:id="@+id/secondBoxEndGL"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.66" />
<!-- third box end guide-line -->
<android.support.constraint.Guideline
android:id="@+id/thirdBoxEndGL"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.99" />
<ImageView
android:id="@+id/iv1"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="8dp"
android:background="@color/colorTimeText"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintEnd_toStartOf="@+id/firstBoxEndGL"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="@+id/iv2"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="8dp"
android:background="@color/colorTimeText"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintEnd_toStartOf="@+id/secondBoxEndGL"
app:layout_constraintLeft_toRightOf="@+id/iv1"
app:layout_constraintRight_toLeftOf="@+id/iv3"
app:layout_constraintStart_toEndOf="@+id/firstBoxEndGL"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="@+id/iv3"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="8dp"
android:background="@color/colorTimeText"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintEnd_toEndOf="@+id/thirdBoxEndGL"
app:layout_constraintStart_toEndOf="@+id/secondBoxEndGL"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
</RelativeLayout>
我有以下 xml:
<ImageView
android:id="@+id/iv1"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="@color/gray"
android:layout_margin="8dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@id/iv2"
app:layout_constraintDimensionRatio="1:1"
/>
<ImageView
android:id="@+id/iv2"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="@color/red"
android:layout_margin="8dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="@id/iv1"
app:layout_constraintRight_toLeftOf="@id/iv3"
app:layout_constraintDimensionRatio="1:1"
/>
<ImageView
android:id="@+id/iv3"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="8dp"
android:background="@color/yellow"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="@id/iv2"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintDimensionRatio="1:1"
/>
这在布局预览中给出了以下内容:
但是,我打算 ConstraintLayout
成为 RelativeLayout
的 child,ConstraintLayout
的高度设置为 wrap_content
。但是设置 wrap_content
会导致整个 ConstraintLayout
的高度缩小为 0。如何让 wrap_content
工作?
好的,首先你可能不应该将 ConstraintLayout 放在 RelativeLayout 中。
其次,如果您的 Constraintlayout 没有定义大小并且其子元素也没有定义大小,则您不能 "make wrap_content work"
要完成这项工作,您可以 A:将 Constraintlayout 的高度和宽度设置为 100dp 或 match_parent,或 B:将 Constraintlayout 的子元素的高度和宽度设置为 100dp
100dp 为例
您可以使用线性布局和权重使其兼容所有屏幕尺寸。
下面是一个这样的示例,
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:weightSum="3">
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="1" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="2" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="3" />
</LinearLayout>
ConstraintLayout
不能直接分屏。您必须添加指南才能为您的 ImageView
设置最大宽度。您可以获得有关 Guideline
here.
顺便说一句,根据您在评论部分描述的需要,您可以使用 GuideLine
进行布局,如下所示:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/sunriseContainerRL"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!-- first box end guide-line -->
<android.support.constraint.Guideline
android:id="@+id/firstBoxEndGL"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.33" />
<!-- second box end guide-line -->
<android.support.constraint.Guideline
android:id="@+id/secondBoxEndGL"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.66" />
<!-- third box end guide-line -->
<android.support.constraint.Guideline
android:id="@+id/thirdBoxEndGL"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.99" />
<ImageView
android:id="@+id/iv1"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="8dp"
android:background="@color/colorTimeText"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintEnd_toStartOf="@+id/firstBoxEndGL"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="@+id/iv2"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="8dp"
android:background="@color/colorTimeText"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintEnd_toStartOf="@+id/secondBoxEndGL"
app:layout_constraintLeft_toRightOf="@+id/iv1"
app:layout_constraintRight_toLeftOf="@+id/iv3"
app:layout_constraintStart_toEndOf="@+id/firstBoxEndGL"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="@+id/iv3"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="8dp"
android:background="@color/colorTimeText"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintEnd_toEndOf="@+id/thirdBoxEndGL"
app:layout_constraintStart_toEndOf="@+id/secondBoxEndGL"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
</RelativeLayout>