0代码0侵入的安卓骨架屏框架----二期优化

xx23x

已于 2023-12-19 14:47:57 修改

阅读量751

点赞数 4

分类专栏： Android 文章标签： android 交互

于 2023-10-31 17:49:38 首次发布

本文链接：https://blog.csdn.net/xx23x/article/details/134144943

版权

Android 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

本文是对自定义骨架屏框架的优化说明。

针对目前对骨架屏的需求及为了实现骨架屏而付出的繁重劳动，而设计的一款0编码0业务侵入的骨架屏框架。感兴趣的可以先去看看这篇文章：一种简单的Android骨架屏实现方案----0侵入0成本

额，如果不看，其实可能也不理解这篇是在说什么(⊙o⊙)…

列表样式优化

将列表的 item UI样式二维数组化，通过配置对应的二维坐标，来实现列表样式到骨架屏灰条的准确映射。

问题

列表样式的妥协始终是一个无法抹去的问题，虽说一个项目的列表按理来说应该就几种主要样式，但实际列表都是各不相同的。原始列表样式到骨架屏灰块样式无法准确对应，再多的理由也无法说服产品同学妥协。

且从用户的角度来看，确实是一种非友好的体验，虽然可能并不影响用户使用。
从开发者的角度来看，这种妥协即使有补救的措施，但方式上并不可取。开发者在自定义样式时是需要直接修改源码的。很显然，违背了设计模式的原则-开闭原则：对修改关闭，对扩展开放。
用一句通俗的话来说，那就是不够优雅啊。

那如何优雅的实现定制化的列表灰块样式呢，并且依然尽可能少的敲代码？

灵感来源

框架之前内置了三种简单的列表样式(上文有提及和配图)。在完善代码注释的时候，想告诉开发者这三种样式是什么样子的。但是注释里又不能配图，如何表达呢？思来想去之际，脑海中忽然闪现过这个注释图：

可以用标点符号拼出一个图来示意。于是框架中就有了下面这段注释。

style 1 表示左边是图片，右边跟着两行字符串
style 2 表示上面是一个方图，下面跟着两行字符串。

不知大家能否看出来，这些组合是不就是一个二维数组，有的是1，表示灰色单位，多个1连起来就是一条灰块。有的是0，表示空白。

对于style 1来说，是不就是一个类似这样的二维数组：

表示，将屏幕宽度均分为 8 列，
第一行，坐标从0到1的位置值是1 ，表示是灰色，坐标从3到7的位置值是1 ，表示灰色，其余位置为0 ，表示空白。
第二行，坐标从0到1的位置值是1 ，表示是灰色，坐标从3到7的位置值是1 ，表示灰色，其余位置为0 ，表示空白。

方案设计

通过组装一个ItemParams 类型的对象，来实现定制列表样式。
listviewItemType 依然是用来配置列表样式的字段，其值改为 ItemParams 类类型

class ItemParams(var params: List<LineSegmentGroup>) {
    var columnNum = 20  //表示屏幕宽度分成多少列，影响的是一个单位的灰块的大小
    var rowNum = 10  //行数，暂时没用


   //将灰块按行分组
    class LineSegmentGroup(
        var line: Int, //行数
        var graySegments: List<GraySegment>  //当前行内的  各个灰块片段
    )

   //一个灰块片段， segment表示片段的起始坐标，mergeGap表示当前灰块和上一行的灰块是否融合为一起，没有间隙。
    class GraySegment(var segment: Pair<Int, Int>, var mergeGap: Boolean = false)
}

上面的二维数组转换成代码配置如下：

val line0 = ItemParams.LineSegmentGroup(
    0,
    listOf(
        ItemParams.GraySegment(0 to 1),
        ItemParams.GraySegment(3 to 7)
    )
)
val line1 = ItemParams.LineSegmentGroup(
    1,
    listOf(
        ItemParams.GraySegment(0 to 1, mergeGap = true),
        ItemParams.GraySegment(3 to 7)
    )
)

val itemType = ItemParams(listOf(line0, line1))
itemType.columnNum = 8

listviewItemType  =itemType //配置完毕

灰块如何计算出来的呢？

首先在父view RecyclerView或者listView 的Rect 范围内，将 rect按找列数切分为一个个单元，然后根据配置的片段的起止坐标，来计算出灰块片段的长度，即灰块rect 的 left和 right。根据当前所在的行数，来计算出灰块rect 的高度，即 top和bottom值。

不太清楚在说什么的还是建议去看一下之前的文章：
一种简单的Android骨架屏实现方案----0侵入0成本

项目实例

我们要实现下面列表UI的骨架屏灰块展示

我们可以大概将一个item对应到一个 8 × 10 的二维数组

展示UI的地方，就是红框围起来的，也就是骨架屏时要展示出灰色的地方，也就是数组值为1 的地方。

再将上面这个item准确的映射到一个数组中，黄色即灰块的位置。

	0	1	2	3	4	5	6	7	8	9
0

1

2
3
4

5

6

7

一个item的骨架屏样式就变成了一个包含着 0和1值的二维数组，
LineSegmentGroup类：表示一行，其中包含本行中的各个小灰块，
line: 行数，
graySegments: 本行内的灰块列表

GraySegment类：表示一块单独的灰块片段
segment:Pair<Int, Int>: 表示一个灰块的从左到右的起止点坐标，
mergeGap: 表示是否顶部和上一行合并，即不保留此灰块的行间隙。

对应到代码配置中：

config {
    listviewItemType = ItemParams(
        listOf(
            ItemParams.LineSegmentGroup(
                line = 0,
                graySegments = listOf(
                    ItemParams.GraySegment(0 to 1),
                    ItemParams.GraySegment(3 to 5),
                    ItemParams.GraySegment(8 to 9),
                )
            ),
            ItemParams.LineSegmentGroup(
                line = 1,
                graySegments = listOf(
                    ItemParams.GraySegment(0 to 1, true),
                    ItemParams.GraySegment(3 to 5),
                    ItemParams.GraySegment(9 to 9)
                )
            ),
            ItemParams.LineSegmentGroup(
                line = 2,
                graySegments = listOf(
                    ItemParams.GraySegment(0 to 1, true),
                    ItemParams.GraySegment(3 to 7)
                )
            ),
            ItemParams.LineSegmentGroup(
                line = 4,
                graySegments = listOf(
                    ItemParams.GraySegment(3 to 9)
                )
            ),
            ItemParams.LineSegmentGroup(
                line = 5,
                graySegments = listOf(
                    ItemParams.GraySegment(3 to 9)
                )
            ),
            ItemParams.LineSegmentGroup(
                line = 6,
                graySegments = listOf(
                    ItemParams.GraySegment(3 to 4),
                    ItemParams.GraySegment(6 to 7)
                )
            ),
            ItemParams.LineSegmentGroup(
                line = 7,
                graySegments = listOf(
                    ItemParams.GraySegment(3 to 6),
                    ItemParams.GraySegment(8 to 8),
                    ItemParams.GraySegment(9 to 9)
                )
            )

            )
    )
    loadingAnim = ILoadingAnimtor.TYPE_BAI_JV_GUO_XI
    skeletonEnable = true
    customLoadingAnim = null
}

展示出的骨架屏效果：

如果想要继续的精细化展示，需要调整分隔的最小块单元大小即可。
即调整对应的表格的行列长度。
ItemParams 类的两个参数：
columnNum：将屏幕宽度分隔成多少行
rowNum: item 最多由多少行组成，这个参数目前没用，

也就是说 columnNum 值越大，越精细还原item样式。

下面的效果是将 columnNum 设置为20 的灰块效果，