3

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

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

在此处输入图像描述

4

3 回答 3

3

删除背景的开始和结束边距。如果您想要左右边距，请将它们放在父级 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>
于 2018-07-20T13:45:28.570 回答
0

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

当维度设置为MATCH_CONSTRAINT时，默认行为是让结果大小占用所有可用空间。有几个额外的修饰符可用：

  • layout_constraintWidth_min和layout_constraintHeight_min：将设置此尺寸的最小尺寸
  • layout_constraintWidth_max和 layout_constraintHeight_max：将设置此尺寸的最大尺寸
  • layout_constraintWidth_percent和 layout_constraintHeight_percent : 将这个维度的大小设置为父维度的百分比
于 2018-07-20T13:59:05.170 回答
0

该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可能会导致一些问题，因为边距不考虑宽度百分比。

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

<?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>
于 2018-07-20T13:52:33.810 回答