ConstraintLayout 中可以链接多少个视图（添加关系）

Question

Android 中的约束布局支持视图链接（https://developer.android.com/reference/android/support/constraint/ConstraintLayout#chain-style）

我检查了几个例子，到处只展示了 3 个视图来演示这个概念。

3是极限吗？

我尝试添加第 4 个元素，但它没有按照概念链接。

链接 3 个元素

链接 4 个元素

代码 - https://gist.github.com/vamsigp/784be59f8ae1e2137ece1349c726d1f8

Answer 1

您的布局有误：

app:layout_constraintRight_toRightOf="share2"

应该是：

app:layout_constraintRight_toLeftOf="@+id/share2"

Answer 2

3 不是限制，您可以有 4 个或更多链接在一起的视图。

这里是一个4视图链的例子：

<?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">

<Button
    android:id="@+id/button9"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Button"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toStartOf="@+id/button10"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/button12"
    app:layout_constraintTop_toTopOf="parent" />

<Button
    android:id="@+id/button10"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Button"
    app:layout_constraintBottom_toBottomOf="@+id/button9"
    app:layout_constraintEnd_toStartOf="@+id/button11"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/button9"
    app:layout_constraintTop_toTopOf="@+id/button9" />

<Button
    android:id="@+id/button11"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Button"
    app:layout_constraintBottom_toBottomOf="@+id/button9"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/button10"
    app:layout_constraintTop_toTopOf="@+id/button9" />

<Button
    android:id="@+id/button12"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Button"
    app:layout_constraintBottom_toBottomOf="@+id/button9"
    app:layout_constraintEnd_toStartOf="@+id/button9"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="@+id/button9" />
</android.support.constraint.ConstraintLayout>

而且效果很好:

所以链是非常灵活的，这里以一个9视图链为例：

<?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">

<Button
    android:id="@+id/button9"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="Button"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toStartOf="@+id/button13"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<Button
    android:id="@+id/button13"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="Button"
    app:layout_constraintBottom_toBottomOf="@+id/button9"
    app:layout_constraintEnd_toStartOf="@+id/button14"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/button9"
    app:layout_constraintTop_toTopOf="@+id/button9" />

<Button
    android:id="@+id/button14"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="Button"
    app:layout_constraintBottom_toBottomOf="@+id/button9"
    app:layout_constraintEnd_toStartOf="@+id/button15"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/button13"
    app:layout_constraintTop_toTopOf="@+id/button9" />

<Button
    android:id="@+id/button15"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="Button"
    app:layout_constraintBottom_toBottomOf="@+id/button9"
    app:layout_constraintEnd_toStartOf="@+id/button16"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/button14"
    app:layout_constraintTop_toTopOf="@+id/button9" />

<Button
    android:id="@+id/button16"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="Button"
    app:layout_constraintBottom_toBottomOf="@+id/button9"
    app:layout_constraintEnd_toStartOf="@+id/button17"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/button15"
    app:layout_constraintTop_toTopOf="@+id/button9" />

<Button
    android:id="@+id/button17"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="Button"
    app:layout_constraintBottom_toBottomOf="@+id/button9"
    app:layout_constraintEnd_toStartOf="@+id/button18"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/button16"
    app:layout_constraintTop_toTopOf="@+id/button9" />

<Button
    android:id="@+id/button18"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="Button"
    app:layout_constraintBottom_toBottomOf="@+id/button9"
    app:layout_constraintEnd_toStartOf="@+id/button19"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/button17"
    app:layout_constraintTop_toTopOf="@+id/button9" />

<Button
    android:id="@+id/button19"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="Button"
    app:layout_constraintBottom_toBottomOf="@+id/button9"
    app:layout_constraintEnd_toStartOf="@+id/button20"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/button18"
    app:layout_constraintTop_toTopOf="@+id/button9" />

<Button
    android:id="@+id/button20"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="Button"
    app:layout_constraintBottom_toBottomOf="@+id/button9"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/button19"
    app:layout_constraintTop_toTopOf="@+id/button9" />

</android.support.constraint.ConstraintLayout>

和以前一样看起来不错:

你甚至可以玩这个，当你有太多的观点，它看起来就像条纹（我不会分享这个 XML 因为，好吧，你明白了）：

ConstraintLayout 中可以链接多少个视图（添加关系）

How many views can be chained(add relationship) inside ConstraintLayout

android

android-constraintlayout

constraint-layout-chains