ConstraintLayout边距

Question

ConstraintLayout边距

14

我有一个简单的布局。

<?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="wrap_content"
    android:background="@color/colorDarkGray">


    <RelativeLayout
        android:id="@+id/container3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginTop="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:alpha="0.7"
            android:fontFamily="sans-serif"
            android:letterSpacing="0.03"
            android:text="Another text"
            android:textColor="@color/colorWhite"
            android:textSize="11sp"
            android:textStyle="normal" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:fontFamily="sans-serif"
            android:letterSpacing="0.03"
            android:text="Some text"
            android:textColor="@color/colorWhite"
            android:textSize="11sp"
            android:textStyle="normal" />
    </RelativeLayout>
</android.support.constraint.ConstraintLayout>

在设计视图中，它看起来非常

。如您所见，没有左右边距。上下边距效果良好。如果我移除左边或右边的边距，相对布局会超出屏幕一点。猜想我完全可以不用相对布局，但我很想知道为什么会发生这种情况。

- TooLazy

只需将RelativeLayout的宽度设置为match parent（0dp）即可。 - FarshidABZ

这种情况发生是因为您将textView与父视图的右侧和左侧对齐，而您的RelativeLayout是wrap_content。 - FarshidABZ

3个回答

10

尝试将你的RelativeLayout宽度更改为android:layout_width="0dp"。

<?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="wrap_content"
    android:background="@color/colorDarkGray">


    <RelativeLayout
        android:id="@+id/container3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginTop="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:alpha="0.7"
            android:fontFamily="sans-serif"
            android:letterSpacing="0.03"
            android:text="Another text"
            android:textColor="@color/colorWhite"
            android:textSize="11sp"
            android:textStyle="normal" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:fontFamily="sans-serif"
            android:letterSpacing="0.03"
            android:text="Some text"
            android:textColor="@color/colorWhite"
            android:textSize="11sp"
            android:textStyle="normal" />
    </RelativeLayout>
</android.support.constraint.ConstraintLayout>

- Ratilal Chopda

1

ConstraintLayout不支持match_parent属性，你需要将宽度设置为"0dp"。 - FarshidABZ

7

这感觉就像是违背了约束布局的初衷。 - Peter

0

当您将RelativeLayout定义如下时，布局中当然没有左右边距：

<RelativeLayout
    android:id="@+id/container3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="8dp"
    android:layout_marginStart="8dp"
    android:layout_marginLeft="8dp"
    android:layout_marginRight="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginTop="8dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent"

这意味着 RelativeLayout 具有 wrap_content 的宽度和高度，并且位于父项的中心（使用我们的 constraintTop、Bot 等）。

如何解决？只需将相对布局的 width 设置为 0dp。根据约束，这意味着您的 RelativeLayout 将与父容器一样宽。

- Kingfisher Phuoc

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

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

- Eugene Brusov · Accepted Answer

在ConstraintLayout中应避免使用嵌套视图，原因如下：

ConstraintLayout允许您创建具有平面视图层次结构（无嵌套视图组）的大型和复杂的布局，正如使用ConstraintLayout创建响应式UI中所述。
传统的嵌套布局层次结构会对性能造成负面影响，正如了解ConstraintLayout的性能优势中所述。

结果布局源代码应如下所示：

<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="wrap_content"
    android:background="@color/colorDarkGray">

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:alpha="0.7"
        android:fontFamily="sans-serif"
        android:letterSpacing="0.03"
        android:text="Another text"
        android:textColor="@color/colorWhite"
        android:textSize="11sp"
        android:textStyle="normal"
        android:id="@+id/textView"
        android:layout_marginTop="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginBottom="8dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/textView2"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_chainStyle="spread" />

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:gravity="end"
        android:fontFamily="sans-serif"
        android:letterSpacing="0.03"
        android:text="Some text"
        android:textColor="@color/colorWhite"
        android:textSize="11sp"
        android:textStyle="normal"
        android:id="@+id/textView2"
        android:layout_marginTop="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginBottom="8dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/textView"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

</android.support.constraint.ConstraintLayout>

你可以通过按照Google的Codelab的步骤来学习如何使用ConstraintLayout构建布局。