Android ConstraintLayout跳到屏幕右侧

Question

我正在使用 Constraint Layout 并尝试按照这张图片所示放置内容:

问题是，当我启动它时，stars 字样上方的最后一个 00 会跳到屏幕右侧。因为它们都是相连的，所以其他一切都随之而来。 但在我看来，它们都应该依赖于它们左侧的元素，但它们仍然遵循 stars 一词上方的 00。

因为我已经尝试解决这个问题很长一段时间了，所以我认为我对 Constrain Layout 的理解不正确。

这是 XML:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:fresco="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <com.facebook.drawee.view.SimpleDraweeView
        android:id="@+id/sdvProfilePic"
        android:layout_width="90dp"
        android:layout_height="90dp"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="16dp"
        fresco:actualImageScaleType="fitCenter"
        fresco:failureImage="@drawable/edit_profile_profile_default_image"
        fresco:failureImageScaleType="fitCenter"
        fresco:layout_constraintEnd_toEndOf="parent"
        fresco:layout_constraintStart_toStartOf="parent"
        fresco:layout_constraintTop_toTopOf="parent"
        fresco:placeholderImage="@drawable/edit_profile_profile_default_image"
        fresco:placeholderImageScaleType="fitCenter"
        fresco:roundAsCircle="true"
        fresco:roundedCornerRadius="0.5dp" />

    <TextView
        android:id="@+id/llPostsCount"
        android:layout_width="wrap_content"
        android:layout_height="26dp"
        android:layout_marginStart="84dp"
        android:layout_marginTop="16dp"
        android:text="@string/_00_text"
        android:textColor="@color/balck282828"
        android:textSize="18sp"
        android:textStyle="bold"
        fresco:layout_constraintStart_toStartOf="parent"
        fresco:layout_constraintTop_toBottomOf="@+id/sdvProfilePic" />

    <TextView
        android:id="@+id/textView4"
        android:layout_width="40dp"
        android:layout_height="19dp"
        android:layout_marginStart="76dp"
        android:layout_marginTop="8dp"
        android:text="@string/posts"
        android:textColor="@color/regularTextColora5a7aa"
        android:textSize="14sp"
        fresco:layout_constraintStart_toStartOf="parent"
        fresco:layout_constraintTop_toBottomOf="@+id/llPostsCount" />


    <TextView
        android:id="@+id/tvFollowersCount"
        android:layout_width="wrap_content"
        android:layout_height="26dp"
        android:layout_marginStart="48dp"
        android:layout_marginTop="16dp"
        android:text="00"
        android:textColor="@color/balck282828"
        android:textSize="18sp"
        android:textStyle="bold"
        fresco:layout_constraintStart_toEndOf="@+id/llPostsCount"
        fresco:layout_constraintTop_toBottomOf="@+id/sdvProfilePic" />

    <TextView
        android:id="@+id/textView5"
        android:layout_width="59dp"
        android:layout_height="19dp"
        android:layout_marginStart="25dp"
        android:layout_marginTop="8dp"
        android:text="@string/followers"
        android:textColor="@color/regularTextColora5a7aa"
        android:textSize="14sp"
        fresco:layout_constraintStart_toEndOf="@+id/textView4"
        fresco:layout_constraintTop_toBottomOf="@+id/tvFollowersCount" />


    <TextView
        android:id="@+id/tvFollowingCount"
        android:layout_width="wrap_content"
        android:layout_height="26dp"
        android:layout_marginStart="48dp"
        android:layout_marginTop="16dp"
        android:text="00"
        android:textColor="@color/balck282828"
        android:textSize="18sp"
        android:textStyle="bold"
        fresco:layout_constraintStart_toEndOf="@+id/tvFollowersCount"
        fresco:layout_constraintTop_toBottomOf="@+id/sdvProfilePic" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="57dp"
        android:layout_height="19dp"
        android:layout_marginStart="14dp"
        android:layout_marginTop="8dp"
        android:text="@string/following"
        android:textColor="@color/regularTextColora5a7aa"
        android:textSize="14sp"
        fresco:layout_constraintStart_toEndOf="@+id/textView5"
        fresco:layout_constraintTop_toBottomOf="@+id/tvFollowingCount" />


    <TextView
        android:id="@+id/tvEditProfile"
        android:layout_width="0dp"
        android:layout_height="43dp"
        android:layout_marginBottom="2dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_weight="1"
        android:background="@drawable/selector_rcorner_white_box_lgray_ltgray"
        android:gravity="center"
        android:paddingBottom="5dp"
        android:paddingTop="5dp"
        android:text="@string/EDIT_PROFILE"
        android:textColor="@color/balck282828"
        android:textSize="14sp"
        android:textStyle="bold"
        fresco:layout_constraintBottom_toBottomOf="parent"
        fresco:layout_constraintEnd_toEndOf="parent"
        fresco:layout_constraintHorizontal_bias="0.0"
        fresco:layout_constraintStart_toStartOf="parent"
        fresco:layout_constraintTop_toBottomOf="@+id/textView3"
        fresco:layout_constraintVertical_bias="0.178" />


    <TextView
        android:id="@+id/user_stars"
        android:layout_width="21dp"
        android:layout_height="26dp"
        android:layout_marginEnd="68dp"
        android:layout_marginStart="52dp"
        android:layout_marginTop="16dp"
        android:text="00"
        android:textColor="@color/balck282828"
        android:textSize="18sp"
        android:textStyle="bold"
        fresco:layout_constraintEnd_toEndOf="parent"
        fresco:layout_constraintStart_toEndOf="@+id/tvFollowingCount"
        fresco:layout_constraintTop_toBottomOf="@+id/sdvProfilePic" />

    <TextView
        android:id="@+id/user_stars_text"
        android:layout_width="32dp"
        android:layout_height="19dp"
        android:layout_marginEnd="57dp"
        android:layout_marginStart="24dp"
        android:layout_marginTop="8dp"
        android:text="@string/userstars"
        android:textColor="@color/regularTextColora5a7aa"
        android:textSize="14sp"
        fresco:layout_constraintEnd_toEndOf="parent"
        fresco:layout_constraintStart_toEndOf="@+id/textView3"
        fresco:layout_constraintTop_toBottomOf="@+id/user_stars" />


</android.support.constraint.ConstraintLayout>

我做错了什么？

编辑

我有一个模拟器来截图我得到的结果，它看起来不像在手机上那么糟糕，但仍然不是我想要的:

抱歉质量不好，但这是我从电话中得到的信息:

Answer 1

我建议您将 fresco:layout_constraintEnd_toStartOf="@id/some-id" 添加到中间项。这样所有四个项目都可以水平居中。例如，id 为 allPostsCount 的 TextView 应该有 fresco:layout_constraintEnd_toStartOf="@id/tvFollowersCount"。

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:fresco="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <com.facebook.drawee.view.SimpleDraweeView
        android:id="@+id/sdvProfilePic"
        android:layout_width="90dp"
        android:layout_height="90dp"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="16dp"
        fresco:actualImageScaleType="fitCenter"
        fresco:failureImage="@drawable/edit_profile_profile_default_image"
        fresco:failureImageScaleType="fitCenter"
        fresco:placeholderImage="@drawable/edit_profile_profile_default_image"
        fresco:placeholderImageScaleType="fitCenter"
        fresco:roundAsCircle="true"
        fresco:roundedCornerRadius="0.5dp" 

        fresco:layout_constraintEnd_toEndOf="parent"
        fresco:layout_constraintStart_toStartOf="parent"
        fresco:layout_constraintTop_toTopOf="parent"
        />

    <TextView
        android:id="@+id/llPostsCount"
        android:layout_width="wrap_content"
        android:layout_height="26dp"
        android:layout_marginStart="84dp"
        android:layout_marginTop="16dp"
        android:text="@string/_00_text"
        android:textColor="@color/balck282828"
        android:textSize="18sp"
        android:textStyle="bold"
        fresco:layout_constraintStart_toStartOf="parent"
        fresco:layout_constraintEnd_toStartOf="@id/tvFollowersCount"
        fresco:layout_constraintTop_toBottomOf="@+id/sdvProfilePic" />

    <TextView
        android:id="@+id/textView4"
        android:layout_width="40dp"
        android:layout_height="19dp"
        android:layout_marginStart="76dp"
        android:layout_marginTop="8dp"
        android:text="@string/posts"
        android:textColor="@color/regularTextColora5a7aa"
        android:textSize="14sp"
        fresco:layout_constraintStart_toStartOf="parent"
        fresco:layout_constraintEnd_toStartOf="@id/textView5"
        fresco:layout_constraintTop_toBottomOf="@+id/llPostsCount" />


    <TextView
        android:id="@+id/tvFollowersCount"
        android:layout_width="wrap_content"
        android:layout_height="26dp"
        android:layout_marginStart="48dp"
        android:layout_marginTop="16dp"
        android:text="00"
        android:textColor="@color/balck282828"
        android:textSize="18sp"
        android:textStyle="bold"
        fresco:layout_constraintStart_toEndOf="@+id/llPostsCount"
        fresco:layout_constraintEnd_toStartOf="@id/tvFollowingCount"
        fresco:layout_constraintTop_toBottomOf="@+id/sdvProfilePic" />

    <TextView
        android:id="@+id/textView5"
        android:layout_width="59dp"
        android:layout_height="19dp"
        android:layout_marginStart="25dp"
        android:layout_marginTop="8dp"
        android:text="@string/followers"
        android:textColor="@color/regularTextColora5a7aa"
        android:textSize="14sp"
        fresco:layout_constraintStart_toEndOf="@+id/textView4"
        fresco:layout_constraintEnd_toStartOf="@id/textView3"
        fresco:layout_constraintTop_toBottomOf="@+id/tvFollowersCount" />


    <TextView
        android:id="@+id/tvFollowingCount"
        android:layout_width="wrap_content"
        android:layout_height="26dp"
        android:layout_marginStart="48dp"
        android:layout_marginTop="16dp"
        android:text="00"
        android:textColor="@color/balck282828"
        android:textSize="18sp"
        android:textStyle="bold"
        fresco:layout_constraintStart_toEndOf="@+id/tvFollowersCount"
        fresco:layout_constraintEnd_toStartOf="@id/user_stars"
        fresco:layout_constraintTop_toBottomOf="@+id/sdvProfilePic" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="57dp"
        android:layout_height="19dp"
        android:layout_marginStart="14dp"
        android:layout_marginTop="8dp"
        android:text="@string/following"
        android:textColor="@color/regularTextColora5a7aa"
        android:textSize="14sp"
        fresco:layout_constraintStart_toEndOf="@+id/textView5"
        fresco:layout_constraintTop_toBottomOf="@+id/tvFollowingCount" />


    <TextView
        android:id="@+id/tvEditProfile"
        android:layout_width="0dp"
        android:layout_height="43dp"
        android:layout_marginBottom="2dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_weight="1"
        android:background="@drawable/selector_rcorner_white_box_lgray_ltgray"
        android:gravity="center"
        android:paddingBottom="5dp"
        android:paddingTop="5dp"
        android:text="@string/EDIT_PROFILE"
        android:textColor="@color/balck282828"
        android:textSize="14sp"
        android:textStyle="bold"
        fresco:layout_constraintBottom_toBottomOf="parent"
        fresco:layout_constraintEnd_toEndOf="parent"
        fresco:layout_constraintHorizontal_bias="0.0"
        fresco:layout_constraintStart_toStartOf="parent"
        fresco:layout_constraintTop_toBottomOf="@+id/textView3"
        fresco:layout_constraintVertical_bias="0.178" />


    <TextView
        android:id="@+id/user_stars"
        android:layout_width="21dp"
        android:layout_height="26dp"
        android:layout_marginEnd="68dp"
        android:layout_marginStart="52dp"
        android:layout_marginTop="16dp"
        android:text="00"
        android:textColor="@color/balck282828"
        android:textSize="18sp"
        android:textStyle="bold"
        fresco:layout_constraintEnd_toEndOf="parent"
        fresco:layout_constraintStart_toEndOf="@+id/tvFollowingCount"
        fresco:layout_constraintTop_toBottomOf="@+id/sdvProfilePic" />

    <TextView
        android:id="@+id/user_stars_text"
        android:layout_width="32dp"
        android:layout_height="19dp"
        android:layout_marginEnd="57dp"
        android:layout_marginStart="24dp"
        android:layout_marginTop="8dp"
        android:text="@string/userstars"
        android:textColor="@color/regularTextColora5a7aa"
        android:textSize="14sp"
        fresco:layout_constraintEnd_toEndOf="parent"
        fresco:layout_constraintStart_toEndOf="@+id/textView3"
        fresco:layout_constraintTop_toBottomOf="@+id/user_stars" />


</android.support.constraint.ConstraintLayout>