Question

此布局将显示带有一种颜色的视图，以及另一种带有另一种颜色的视图。

当layout_constraintWidth_percent = 1时，视图的宽度相同。当我将其设置为0.92 <> 1时，前景视图会比背景视图大。

谁能解决这个问题？我需要前景是背景的x百分比

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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:paddingTop="15dp"
    android:paddingBottom="15dp"
    >

  <View
      android:id="@+id/background"
      android:layout_width="match_parent"
      android:layout_height="100dp"
      android:layout_marginEnd="16dp"
      android:layout_marginStart="16dp"
      android:background="@color/colorPrimary"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintLeft_toLeftOf="parent"
      app:layout_constraintRight_toRightOf="parent"
      app:layout_constraintTop_toTopOf="parent"
      />

  <View
      android:id="@+id/foreground"
      android:layout_width="0dp"
      android:layout_height="80dp"
      android:background="@color/colorAccent"
      app:layout_constraintWidth_percent="0.94"
      app:layout_constraintHorizontal_bias="0"
      app:layout_constraintBottom_toBottomOf="@id/background"
      app:layout_constraintLeft_toLeftOf="@id/background"
      app:layout_constraintRight_toRightOf="@id/background"
      app:layout_constraintTop_toTopOf="@id/background"
      />
</android.support.constraint.ConstraintLayout>

Answer 1

删除背景的开始和结束边距。如果您需要左右边距，请将它们放在父ConstraintLayout上。现在，您的背景边距为空白，而前景为空。

还将背景宽度设置为0dp（与前景相同）。这样，背景将是父ConstraintLayout的全宽（它本身可以应用所需的边距），而前景将是背景的指定百分比。如果希望居中，还可以将前景的水平偏差设置为0.5。

喜欢这个

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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:paddingTop="15dp"
    android:paddingBottom="15dp"
    android:layout_marginEnd="16dp"
    android:layout_marginStart="16dp"
    >

  <View
      android:id="@+id/background"
      android:layout_width="0dp"
      android:layout_height="100dp"
      android:background="@color/colorPrimary"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintLeft_toLeftOf="parent"
      app:layout_constraintRight_toRightOf="parent"
      app:layout_constraintTop_toTopOf="parent"
      />

  <View
      android:id="@+id/foreground"
      android:layout_width="0dp"
      android:layout_height="80dp"
      android:background="@color/colorAccent"
      app:layout_constraintWidth_percent="0.94"
      app:layout_constraintHorizontal_bias="0.5"
      app:layout_constraintBottom_toBottomOf="@id/background"
      app:layout_constraintLeft_toLeftOf="parent"
      app:layout_constraintRight_toRightOf="parent"
      app:layout_constraintTop_toTopOf="@id/background"
      />
</android.support.constraint.ConstraintLayout>

Answer 2

app:layout_constraintWidth_percent属性是根据父ConstraintLayout's维而不是View的水平约束来计算的。因此，您需要像这样将前景包裹在另一个ConstraintLayout中（由于嵌套的布局，这有点难看）：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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:paddingTop="15dp"
    android:paddingBottom="15dp">

    <View
        android:id="@+id/background"
        android:layout_width="0dp"
        android:layout_height="100dp"
        android:layout_marginEnd="16dp"
        android:layout_marginStart="16dp"
        android:background="@color/colorPrimary"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

    <android.support.constraint.ConstraintLayout
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="@id/background"
        app:layout_constraintLeft_toLeftOf="@id/background"
        app:layout_constraintRight_toRightOf="@id/background"
        app:layout_constraintTop_toTopOf="@id/background">

        <View
            android:id="@+id/foreground"
            android:layout_width="0dp"
            android:layout_height="80dp"
            android:background="@color/colorAccent"
            app:layout_constraintHorizontal_bias="0"
            app:layout_constraintWidth_percent="0.94"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"/>

    </android.support.constraint.ConstraintLayout>

</android.support.constraint.ConstraintLayout>

请记住，同时使用app:layout_constraintWidth_percent和View上的边距可能会导致一些问题，因为宽度百分比未考虑边距。

您还可以考虑从背景中删除边距，并可能将其作为填充添加到根ConstraintLayout中，我认为这将有助于避免嵌套布局：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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:paddingTop="15dp"
    android:paddingBottom="15dp"
    android:paddingStart="16dp"
    android:paddingEnd="16dp">

    <View
        android:id="@+id/background"
        android:layout_width="0dp"
        android:layout_height="100dp"
        android:background="@color/colorPrimary"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

    <View
        android:id="@+id/foreground"
        android:layout_width="0dp"
        android:layout_height="80dp"
        android:background="@color/colorAccent"
        app:layout_constraintWidth_percent="0.94"
        app:layout_constraintHorizontal_bias="0"
        app:layout_constraintBottom_toBottomOf="@id/background"
        app:layout_constraintLeft_toLeftOf="@id/background"
        app:layout_constraintRight_toRightOf="@id/background"
        app:layout_constraintTop_toTopOf="@id/background"/>
</android.support.constraint.ConstraintLayout>

Answer 3

如doc所述，该百分比是相对于父级的：

将维度设置为 MATCH_CONSTRAINT 时，默认行为是   使生成的尺寸占用所有可用空间。一些   其他修饰符可用：


layout_constraintWidth_min 和 layout_constraintHeight_min ：将设置   此尺寸的最小尺寸

layout_constraintWidth_max 和    layout_constraintHeight_max ：将为此设置最大尺寸   尺寸

layout_constraintWidth_percent 和    layout_constraintHeight_percent ：将设置此尺寸的大小   占父母的百分比

约束宽度_百分比不能正确计算

3 个答案: