android - 当边距相同时，为什么 2 个组件不正好在彼此上方？

Question

我是 Android 编程的新手(第 1 天)，所以我可能遗漏了一些非常明显的东西。

在这方面，为什么“重量”TextView 和它的 EditText 组件不完全在彼此之上？ NumberPicker 和“Reps”TextView 也是如此。据我了解，由于两个组件的宽度相同且边距也相同，因此它们应该恰好位于彼此之上。

XML 供引用:-

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="center"
    android:background="@android:color/background_light"
    tools:context="host.abhi.rmcalc.MainActivity">

    <TextView
        android:id="@+id/noRepsHeading"
        android:layout_width="110dp"
        android:layout_height="45dp"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:gravity="center"
        android:text="Reps"
        android:textColor="@color/colorPrimaryDark"
        android:textSize="30sp"
        app:layout_constraintBottom_toTopOf="@+id/noReps"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/enteredWeightHeading"
        app:layout_constraintTop_toTopOf="parent" />

    <EditText
        android:id="@+id/enteredWeight"
        android:layout_width="110dp"
        android:layout_height="107dp"
        android:layout_marginBottom="80dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="2dp"
        android:defaultFocusHighlightEnabled="true"
        android:ems="10"
        android:filterTouchesWhenObscured="false"
        android:fontFamily="@font/archivo_black"
        android:gravity="center"
        android:hint="00"
        android:inputType="textPersonName|numberDecimal"
        android:textSize="50sp"
        app:layout_constraintBottom_toTopOf="@+id/oneRepMax"
        app:layout_constraintEnd_toStartOf="@+id/noReps"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/enteredWeightHeading"
        tools:focusableInTouchMode="true" />

    <TextView
        android:id="@+id/oneRepMax"
        android:layout_width="391dp"
        android:layout_height="0dp"
        android:layout_marginBottom="150dp"
        android:layout_marginTop="8dp"
        android:background="@android:color/darker_gray"
        android:fontFamily="@font/archivo_black"
        android:gravity="center"
        android:textColor="?attr/colorPrimaryDark"
        android:textSize="100sp"
        android:visibility="invisible"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/oneRepMaxHeading" />

    <NumberPicker
        android:id="@+id/noReps"
        android:layout_width="110dp"
        android:layout_height="109dp"
        android:layout_marginBottom="78dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="2dp"
        app:layout_constraintBottom_toTopOf="@+id/oneRepMax"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/enteredWeight"
        app:layout_constraintTop_toBottomOf="@+id/noRepsHeading" />

    <TextView
        android:id="@+id/enteredWeightHeading"
        android:layout_width="110dp"
        android:layout_height="45dp"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:gravity="center"
        android:text="Weight"
        android:textColor="@color/colorPrimaryDark"
        android:textSize="30sp"
        app:layout_constraintBottom_toTopOf="@+id/enteredWeight"
        app:layout_constraintEnd_toStartOf="@+id/noRepsHeading"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/oneRepMaxHeading"
        android:layout_width="283dp"
        android:layout_height="53dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="180dp"
        android:gravity="center"
        android:text="1RM Estimated"
        android:textColor="@color/colorPrimaryDark"
        android:textSize="30sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

Answer 1

罪魁祸首就在这里

<TextView
    android:id="@+id/enteredWeightHeading"
    android:layout_width="110dp"
    android:layout_height="45dp"
    android:layout_marginBottom="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginStart="8dp"
    android:gravity="center"
    android:text="Weight"
    android:textColor="@color/colorPrimaryDark"
    android:textSize="30sp"
    app:layout_constraintBottom_toTopOf="@+id/enteredWeight"
    app:layout_constraintEnd_toStartOf="@+id/noRepsHeading"
    app:layout_constraintHorizontal_chainStyle="spread_inside" <!--PROBLEM HERE-->
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

最简单的解释就是有3个chainStyles

• 打包 - 链中的元素尽可能彼此靠近放置，任何剩余空间都被推向边缘。
• Spread_inside - 前 2 个元素被放置在开始和结束的边缘，任何剩余空间或小部件均匀分布在前 2 个元素之间。
• Spread (默认) - 所有小部件和任何剩余空间均匀分布在 View 中。

要解决这个问题，只需将 chainStyle 更改为 spread

<TextView
    android:id="@+id/enteredWeightHeading"
    android:layout_width="110dp"
    android:layout_height="45dp"
    android:layout_marginBottom="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginStart="8dp"
    android:gravity="center"
    android:text="Weight"
    android:textColor="@color/colorPrimaryDark"
    android:textSize="30sp"
    app:layout_constraintBottom_toTopOf="@+id/enteredWeight"
    app:layout_constraintEnd_toStartOf="@+id/noRepsHeading"
    app:layout_constraintHorizontal_chainStyle="spread"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

希望这对您有所帮助!

编辑

来自documentaion

• Spread: The views are evenly distributed (after margins are accounted for). This is the default.
• Spread inside: The first and last view are affixed to the constraints on each end of the chain and the rest are evenly distributed.
• Weighted: When the chain is set to either spread or spread inside, you can fill the remaining space by setting one or more views to "match constraints" (0dp). By default, the space is evenly distributed between each view that's set to "match constraints," but you can assign a weight of importance to each view using the layout_constraintHorizontal_weight and layout_constraintVertical_weight attributes. If you're familiar with layout_weight in a linear layout, this works the same way. So the view with the highest weight value gets the most amount of space; views that have the same weight get the same amount of space.
• Packed: The views are packed together (after margins are accounted for). You can then adjust the whole chain's bias (left/right or up/down) by changing the chain's head view bias.