先看效果

下载 纯纯写作 应用，看见这样的列表效果，感觉很特别。临渊而羡鱼, 不如退而结网!

思路和踩坑

从效果来看，好像就是列表的item进行了旋转，成为平行四边形.

期间用了 Rotation , Clip 等。最后都因为效果太过感人而终.

其实仔细想想, 我们渲染在屏幕上的View其实都是矩形, 即使是不规则形状, 也是有看不见的四角填充着整个View.

这样一来, 那这个item其实也就是一个矩形里面放了一个平行四边形而已. 思路清晰了, 看看具体的操作.

实现

还是先看一下效果

通过自定义View, 绘制出平行四边形:

path?.moveTo(0f, 90f)
path?.lineTo(sWidth, 4f)
path?.lineTo(sWidth, (sHeight - 90))
path?.lineTo(0f, (sHeight - 4))
复制代码

列表依次排列, 没有间距. 黑色, 灰色, 深灰色背景是为了区分.正常可以设置成白色或透明.

问题一

效果好像差不多了. 就是紫色, 黄色, 青色 之间的间距因为是矩形填充问题, 间距有点大. 这当然不是问题, Android 开发的都知道, 我们的View Margin 是可以设置负边距值的, 直接 设置: layoutParams.topMargin = applicationContext.dp2px(-30).

问题二

从效果看, 第一条和最后一条item并不知平行四边形, 而是梯形. 所以我们的列表并不能全都使用自定义平行四边形View. 第一和最后一条直接使用 纯色的TextView.

too young too simple a.

这什么, 直接 BBQ 了...

仔细看一下, 第一条之所以有效果, 是因为第二条平行四边形边角颜色和第一条一样, 上移就会有梯形的效果. 最后一条采用同样的TextView则也会因为上移而覆盖住上面一条. 所以最后一条应该也自定义成一个和上面平行四边形一样角度的梯形:

path?.moveTo(0f, 90f)
path?.lineTo(sWidth, 4f)
path?.lineTo(sWidth, sHeight)
path?.lineTo(0f, (sHeight))
复制代码

还好没有翻车~

总结

一些看似简单其实也不难的东西总是容易被忽视, 或者说是想象不到. 由于水平有限, 中间走了很多弯路, 浪费了很多时间. 此时脑海中感觉有一群至理名言奔腾而过. 路漫漫其修远兮, 吾将上下而求索, 与君共勉!

倾斜列表, 接下来会用 Compose 和 Flutter 实现一下.