Question

我想实现的是构成两个视图，其中一个视图具有固定的长宽比，另一个视图保持在第一个视图以下（除非第一个视图为第二个视图留出足够的空间）。

这里是一种情况：

这是第二种情况：

这两个视图位于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>

但是它仅在第一种情况下有足够的空间供View 2使用。在第二种情况下，View 2移至View 1下方，并且位于屏幕外部。

修改

我找到了解决方案，对此我并不感到骄傲，但是它可以工作。仍在等待更好的主意。怎么运行的？我放置了附加视图（占位符），该视图的宽度没有限制为MATCH_PARENT，但它具有底部边距（模拟视图2的最小高度）。当空间大于最小高度时，占位符的行为与“视图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>

Answer 1

对于初学者来说，我看不到您试图在第一个视图的尺寸上添加任何约束。如果您希望它的固定长宽比为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" />

但是，如果您希望将view1高度保持在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高度/宽度尺寸，并根据情况（顶部，底部/开始，结束）为边距设置适当的约束

如何在ConstraintLayout内创建具有最小高度的可拉伸视图？

1 个答案: