时间戳

首页 > 解决方案 > 如何在 ConstraintLayout 中制作具有最小高度的可拉伸视图？

android - 如何在 ConstraintLayout 中制作具有最小高度的可拉伸视图？

问题描述

我想要实现的是组合两个视图，其中一个具有一些固定的纵横比，另一个保持在第一个之下（除非第一个为第二个提供足够的空间）。

这是一个案例：

第一个案例

这是第二种情况：

第二个

这两个视图都放在里面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 相同，但在其他情况下，它会稍微变窄以留下底部边距。

<?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>

标签： androidandroid-constraintlayout

解决方案

对于初学者来说，我没有看到您尝试向第一个视图的尺寸添加任何约束。如果您希望它具有 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在 a中使用。ConstraintLayout相反，使用 0dp 高度/宽度尺寸并根据情况（顶部、底部/开始、结束）为边距设置适当的约束

推荐阅读