如何在XML中用Linear layout等布局实现垂直图标间连接线效果

完全可以通过原生XML布局实现该效果，不需要自定义控件，两种落地方式可以按需选择：

• 垂直LinearLayout实现（最简单，适配简单场景）
  整体使用垂直方向的LinearLayout作为父容器，所有图标和连接线按顺序从上到下排列即可：

  1. 父容器设置android:gravity="center_horizontal"保证所有子控件水平居中
  2. 按顺序放置图标、连接线View：连接线用宽度1~2dp、高度按需设置的普通View即可，设置你需要的线条颜色
  3. 最后一个图标下方不放置连接线，避免底部多出多余线条
     核心代码示例：

  <LinearLayout
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:orientation="vertical"
      android:gravity="center_horizontal">
  
      <!-- 第一项 -->
      <ImageView
          android:layout_width="24dp"
          android:layout_height="24dp"
          android:src="@drawable/ic_step1"/>
      <View
          android:layout_width="2dp"
          android:layout_height="36dp"
          android:layout_marginVertical="4dp"
          android:background="#E0E0E0"/>
  
      <!-- 第二项 -->
      <ImageView
          android:layout_width="24dp"
          android:layout_height="24dp"
          android:src="@drawable/ic_step2"/>
      <View
          android:layout_width="2dp"
          android:layout_height="36dp"
          android:layout_marginVertical="4dp"
          android:background="#E0E0E0"/>
  
      <!-- 最后一项，不添加连接线 -->
      <ImageView
          android:layout_width="24dp"
          android:layout_height="24dp"
          android:src="@drawable/ic_step3"/>
  </LinearLayout>
  

  如果需要调整图标和线条的间距，直接给连接线设置垂直方向的margin即可，需要虚线、渐变线这类特殊样式时，把连接线的background替换成对应shape资源就行。

• ConstraintLayout实现（灵活适配复杂场景）
  如果后续需要在图标右侧添加说明文字、或者需要动态调整图标间距，更推荐用ConstraintLayout：连接线直接约束在上下两个图标之间，高度会自动适配两个图标的间距，不需要手动写死线条高度，适配性更强。
  核心代码示例：

  <androidx.constraintlayout.widget.ConstraintLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:padding="16dp">
  
      <ImageView
          android:id="@+id/step1"
          android:layout_width="24dp"
          android:layout_height="24dp"
          android:src="@drawable/ic_step1"
          app:layout_constraintTop_toTopOf="parent"
          app:layout_constraintStart_toStartOf="parent"/>
  
      <View
          android:layout_width="2dp"
          android:background="#E0E0E0"
          app:layout_constraintTop_toBottomOf="@id/step1"
          app:layout_constraintBottom_toTopOf="@id/step2"
          app:layout_constraintStart_toStartOf="@id/step1"
          app:layout_constraintEnd_toEndOf="@id/step1"
          android:layout_marginVertical="4dp"/>
  
      <ImageView
          android:id="@+id/step2"
          android:layout_width="24dp"
          android:layout_height="24dp"
          android:src="@drawable/ic_step2"
          app:layout_constraintTop_toBottomOf="@id/step1"
          app:layout_constraintStart_toStartOf="parent"
          android:layout_marginTop="36dp"/>
  
      <!-- 后续条目按相同逻辑约束即可 -->
  </androidx.constraintlayout.widget.ConstraintLayout>
  

内容的提问来源于stack exchange，提问作者Anusha C