新项目完全用了compose来实现，这两天有个时间轴的需求，搜索了一下完全由compose实现的几个，效果都不算特别好，而且都是用canvas画的，这样的话和原来的view没什么区别，不能发挥compose可定制组合的长处，所以自己实现了一个。由于我自己平时基本不写文章，并且内容也是偏向compose新手的，所以可能写的比较啰嗦，大佬们想看的可以直接跳到第三部分。欢迎指导！

在开始之前，先介绍一下这次实现的重点：Layout。

Layout用于实现自定义的布局，可用于测量和定位其布局子项。我们可以用这个实现之前自定义view的效果，不过这里画的不是点线之类的东西，而是composable，并且只用计算放的位置就好，基于此我们可以实现有多个插槽的布局。

先来看一下UI效果是什么样的

一、分解UI

通过观察UI，我们可以将每个item分解为以下四个元素：圆点、线、时间、内容。一个合格的组件，要允许使用者随意定义各个元素位置的实现，比如圆点可能变成方的，或者换成图片，线也可能是条实线，并且颜色是渐变的。所以这里这几个元素准确的来说，应该是四个插槽，这几个插槽提供了默认的样式是长这样。

圆点槽和时间槽是垂直居中对齐的，圆点槽和线槽是水平居中对齐的，内容槽和时间槽是左对齐，在圆点槽和时间槽中间有一定间距，我们管他叫内容距左间距。

每个item的最大宽度是圆点槽的宽+内容距左间距+内容的宽。每个item的最大高度是圆点或者时间槽的最大高度+内容的高度，不直接用时间槽的高度是因为圆点槽如果放个图片的话，可能高度比时间槽的高度要高。

由于这个线应该是连接两个圆点槽的，所以它的最大高度和最小高度其实都是一个，取决于两个圆点之间的距离，正好是一个item的高度。

在多个item时，第一个元素的线从点开始往下，而最后一个则没有线(说高度为0也行)

二、实现每个插槽的默认UI

• 
  
• 圆点
  

这个很简单，任意一个空的组件设置下修饰符就可以了。

Box(

    modifier = Modifier

        .size(8.dp)

        .clip(CircleShape) // 变圆

        .background(MaterialTheme.colorScheme.primary)

)

• 
  
• 线
  

实线很好实现，也通过background就可以

// 实线单色

Box(modifier = Modifier

    .width(1.dp)

    .fillMaxHeight()

    .background(MaterialTheme.colorScheme.primary)

)

// 渐变也简单

Box(

    modifier = Modifier

        .width(1.dp)

        .fillMaxHeight()

        .background(

            Brush.linearGradient(

                listOf(

                    MaterialTheme.colorScheme.primary,

                    MaterialTheme.colorScheme.primaryContainer

                )

            )

        )

)

虚线稍微麻烦一点，Brush中没有直接实现虚线的方法，所以我用drawBehind来实现了。drawBehind这里的作用和Canvas()是一样的，你可以直接用canvas来实现，重点就是里面的pathEffect。

Box(modifier = Modifier

    .width(1.dp)

    .fillMaxHeight()

    .drawBehind {

        drawLine(
color = Color.LightGray,
strokeWidth = size.width,
start = Offset(x = 0f, y = 0f),
end = Offset(x = 0f, y = size.height),
pathEffect = PathEffect.dashPathEffect(

                floatArrayOf(8.dp.toPx(), 4.dp.toPx())

            )

        )

    }

)

• 
  
• 时间
  

简单一个Text就可以。

Text("2023年9月28日")

• 
  
• 内容
  

根据具体的内容来实现。

三、通过自定义的Layout将小UI组装起来

现在我们根据第一步的思路，来定义一个组件。

@Composable

fun TimelineItem(
modifier: Modifier = Modifier,
dot: @Composable () -> Unit, // 圆点槽
line: @Composable () -> Unit, // 线槽
time: @Composable () -> Unit,// 时间槽
content: @Composable () -> Unit, // 内容槽
contentStartOffset: Dp = 8.dp // 内容距左间距

) 

然后我们将第二步中的插槽的默认UI放上去。主要是圆点槽和线槽。

@Composable

fun TimelineItem(
modifier: Modifier = Modifier,
dot: @Composable () -> Unit = {
Box(

            modifier = Modifier

                .size(8.dp)

                .clip(CircleShape)

                .background(MaterialTheme.colorScheme.primary)

        )

    },
line: @Composable () -> Unit = {
Box(modifier = Modifier

            .width(1.dp)

            .fillMaxHeight()

            .drawBehind {
drawLine(
color = Color.LightGray,

                    strokeWidth = size.width,

                    start = Offset(x = 0f, y = 0f),

                    end = Offset(x = 0f, y = size.height),

                    pathEffect = PathEffect.dashPathEffect(
floatArrayOf(8.dp.toPx(), 4.dp.toPx())

                    )

                )

            }

        )

    },
time: @Composable () -> Unit,
content: @Composable () -> Unit,
contentStartOffset: Dp = 8.dp

) 

定义好以后就可以开始做实现了，上面已经说过，我们是通过自定义Layout来实现的，那么先看一下Layout的构成。

@UiComposable
@Composable inline fun Layout(
content: @Composable @UiComposable () -> Unit, // 可组合子项。
modifier: Modifier = Modifier, // 布局的修饰符
measurePolicy: MeasurePolicy //布局的测量和定位的策略

) 

这其中的content，就是指我们这四个槽的内容。

Layout(

    modifier = modifier,

    content = {

        dot()
// 通过ProvideTextStyle给时间槽提供了一个默认字体颜色。
ProvideTextStyle(value = LocalTextStyle.current.copy(color = Color(0xff999999))) {
time()

        }
content()

        line()

    },

    measurePolicy = ...

我们可以看到在content中，我们将四个槽的内容全放进去了，那他们的位置和大小是怎么决定的呢，就是在measurePolicy中定义的。
MeasurePolicy类要求我们必须实现measure方法。

fun MeasureScope.measure(

    measurables: List<Measurable>,

    constraints: Constraints

): MeasureResult

measurables列表中的每个Measurable都对应于布局的一个布局子级，就是我们刚才在content中传入的内容，将按先后顺序存入这个列表。可以使用Measurable.measure方法来测量子级的大小。该方法需要子级自己所需要的约束Constraints(就是这个子级的最小最大尺寸)；不同的子级可以用不同的约束来测量，而不是统一用给出的这个constraints参数。测量子级会返回一个Placeable，它的属性有该子级经过对应约束测量后的大小(一旦经过测量，这个子级的大小就确定了，不能再次测量)。最后在MeasureResult中，设置每个子级的位置就可以。

现在我们的代码变成了这样：

@Composable

fun TimelineItem(
modifier: Modifier = Modifier,
dot: @Composable () -> Unit = {
Box(

            modifier = Modifier

                .size(8.dp)

                .clip(CircleShape)

                .background(MaterialTheme.colorScheme.primary)

        )

    },
line: @Composable () -> Unit = {
Box(modifier = Modifier

            .width(1.dp)

            .fillMaxHeight()

            .drawBehind {
drawLine(
color = Color.LightGray,//Color(0xffeeeeee)

                    strokeWidth = size.width,

                    start = Offset(x = 0f, y = 0f),

                    end = Offset(x = 0f, y = size.height),

                    pathEffect = PathEffect.dashPathEffect(
floatArrayOf(8.dp.toPx(), 4.dp.toPx())

                    )

                )

            }

        )

    },
time: @Composable () -> Unit,
content: @Composable () -> Unit,
contentStartOffset: Dp = 8.dp,
position: TimelinePosition = TimelinePosition.Center

) {
Layout(

        modifier = modifier,

        content = {
dot()
ProvideTextStyle(value = LocalTextStyle.current.copy(color = Color(0xff999999))) {
time()

            }
content()
line()

        },
measurePolicy = object : MeasurePolicy {
override fun MeasureScope.measure(
measurables: List<Measurable>,
constraints: Constraints

            ): MeasureResult {

              TODO: 具体的四个子级测量大小的位置设置。

            }

        }

    )

}

现在我们来做具体的实现。
我们先来测量一下这里的圆点槽的大小。
val dot = measurables[0].measure(constraints)
因为我们在content中第一个传入的就是dot(),所以这里measurables[0]就是圆点槽组件，这样就得到了其对应的Placeable。
我们先放置下这个圆点槽显示下看看效果。

override fun MeasureScope.measure(

    measurables: List<Measurable>,

    constraints: Constraints

): MeasureResult {
val dot = measurables[0].measure(constraints)

return layout(constraints.maxWidth, constraints.maxHeight) {

        dot.place(0, 0, 1f)

    }

}

理论上我们应该看到一个大小8dp，主题色的圆点在左上角。大家可以跑一下看看是不是符合预期。

要指出的是，这个方法给出的constraints并不是合适dot的约束，其最小宽度将可能远远大于dot的宽，这将导致测量后dot的宽远超设定的8dp。所以这里我们需要使用dot正确的约束, 而这个圆点槽理论上是不限制大小的，所以其最小宽度应该设置为0。我们依次将圆，时间，和内容的大小也测量出来。

val constraintsFix = constraints.copy(minWidth = 0)

val dot = measurables[0].measure(constraintsFix)

val time = measurables[1].measure(constraintsFix)

val content = measurables[2].measure(constraintsFix)

之所以不一并把线槽的大小也测量了，是因为我们在第一步中说的，线槽的高度，实际上是由圆点或者时间槽的最大高度+内容的高度来决定的。

val topHeight = max(time.height, dot.height) // 取圆点槽和时间槽中最大槽位的高度。

val lineHigh = topHeight + content.height // 整个组件的高度

val line = measurables[3].measure(

    constraints.copy(
minWidth = 0,
minHeight = lineHeight,
maxHeight = lineHeight

    )

)

至此我们已经将四个槽位的大小全部确定了下来。接下来就该指定每个槽位的位置，在第一步我们已经分析过每个槽位应该所在的位置。

val height = topHeight + content.height // 整个组件的高度
// 时间或内容的最大宽度 + 内容距左间距 + 圆点宽度 = 整个组件的宽度

val width =
max(content.width, time.width) + contentStartOffset.roundToPx() + dot.width 

return layout(width, height) { // 设置layout占据的大小

    val dotY = (topHeight - dot.height) / 2 // 计算圆点槽y轴位置

    dot.place(0, dotY, 1f) // 放圆点槽

    val timeY = (topHeight - time.height) / 2 // 计算时间槽y轴位置

    time.place(dot.width + contentStartOffset.roundToPx(), timeY) // 放时间槽

    content.place(dot.width + contentStartOffset.roundToPx(), topHeight) // 放内容槽，x和时间槽一样，形成左对齐效果。

    line.place(

        dot.width / 2, // x在圆中间

        dotY + dot.height // y从圆的最下面开始

    )

}

至此我们就有了一个时间轴节点组件，马上在LazyColumn或者Column中试试效果吧！

四、完善效果

如果你刚才测试了效果，你会发现，在列表中最后一个节点，也有虚线，并且长度超出了列表，而最后一个节点，不应该显示虚线才对。所以我们要来完善一下效果。

@Composable

fun TimelineItem(
modifier: Modifier = Modifier,
dot: @Composable () -> Unit = ...,
line: @Composable () -> Unit = ...,
time: @Composable () -> Unit,
content: @Composable () -> Unit,
contentStartOffset: Dp = 8.dp,
isEnd: Boolean = false, // 添加是否为最后一个节点的参数

) 

...
//在最后根据是否是最后一个节点来设置是否放置线槽内容。

if (!isEnd){
line.place(

         dot.width / 2,

         dotY + dot.height

    )

}

而在调用时，只要简单的根据是否位于列表最后就可以了，调用示例：

LazyColumn(

    Modifier

        .padding(paddingValues)

        .fillMaxSize()

        .padding(horizontal = 16.dp)

) {

    itemsIndexed(list.itemSnapshotList) { index, item ->

        item?.let {

            TimelineItem(
modifier = Modifier.fillMaxWidth(),
time = {

                    Text(text = it.time)

                },
content = {

                    Column {

                        // 最好在Column最上面和最下面也添加个spacer来间隔开

                    }

                },
isEnd = index == list.itemCount - 1

            )

        }

    }

}

最后

至此本文就结束啦，由于内容比较简单，且所以的代码均有表现，为了不占篇幅，就不再粘贴完整代码内容了。如果本文有错误之处或者可以改进的地方，请大家一定回复指正；如果文章的内容也对你有帮忙，也请回复鼓励我，谢谢大家！