Android：如何在将包含在父布局中的布局中使用 constraint_height_percent答案

【问题标题】：Android: How to use constraint_height_percent inside a layout that will be included in a parent layoutAndroid：如何在将包含在父布局中的布局中使用 constraint_height_percent
【发布时间】：2021-04-10 08:33:07
【问题描述】：

目前，我正在尝试使我的视图的高度和宽度相对于可用空间，因此我的 ui 将更加负责。我遇到的问题是，每当我尝试将此布局包含在父布局中（例如在 fragment_shop 中包含 shop_content）时，我包含的布局的高度和宽度不再起作用。

我做了一个小例子来说明这一点。在此示例中，您可以看到工具栏的高度应为给定高度的 17%。当我查看子布局中的设计选项卡时，一切正常，但是在我的 fragment_shopping_cart 中导入此布局时，视图仍然不可见/高度未正确显示。

child_layout

<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"> <!-- Changing this to wrap_content makes weird stuff -->

    <com.google.android.material.appbar.MaterialToolbar
        android:id="@+id/calibrate_btn_background"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:background="@color/color_primary"
        android:clickable="false"
        app:layout_constraintHeight_percent="0.17" <!-- Height should take 0.17 -->
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />
    
</androidx.constraintlayout.widget.ConstraintLayout>

parent_layout

<layout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".framework.ui.view.fragments.shop.ShoppingCartFragment">

        <com.google.android.material.appbar.MaterialToolbar
            android:id="@+id/shopping_cart_toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/color_primary"
            app:title="@string/bottom_nav_shopping_cart"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent">

        </com.google.android.material.appbar.MaterialToolbar>

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/rv_shopping_cart"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
            app:layout_constraintBottom_toTopOf="@id/shopping_cart_btn"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/shopping_cart_toolbar"
            tools:listitem="@layout/shopping_cart_list_item" />

        <include
            android:id="@+id/shopping_cart_btn"
            layout="@layout/child_layout"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent" />

    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

它应该是什么样子

外观如何

我在这里做错了什么？我感谢每一个帮助。注意：我是 Android 响应式 ui 的新手

编辑

随着这个问题越来越难以理解，我将尝试用这个例子更好地解释它：我有一个名为 app_standard_checkout_btn 的布局，我在我的几个布局（包括它）中使用它。此布局包含不同的视图，例如 工具栏（用作背景）、文本视图和其他内容。

目前，工具栏 的高度已修复为 124dp，这就是问题所在。我不希望高度为 124dp，而是为包含布局的整个可用高度的 0.15（在某些情况下与 124dp 相同）。这是如何实现的？

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">

    <data>
        <variable
            name="price"
            type="Float" />
        <variable
            name="btnText"
            type="String" />
        <variable
            name="btnIcon"
            type="android.graphics.drawable.Drawable" />
        <variable
            name="btnTextCapitalized"
            type="Boolean" />
    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <com.google.android.material.appbar.MaterialToolbar
            android:id="@+id/calibrate_btn_background"
            android:layout_width="match_parent"
            android:layout_height="124dp" <!-- THIS FIXED VALUE IS BAD -->
            android:background="@color/color_btn_gray"
            android:clickable="false"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent" />

        <com.google.android.material.textview.MaterialTextView
            android:id="@+id/calibrate_btn_tv_sum"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/standard8dpMargin"
            android:layout_marginEnd="@dimen/big16dpMargin"
            android:text="@string/calibrate_btn_price"
            android:textColor="@color/color_text_dark"
            android:textSize="@dimen/textHeadlineNormal2"
            app:layout_constraintEnd_toStartOf="@+id/shop_item_price"
            app:layout_constraintTop_toTopOf="@+id/calibrate_btn_background" />

        <TextView
            android:id="@+id/shop_item_price"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@{price}"
            android:textColor="@color/color_text_blue"
            android:textSize="@dimen/textHeadlineNormal2"
            android:textStyle="bold"
            app:layout_constraintBottom_toBottomOf="@+id/calibrate_btn_tv_sum"
            app:layout_constraintEnd_toStartOf="@+id/calibbrate_btn_tv_intern_curr"
            app:layout_constraintTop_toTopOf="@+id/calibrate_btn_tv_sum"
            tools:text="4800.00" />

        <TextView
            android:id="@+id/calibbrate_btn_tv_intern_curr"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/currency"
            android:textColor="@color/color_text_blue"
            android:textSize="@dimen/textHeadlineNormal2"
            android:textStyle="bold"
            app:layout_constraintBottom_toBottomOf="@+id/shop_item_price"
            app:layout_constraintEnd_toEndOf="@+id/calibrate_btn_next"
            app:layout_constraintTop_toTopOf="@+id/shop_item_price" />

        <com.google.android.material.textview.MaterialTextView
            android:id="@+id/calibrate_btn_tv_description"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="4dp"
            android:text="@string/calibrate_btn_desc"
            android:textColor="@color/color_text_gray"
            android:textSize="@dimen/textDescriptionNormal4"
            app:layout_constraintEnd_toEndOf="@+id/calibrate_btn_next"
            app:layout_constraintTop_toBottomOf="@+id/shop_item_price" />

        <com.google.android.material.button.MaterialButton
            android:id="@+id/calibrate_btn_next"
            android:layout_width="match_parent"
            android:layout_height="56dp"
            android:layout_marginStart="@dimen/big16dpMargin"
            android:layout_marginEnd="@dimen/big16dpMargin"
            android:layout_marginBottom="@dimen/standard8dpMargin"
            android:clickable="true"
            android:focusable="true"
            android:text="@{btnText}"
            android:textAllCaps="@{btnTextCapitalized}"
            android:textSize="@dimen/textDescriptionNormal1"
            android:textStyle="normal"
            app:backgroundTint="@color/color_btn_blue"
            app:icon="@{btnIcon}"
            app:iconGravity="textStart"
            app:layout_constraintBottom_toBottomOf="@id/calibrate_btn_background"
            app:layout_constraintEnd_toEndOf="@id/calibrate_btn_background"
            app:layout_constraintStart_toStartOf="@+id/calibrate_btn_background" />


    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

【问题讨论】：

发布答案后我想到了一些东西..你需要17% of the given height到工具栏..我假设你需要父布局的总高度（而不是子布局的高度） )，您需要执行以下两个选项：首先 Toolbar 必须是父布局 ConstraintLayout 的子布局，以约束其 17%。 second: 您的子布局不应该对父布局中的视图有任何约束。为了填充其父布局的整个区域，因此允许工具栏高度为 17%整个高度..
工具栏不能是父约束布局的子项，因为这会使include 标记过时。如果工具栏必须是父布局的子级，那么我如何才能包含它？那么你能否改变你的答案，应用你的答案并不能解决我的问题。其次，工具栏不应填充整个父级，而应仅填充其中的 0.17 个。当 recyclerview 不再显示时，我的工具栏填充整个视图的目的是什么？
当然我会..但需要了解更多..现在您需要工具栏占父布局的 17%..您是否希望子布局具有相同的高度/宽度父母？
@Zain 我已经编辑了我的问题，希望可以理解。
感谢您编辑问题.. 在您的短语中“包含布局”是指app_standard_checkout_btn 还是引用它的布局？

标签： android android-layout android-view android-constraintlayout

【解决方案1】：

这一行

app:layout_constraintHeight_percent="0.17"

属于parent_layout，应该为<include标签设置或至少为ConstraintLayout放置在child_layout（文件中的根视图）

【讨论】：

但是我到底该如何设置我的 child_layout 的样式呢？当我将 `app:layout_constraintHeight_percent="0.25"` 设置到我的工具栏和 include_tag 中时，它看起来很奇怪。我无法将其设置为 child_layout 的约束布局，因为在约束布局内还会有其他视图

【解决方案2】：

您需要将child_layout 的顶部约束到ReyclerView 的底部

所以在 child_layout 中添加 bleow 约束

app:layout_constraintTop_toBottomOf="@+id/rv_shopping_cart"

在此更改后，整个父布局将是：

<layout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".framework.ui.view.fragments.shop.ShoppingCartFragment">

        <com.google.android.material.appbar.MaterialToolbar
            android:id="@+id/shopping_cart_toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/color_primary"
            app:title="@string/bottom_nav_shopping_cart"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent">

        </com.google.android.material.appbar.MaterialToolbar>

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/rv_shopping_cart"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
            app:layout_constraintBottom_toTopOf="@id/shopping_cart_btn"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/shopping_cart_toolbar"
            tools:listitem="@layout/shopping_cart_list_item" />

        <include
            android:id="@+id/shopping_cart_btn"
            layout="@layout/child_layout"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/rv_shopping_cart"
            app:layout_constraintStart_toStartOf="parent" />

    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

编辑

我不希望高度为 124dp，而是为包含布局的整个可用高度的 0.15

现在您希望 Toolbar 成为父布局的 17%，而它不是它的直接子布局。这看起来很奇怪，并且与工具栏的 ConstraintLayout 指导不匹配不是父母ConstraintLayout的直系子女

因此，您不能将 Toolbar 限制为父 ConstraintLayout；相反，您可以将整个子布局约束到父布局。因此，您需要通过硬编码或约束来限制整个子布局的高度。在不限制高度的情况下，布局会像在共享图片中一样消失。

在最佳答案中，我将其限制在 RecyclerView 的底部，这就是您在与 app:layout_constraintBottom_toTopOf="@id/shopping_cart_btn" 共享的 RecyclerView 约束中所做的。这可能并不完美，因为我们无法在编译时预测 RecyclerView 的高度。

所以，这里是另一个选项，它使用app:layout_constraintHeight_percent 约束来约束子布局相对于父布局的高度，就像你使用它的Toolbar 一样，但百分比大于 17%。合适的百分比由你来选，我这里选50%。

现在父级的高度是 100%。孩子的高度是 50%，因为您需要 Toolbar 高度是父母的 17%，所以现在将其翻倍为 34%。而且你必须根据你选择的整个子布局的值来改变它。

现在父布局将是

父布局：

<layout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".framework.ui.view.fragments.shop.ShoppingCartFragment">

        <com.google.android.material.appbar.MaterialToolbar
            android:id="@+id/shopping_cart_toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/color_primary"
            app:title="@string/bottom_nav_shopping_cart"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent">

        </com.google.android.material.appbar.MaterialToolbar>

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/rv_shopping_cart"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/shopping_cart_toolbar"
            tools:listitem="@layout/shopping_cart_list_item" />

        <include
            android:id="@+id/shopping_cart_btn"
            layout="@layout/child_layout"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            app:layout_constraintHeight_percent="0.5"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent" />

    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

子布局：

<?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="0dp"> <!-- Changing this to wrap_content makes weird stuff -->

    <com.google.android.material.appbar.MaterialToolbar
        android:id="@+id/calibrate_btn_background"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:background="@color/color_primary"
        android:clickable="false"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHeight_percent="0.34"
        app:layout_constraintStart_toStartOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

【讨论】：