如何在ConstraintLayout内创建具有最小高度的可拉伸视图? [英] How to make stretchable view with min height inside ConstraintLayout?

问题描述

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

Want I want to achieve is to compose two views, where one has some fixed aspect ratio and the other one stays below the first (unless the first gives enough space for the second one).

这里是一种情况:

这是第二种情况:

这两个视图放置在 ConstraintLayout 中.我尝试使用这部分代码:

These two views are placed inside ConstraintLayout. I tried to use this part of code:

<?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下方，并且位于屏幕外部.

But it works only in the first case where there is enough space for View 2. In the second case, View 2 is moved below View 1 and it's outside the screen.

修改

我找到了解决方案，对此我并不感到骄傲，但是它可以工作.仍在等待更好的主意.怎么运行的?我放了另外一个视图(占位符)，它的宽度没有限制为 MATCH_PARENT ，但是它有底部边距(模拟View 2的最小高度).当空间大于最小高度时，占位符的行为与视图1"相同，但是在其他情况下，占位符会缩小一点以保留底部边距.

I've found solution, which I'm not proud of it, but it works. Still waiting for better idea. How it works? I put additional view (placeholder) which doesn't have constrained width to MATCH_PARENT but it has bottom margin (simulating minimum height for View 2). Placeholder behaves in the same way like View 1 when there is more space than minimum height, but in other cases it narrows a little bit to leave bottom margin.

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

推荐答案

对于初学者来说，我看不到您试图在第一个视图的尺寸上添加任何约束.如果您希望它的固定长宽比为3:4，则应将 app:layout_constraintDimensionRatio ="H，3:4" 设置为所需的视图，然后删除 app:layout_constraintDimensionRatio ="0.75.因此，您将不再需要占位符视图.所以您的布局看起来像这样:

Well for starters, I don't see you trying to add any constraint to the dimensions of the first view. If you want it to have a fixed aspect ratio of 3:4 you should set app:layout_constraintDimensionRatio="H,3:4" to your desired view and remove the app:layout_constraintDimensionRatio="0.75". Therefore you won't need the placeholder view any longer. So your layout would look something like this:

<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" .所以布局看起来像这样:

But if you wish to keep your view1 heigh to a 75% screen ratio, then you should replace your placeholder view with a horizontal Guideline to which you set your app:layout_constraintGuide_percent="0.75". So the layout would look like this:

<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" />

还请记住，不建议在 ConstraintLayout 中使用 match_parent .而是使用0dp高度/宽度尺寸，并根据情况(顶部，底部/开始，结束)为边距设置适当的约束

Also please keep in mind that using match_parent inside a ConstraintLayout is not recommended. Instead, use the 0dp height/width dimension and set the appropriate constraint for the margins depending on the case (top, bottom / start, end)

这篇关于如何在ConstraintLayout内创建具有最小高度的可拉伸视图?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！