如何在约束布局android中给出百分比权重

Question

如何根据设备高度设计具有可伸缩空间的屏幕下方剩余空间

我可以通过使用 weight 和 weight sum 属性的线性布局轻松设计它，但不知道如何在约束布局中做到这一点

Answer 1

如果您定义的视图具有定义的高度（wrap_content 或指定的高度），那么问题是如何分配剩余空间。如果我正确阅读了您的问题，您希望 40% 的剩余空间位于顶部，20% 位于中间，40% 位于底部，总共 100% 的空间和 100% 的空间是ConstraintLayout 的高度减去小部件的组合高度。

您可以在 ConstraintLayout 链中使用权重来分配权重，但权重将分配给Space widgets，如下所示。所有视图都必须是垂直链的一部分，该垂直链被限制在 ConstraintLayout 的顶部和底部。

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

    <Space
        android:id="@+id/space40.1"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@+id/view1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_weight="40" />

    <View
        android:id="@+id/view1"
        android:layout_width="100dp"
        android:layout_height="125dp"
        android:background="@android:color/holo_blue_bright"
        app:layout_constraintBottom_toTopOf="@+id/space20"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/space40.1" />

    <Space
        android:id="@+id/space20"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@+id/view2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/view1"
        app:layout_constraintVertical_weight="20" />

    <View
        android:id="@+id/view2"
        android:layout_width="300dp"
        android:layout_height="50dp"
        android:background="@android:color/holo_blue_bright"
        app:layout_constraintBottom_toTopOf="@+id/view3"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/space20" />

    <View
        android:id="@+id/view3"
        android:layout_width="300dp"
        android:layout_height="50dp"
        android:layout_marginTop="16dp"
        android:background="@android:color/holo_blue_bright"
        app:layout_constraintBottom_toTopOf="@+id/view4"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/view2" />

    <View
        android:id="@+id/view4"
        android:layout_width="200dp"
        android:layout_height="50dp"
        android:layout_marginTop="32dp"
        android:background="@android:color/holo_blue_bright"
        app:layout_constraintBottom_toTopOf="@+id/space40.2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/view3" />

    <Space
        android:id="@+id/space40.2"
        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/view4"
        app:layout_constraintVertical_weight="40" />
</androidx.constraintlayout.widget.ConstraintLayout>

布局显示如下：

Answer 2

您可以将GuideLines 与这样的百分比值结合起来：

<?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"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_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.2" />

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

<Button
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="0dp"
    app:layout_constraintHeight_percent="0.1"
    android:text="Button"
    app:layout_constraintBottom_toTopOf="@+id/button2"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="@+id/guideline" />

<Button
    android:id="@+id/button2"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintHeight_percent="0.1"
    android:layout_marginStart="8dp"
    android:layout_marginEnd="8dp"
    android:text="Button"
    app:layout_constraintBottom_toTopOf="@+id/button3"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/button" />

<Button
    android:id="@+id/button3"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintHeight_percent="0.1"
    android:layout_marginStart="8dp"
    android:layout_marginEnd="8dp"
    android:text="Button"
    app:layout_constraintBottom_toTopOf="@+id/button4"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/button2" />

<Button
    android:id="@+id/button4"
    android:layout_width="wrap_content"
    android:layout_height="0dp"
    app:layout_constraintHeight_percent="0.1"
    android:text="Button"
    app:layout_constraintBottom_toTopOf="@+id/guideline2"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/button3"/>

</androidx.constraintlayout.widget.ConstraintLayout>

这是它在预览中的样子（如果你尝试运行它，在设备上）：