拓扑排序在 RelativeLayout 中的应用

背景

最近在项目中使用 RelativeLayout 的过程当中发现 RelativeLayout 内部的孩子 View 节点会收到两次 measure 消息,导致项目中某个自定义控件的尺寸和预期的不一致。本着出了问题需要知道为什么,并且需要给出合理的解决方案这样的原则,因此在阅读分析完源码的基础上输出个人对 RelativeLayout 的一些理解,在此进行记录和分享。

是什么

  • RelativeLayout
    • Android SDK API 1 中添加的一个类,该类用于解决界面中多个控件之间的相对布局问题,可以通过描述当前孩子与其它孩子或者与父节点的相对位置决定的当前孩子布局信息
    • 在类的继承结构上,它是 ViewGroup 的子类
    • 在运行时,它是 View 控件树中的非叶子节点,它可以包含孩子节点
  • 拓扑排序
    • 是一种求有向无环图的拓扑序列时使用的排序方法
    • 该方法的输入是有向无环图,输出是拓扑序列

为什么

  • 为了解决大量应用层开发者在开发 APP 时需要实现界面中多个控件之间的相对位置的需求,SDK 开发者们设计并实现的一个类/库/模块。
  • 思考一下,如果让我设计并实现一个模块来解决这些具有相对位置关系的控件的布局问题,我会怎么做?这是目前我认为能够很好地考验一个人解决问题的能力的思维方式

内部原理

在阅读 RelativeLayout 的源码时,发现其为了解决多个孩子节点之间相对位置的问题,应用了数据结构中图的拓扑排序来确定孩子节点测量的先后顺序。我们一起来看下如何计算出一些具有依赖关系的任务的执行顺序。当然这只是一种参考解法,肯定还有其他解法。

  • 数据结构(记录相关信息)
    • 节点
      android.widget.RelativeLayout.DependencyGraph.Node
      依赖关系图中的一个节点,封装了一个 View,以及 View 的依赖节点和被依赖节点。简单来说就是有向图中的一个节点,并且该节点知道自己的入度和出度信息。入度为 0 的节点被称为根节点
    • 弧(边)
      android.widget.RelativeLayout.LayoutParams#mRules
      每个 RelativeLayout 的孩子节点的布局参数中都记录了当前节点依赖于其它节点的信息。孩子节点采用 id 标识,每个节点可以用于描述的相对位置参数有 22 个(android.widget.RelativeLayout#VERB_COUNT)。采用 int 类型的数组记录依赖信息,数组下标是相对位置参数,数组里面的值是依赖节点的 ID

    • android.widget.RelativeLayout.DependencyGraph
      记录依赖关系的图信息。记录一个 RelativeLayout 实例所持有的孩子节点信息。
  • 算法(给定输入/输出,实现计算过程)
    • 添加节点
      android.widget.RelativeLayout.DependencyGraph#add
void add(View view) {
    final int id = view.getId();
    // 把 View 包装到 Node 实例内部
    final Node node = Node.acquire(view);

    if (id != View.NO_ID) {
        // 记录 ID 到 Node 的映射关系,为了接下来的查询效率
        mKeyNodes.put(id, node);
    }

    // 添加一个图节点
    mNodes.add(node);
}
  • 添加边
    android.widget.RelativeLayout.LayoutParams#LayoutParams(android.content.Context, android.util.AttributeSet)
    在创建 LayoutParams 对象时,从 AttributeSet 中解析边信息
final int N = a.getIndexCount();
// 遍历属性集合
for (int i = 0; i < N; i++) {
    // 读取属性索引号
    int attr = a.getIndex(i);
    switch (attr) {
        case com.android.internal.R.styleable.RelativeLayout_Layout_layout_alignWithParentIfMissing:
            alignWithParent = a.getBoolean(attr, false);
            break;
        case com.android.internal.R.styleable.RelativeLayout_Layout_layout_toLeftOf:
            // 读取被依赖 View 的 ID
            // 当前节点 LEFT_OF 于 attr 对应的 res id
            rules[LEFT_OF] = a.getResourceId(attr, 0);
            break;
        // 省略其它依赖规则解析
        ...
  • 计算拓扑序列
    android.widget.RelativeLayout.DependencyGraph#getSortedViews
// 输出指定边规则后的拓扑序列
void getSortedViews(View[] sorted, int... rules) {
    // 找到所有根节点放进双端队列存放起来
    final ArrayDeque<Node> roots = findRoots(rules);
    int index = 0;

    Node node;
    // 遍历根节点队列
    while ((node = roots.pollLast()) != null) {
        //解封得到 View 对象
        final View view = node.view;
        final int key = view.getId();

        // 输出到拓扑序列数组中
        sorted[index++] = view;

        // 找到当前根节点的出度信息
        final ArrayMap<Node, DependencyGraph> dependents = node.dependents;
        final int count = dependents.size();
        // 遍历出度节点
        for (int i = 0; i < count; i++) {
            final Node dependent = dependents.keyAt(i);
            // 入度信息
            final SparseArray<Node> dependencies = dependent.dependencies;
            // 删除入度
            dependencies.remove(key);
            // 入度为 0 
            if (dependencies.size() == 0) {
                // 成为新的根节点,加入到双端队列中
                roots.add(dependent);
            }
        }
    }

    // 如果拓扑序列中节点个数和图中所有节点的个数不等,则存在环
    if (index < sorted.length) {
        throw new IllegalStateException("Circular dependencies cannot exist"
                + " in RelativeLayout");
    }
}

android.widget.RelativeLayout.DependencyGraph#findRoots

// 根据参数中选择的依赖规则找到所有根节点
private ArrayDeque<Node> findRoots(int[] rulesFilter) {
    final SparseArray<Node> keyNodes = mKeyNodes;
    final ArrayList<Node> nodes = mNodes;
    final int count = nodes.size();

    // Find roots can be invoked several times, so make sure to clear
    // all dependents and dependencies before running the algorithm
    for (int i = 0; i < count; i++) {
        final Node node = nodes.get(i);
        node.dependents.clear();
        node.dependencies.clear();
    }

    // Builds up the dependents and dependencies for each node of the graph
    // 遍历图中所有节点,构建节点的入度和出度信息
    for (int i = 0; i < count; i++) {
        // 读取当前节点
        final Node node = nodes.get(i);

        final LayoutParams layoutParams = (LayoutParams) node.view.getLayoutParams();
        // 从 LayoutParams 中读取依赖信息
        final int[] rules = layoutParams.mRules;
        final int rulesCount = rulesFilter.length;

        // Look only the the rules passed in parameter, this way we build only the
        // dependencies for a specific set of rules
        // 根据参数中选取的部分规则构建依赖信息
        for (int j = 0; j < rulesCount; j++) {
            // 拿到被依赖对象的 ID
            final int rule = rules[rulesFilter[j]];
            if (rule > 0) {
                // The node this node depends on
                final Node dependency = keyNodes.get(rule);
                // Skip unknowns and self dependencies
                if (dependency == null || dependency == node) {
                    continue;
                }
                // Add the current node as a dependent
                // 被依赖节点记录入度信息
                dependency.dependents.put(node, this);
                // Add a dependency to the current node
                // 当前节点记录出度信息
                node.dependencies.put(rule, dependency);
            }
        }
    }

    final ArrayDeque<Node> roots = mRoots;
    // 清理之前的计算结果
    roots.clear();

    // Finds all the roots in the graph: all nodes with no dependencies
    // 遍历所有节点
    for (int i = 0; i < count; i++) {
        final Node node = nodes.get(i);
        if (node.dependencies.size() == 0) 
            // 入度为 0 则为根节点
            roots.addLast(node);
    }

    // 输出根节点队列
    return roots;
}

练习题

  • 拷贝 RelativeLayout 的代码和资源到自己的工程中,并应用拷贝过的 RelativeLayout 进行基本使用
  • 修改拷贝的 RelativeLayout 代码,打印 RelativeLayout 添加节点、添加边、拓扑排序的工作流程日志信息
  • 实现图的邻接矩阵、邻接链表的基本操作
  • 根据百科中拓扑排序的算法介绍,手动实现简单的拓扑排序
  • 同一个图支持多次根据输入的边信息输出拓扑序列
  • 删除 RelativeLayout 中的相关拓扑排序 API 的实现,自己手动实现一遍,并确保测试用例可以跑过
  • 输出拓扑排序在 RelativeLayout 中应用的文章

总结

到目前为止,RelativeLayout 已经计算出所有孩子节点的依赖关系,接下来可以根据拓扑序列中的顺序来向孩子节点发送 measure 消息,从而计算出 RelativeLayout 的尺寸信息

参考

RelativeLayout 文档
RelativeLayout 代码
拓扑排序

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,816评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,729评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,300评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,780评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,890评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,084评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,151评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,912评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,355评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,666评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,809评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,504评论 4 334
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,150评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,882评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,121评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,628评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,724评论 2 351

推荐阅读更多精彩内容