代码之家 › 专栏 › 技术社区 › Nominalista

如何在ConstraintLayout中创建最小高度的可拉伸视图?

android-constraintlayout android

Nominalista · 技术社区 · 6 年前

我想要实现的是合成两个视图,其中一个具有固定的长宽比,另一个保持在第一个视图之下(除非第一个视图为第二个视图提供足够的空间)。

这里有一个案例:

下面是第二个案例:

这两个视图放在 ConstraintLayout . 我试着用这部分代码:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
    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">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/view1"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintDimensionRatio="0.75"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/view2"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintHeight_min="100dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/view1"/>

</androidx.constraintlayout.widget.ConstraintLayout>

但它只在第一种情况下工作,即视图2有足够的空间。在第二种情况下,视图2移动到视图1的下方,并且在屏幕之外。

编辑

我找到了解决办法,我并不以它为荣,但它奏效了。还在等更好的主意。它是怎么工作的?我放置了附加视图(占位符),该视图没有将宽度限制为 MATCH_PARENT 但它有下边距(模拟视图2的最小高度)。占位符的行为方式与视图1相同,当空间大于最小高度时,占位符的行为方式与视图1相同,但在其他情况下,占位符会缩小一点以保留下边距。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:background="@android:color/black">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/view1"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintDimensionRatio="0.75"
        app:layout_constraintTop_toTopOf="parent"/>

    <View
        android:id="@+id/placeholder"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginBottom="100dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintDimensionRatio="0.75"
        app:layout_constraintVertical_bias="0"
        app:layout_constraintBottom_toBottomOf="parent"/>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/view2"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintTop_toBottomOf="@id/placeholder"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

1 回复 | 直到 6 年前

beto_stark 6 年前

首先,我不认为你试图给第一个视图的尺寸增加任何限制。如果你想它有一个3:4的固定长宽比,你应该设置 app:layout_constraintDimensionRatio="H,3:4" 到您想要的视图并删除 app:layout_constraintDimensionRatio="0.75". 因此,您不再需要占位符视图。所以你的布局应该是这样的:

<androidx.constraintlayout.widget.ConstraintLayout
    android:id="@+id/view1"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintDimensionRatio="H,3:4"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<androidx.constraintlayout.widget.ConstraintLayout
    android:id="@+id/view2"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@id/view1" />

但是如果你想让你的视图1保持在75%的屏幕比例,那么你应该用一个水平的指导来代替你的占位符视图 app:layout_constraintGuide_percent="0.75" . 所以布局如下:

<androidx.constraintlayout.widget.ConstraintLayout
    android:id="@+id/view1"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintBottom_toTopOf="@id/guideline"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent="0.75" />

<androidx.constraintlayout.widget.ConstraintLayout
    android:id="@+id/view2"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@id/view1" />

同时请记住使用 match_parent 在一个 ConstraintLayout 不推荐。相反,请使用0dp高度/宽度维度,并根据情况为边距设置适当的约束(顶部、底部/开始、结束)