Toolbar内ConstraintLayout中5个按钮等距对齐问题求助

从你描述的情况（前三个按钮挤在布局起始位置，无法均匀分布）和代码来看，问题出在你只给按钮设置了单向的首尾衔接约束，但没有利用ConstraintLayout的核心特性——**横向链（Horizontal Chain）**来实现控件的均匀分布。下面给你两种简单可行的解决方案：

方案一：使用横向Spread链（推荐） #

ConstraintLayout的链可以让一组控件在轴向上自动分配可用空间，设置spread风格后就能实现等间距排列。只需要给按钮添加双向约束并启用链即可：

修改后的XML代码：

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar 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="#131314"
    android:elevation="4dp">

    <android.support.constraint.ConstraintLayout
        android:id="@+id/relativeLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <Button
            android:id="@+id/btn_camera"
            android:layout_width="24dp"
            android:layout_height="24dp"
            android:layout_marginStart="16dp"
            android:background="@drawable/camera"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toStartOf="@id/btn_ruler"
            app:layout_constraintHorizontal_chainStyle="spread"/>

        <Button
            android:id="@+id/btn_ruler"
            android:layout_width="24dp"
            android:layout_height="24dp"
            android:background="@drawable/ruler"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toEndOf="@id/btn_camera"
            app:layout_constraintEnd_toStartOf="@id/btn_3"/>

        <Button
            android:id="@+id/btn_3"
            android:layout_width="24dp"
            android:layout_height="24dp"
            android:background="@drawable/crop"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toEndOf="@id/btn_ruler"
            app:layout_constraintEnd_toStartOf="@id/btn_price"/>

        <Button
            android:id="@+id/btn_price"
            android:layout_width="24dp"
            android:layout_height="24dp"
            android:background="@drawable/euro"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toEndOf="@id/btn_3"
            app:layout_constraintEnd_toStartOf="@id/btn_5"/>

        <Button
            android:id="@+id/btn_5"
            android:layout_width="24dp"
            android:layout_height="24dp"
            android:layout_marginEnd="16dp"
            android:background="@drawable/camera"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@id/btn_price"/>

    </android.support.constraint.ConstraintLayout>
</android.support.v7.widget.Toolbar>

关键改动说明：

• 给第一个按钮添加app:layout_constraintEnd_toStartOf="@id/btn_ruler"，同时设置app:layout_constraintHorizontal_chainStyle="spread"，将5个按钮绑定为横向均匀分布链
• 给中间三个按钮补充双向约束（start_toEndOf + end_toStartOf），让链的布局逻辑生效
• 调整首尾按钮的侧边margin为更合理的16dp（可根据需求修改），移除了原布局中第一个按钮过大的50dpmargin，让链自动分配间距

方案二：使用Guideline辅助布局 #

如果你偏好更直观的分段布局，可以添加垂直Guideline把Toolbar宽度分成5等份，再让每个按钮居中到对应分段：

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar 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="#131314"
    android:elevation="4dp">

    <android.support.constraint.ConstraintLayout
        android:id="@+id/relativeLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <!-- 4条垂直Guideline，将Toolbar宽度等分为5段 -->
        <android.support.constraint.Guideline
            android:id="@+id/guideline1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            app:layout_constraintGuide_percent="0.2"/>

        <android.support.constraint.Guideline
            android:id="@+id/guideline2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            app:layout_constraintGuide_percent="0.4"/>

        <android.support.constraint.Guideline
            android:id="@+id/guideline3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            app:layout_constraintGuide_percent="0.6"/>

        <android.support.constraint.Guideline
            android:id="@+id/guideline4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            app:layout_constraintGuide_percent="0.8"/>

        <Button
            android:id="@+id/btn_camera"
            android:layout_width="24dp"
            android:layout_height="24dp"
            android:background="@drawable/camera"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toStartOf="@id/guideline1"
            app:layout_constraintHorizontal_bias="0.5"/>

        <Button
            android:id="@+id/btn_ruler"
            android:layout_width="24dp"
            android:layout_height="24dp"
            android:background="@drawable/ruler"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toEndOf="@id/guideline1"
            app:layout_constraintEnd_toStartOf="@id/guideline2"
            app:layout_constraintHorizontal_bias="0.5"/>

        <Button
            android:id="@+id/btn_3"
            android:layout_width="24dp"
            android:layout_height="24dp"
            android:background="@drawable/crop"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toEndOf="@id/guideline2"
            app:layout_constraintEnd_toStartOf="@id/guideline3"
            app:layout_constraintHorizontal_bias="0.5"/>

        <Button
            android:id="@+id/btn_price"
            android:layout_width="24dp"
            android:layout_height="24dp"
            android:background="@drawable/euro"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toEndOf="@id/guideline3"
            app:layout_constraintEnd_toStartOf="@id/guideline4"
            app:layout_constraintHorizontal_bias="0.5"/>

        <Button
            android:id="@+id/btn_5"
            android:layout_width="24dp"
            android:layout_height="24dp"
            android:background="@drawable/camera"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toEndOf="@id/guideline4"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.5"/>

    </android.support.constraint.ConstraintLayout>
</android.support.v7.widget.Toolbar>

这种方式通过百分比Guideline明确划分布局区域，每个按钮居中在对应区域内，也能实现完美的等间距效果。

两种方案中，方案一的代码更简洁，是ConstraintLayout的标准用法，推荐优先使用~

内容的提问来源于stack exchange，提问作者Diogo Carvalho