constraintWidth_percent计算不正确

Question

constraintWidth_percent计算不正确

3

这个布局将显示一个带有一种颜色的视图和另一个带有另一种颜色的视图。

当layout_constraintWidth_percent = 1时，这两个视图宽度相同。当我将它设置在0.92＆lt;＆gt; 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>

- RuAware

3个回答

0

如文档所述，百分比是相对于父级的：

当将尺寸设置为MATCH_CONSTRAINT时，默认行为是使结果大小占用所有可用空间。还有几个附加修饰符可用：

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

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

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

- Benjamin

0

app:layout_constraintWidth_percent 属性是根据父级 ConstraintLayout 的尺寸计算的，而不是 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和边距可能会导致一些问题，因为边距不会计入宽度百分比。

您还可以考虑从背景中删除边距，并将它们添加到根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>

- Pawel Laskowski

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Tyler V · Accepted Answer

去掉背景的开始和结束边距。如果你想要左右边距，把它们放在父级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>