如何根据宽度更改视图的高度?
How to change the height of the view based on width?
我有 ConstraintLayout,里面有 4 个 ImageView,我需要像 LinearLayout 一样放置任何 ImageView 权重,并根据宽度更改视图的高度。
这是我需要的:
正如你在这里看到的,我有 4 个视图,宽度相同,高度随宽度变化。
在我向您展示了我正在尝试做的事情之后,这是我现在的状态:
这是布局:
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/label_1"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintDimensionRatio="W,1:1.15"
app:layout_constraintEnd_toStartOf="@+id/label_2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="@drawable/a" />
<ImageView
android:id="@+id/label_2"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintDimensionRatio="W,1:1.15"
app:layout_constraintBaseline_toBaselineOf="@id/label_1"
app:layout_constraintEnd_toStartOf="@+id/label_3"
app:layout_constraintStart_toEndOf="@id/label_1"
app:srcCompat="@drawable/a" />
<ImageView
android:id="@+id/label_3"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintDimensionRatio="W,1:1.15"
app:layout_constraintBaseline_toBaselineOf="@id/label_1"
app:layout_constraintEnd_toEndOf="@id/label_4"
app:layout_constraintStart_toEndOf="@id/label_2"
app:srcCompat="@drawable/a" />
<ImageView
android:id="@+id/label_4"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintDimensionRatio="W,1:1.15"
app:layout_constraintBaseline_toBaselineOf="@id/label_1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@id/label_3"
app:srcCompat="@drawable/a" />
</android.support.constraint.ConstraintLayout>
注意:
我的资产@drawable/a 是 40X40
如何获得与我所附示例相同的结果?
人们会认为将四个图像视图放置在一个链中,锚定到 ConstraintLayout
父级的开始和结束,高度为您定义的 wrap_content
会产生所需的结果。不幸的是,根据我的最佳估计,链条不足以强制布局为 "open up" 并假定正确的高度。布局中唯一提供布局高度的是可绘制对象;链条不会导致布局打开到足以采用指定的比率。
我不清楚这种行为是 ConstraintLayout
的工作方式还是缺陷。无论如何,解决这个问题的方法是强制打开布局,让链本身及其成员视图适当调整。要强制打开布局,我们将定义一个 Space
视图,如下所示:
<Space
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="W,1:1.15"
app:layout_constraintEnd_toStartOf="@id/guide25"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
垂直参考线设置为布局宽度的 25%,因为每个 ImageView
将占据布局宽度的 25%。 0dp
是 match_constraints
。该比率强制 Space
的正确高度,因此也是布局的高度。 Space
在布局中不可见,但足以提供布局垂直维度。
整个 XML 文件如下。 label_3
处的链中存在错误,已更正。我还将所有 ImageViews
的高度更改为 0dp
,因此 ImageViews
可以采用所需的比率。我确实删除了可绘制对象,因此需要使用适当的 scaleType
定义重新引入它们。您在屏幕截图中看到的是 ImageViews
.
的范围
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.constraint.Guideline
android:id="@+id/guide25"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.25" />
<Space
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="W,1:1.15"
app:layout_constraintEnd_toStartOf="@id/guide25"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="@+id/label_1"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#FF00FF00"
app:layout_constraintDimensionRatio="W,1:1.15"
app:layout_constraintEnd_toStartOf="@+id/label_2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="@+id/label_2"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#FFFF0000"
app:layout_constraintBaseline_toBaselineOf="@id/label_1"
app:layout_constraintDimensionRatio="W,1:1.15"
app:layout_constraintEnd_toStartOf="@+id/label_3"
app:layout_constraintStart_toEndOf="@id/label_1" />
<ImageView
android:id="@+id/label_3"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#FF0000FF"
app:layout_constraintBaseline_toBaselineOf="@id/label_1"
app:layout_constraintDimensionRatio="W,1:1.15"
app:layout_constraintEnd_toStartOf="@id/label_4"
app:layout_constraintStart_toEndOf="@id/label_2" />
<ImageView
android:id="@+id/label_4"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#ffea00"
app:layout_constraintBaseline_toBaselineOf="@id/label_1"
app:layout_constraintDimensionRatio="W,1:1.15"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@id/label_3" />
</android.support.constraint.ConstraintLayout>
我有 ConstraintLayout,里面有 4 个 ImageView,我需要像 LinearLayout 一样放置任何 ImageView 权重,并根据宽度更改视图的高度。
这是我需要的:
正如你在这里看到的,我有 4 个视图,宽度相同,高度随宽度变化。
在我向您展示了我正在尝试做的事情之后,这是我现在的状态:
这是布局:
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/label_1"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintDimensionRatio="W,1:1.15"
app:layout_constraintEnd_toStartOf="@+id/label_2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="@drawable/a" />
<ImageView
android:id="@+id/label_2"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintDimensionRatio="W,1:1.15"
app:layout_constraintBaseline_toBaselineOf="@id/label_1"
app:layout_constraintEnd_toStartOf="@+id/label_3"
app:layout_constraintStart_toEndOf="@id/label_1"
app:srcCompat="@drawable/a" />
<ImageView
android:id="@+id/label_3"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintDimensionRatio="W,1:1.15"
app:layout_constraintBaseline_toBaselineOf="@id/label_1"
app:layout_constraintEnd_toEndOf="@id/label_4"
app:layout_constraintStart_toEndOf="@id/label_2"
app:srcCompat="@drawable/a" />
<ImageView
android:id="@+id/label_4"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintDimensionRatio="W,1:1.15"
app:layout_constraintBaseline_toBaselineOf="@id/label_1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@id/label_3"
app:srcCompat="@drawable/a" />
</android.support.constraint.ConstraintLayout>
注意: 我的资产@drawable/a 是 40X40
如何获得与我所附示例相同的结果?
人们会认为将四个图像视图放置在一个链中,锚定到 ConstraintLayout
父级的开始和结束,高度为您定义的 wrap_content
会产生所需的结果。不幸的是,根据我的最佳估计,链条不足以强制布局为 "open up" 并假定正确的高度。布局中唯一提供布局高度的是可绘制对象;链条不会导致布局打开到足以采用指定的比率。
我不清楚这种行为是 ConstraintLayout
的工作方式还是缺陷。无论如何,解决这个问题的方法是强制打开布局,让链本身及其成员视图适当调整。要强制打开布局,我们将定义一个 Space
视图,如下所示:
<Space
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="W,1:1.15"
app:layout_constraintEnd_toStartOf="@id/guide25"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
垂直参考线设置为布局宽度的 25%,因为每个 ImageView
将占据布局宽度的 25%。 0dp
是 match_constraints
。该比率强制 Space
的正确高度,因此也是布局的高度。 Space
在布局中不可见,但足以提供布局垂直维度。
整个 XML 文件如下。 label_3
处的链中存在错误,已更正。我还将所有 ImageViews
的高度更改为 0dp
,因此 ImageViews
可以采用所需的比率。我确实删除了可绘制对象,因此需要使用适当的 scaleType
定义重新引入它们。您在屏幕截图中看到的是 ImageViews
.
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.constraint.Guideline
android:id="@+id/guide25"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.25" />
<Space
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="W,1:1.15"
app:layout_constraintEnd_toStartOf="@id/guide25"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="@+id/label_1"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#FF00FF00"
app:layout_constraintDimensionRatio="W,1:1.15"
app:layout_constraintEnd_toStartOf="@+id/label_2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="@+id/label_2"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#FFFF0000"
app:layout_constraintBaseline_toBaselineOf="@id/label_1"
app:layout_constraintDimensionRatio="W,1:1.15"
app:layout_constraintEnd_toStartOf="@+id/label_3"
app:layout_constraintStart_toEndOf="@id/label_1" />
<ImageView
android:id="@+id/label_3"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#FF0000FF"
app:layout_constraintBaseline_toBaselineOf="@id/label_1"
app:layout_constraintDimensionRatio="W,1:1.15"
app:layout_constraintEnd_toStartOf="@id/label_4"
app:layout_constraintStart_toEndOf="@id/label_2" />
<ImageView
android:id="@+id/label_4"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#ffea00"
app:layout_constraintBaseline_toBaselineOf="@id/label_1"
app:layout_constraintDimensionRatio="W,1:1.15"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@id/label_3" />
</android.support.constraint.ConstraintLayout>