欢乐的票圈重构——九宫格控件(上)

项目重构的Git地址:
https://github.com/razerdp/FriendCircle
项目同步更新的文集:
http://www.jianshu.com/notebooks/3224048/latest
本文控件Git地址:
https://github.com/razerdp/PhotoContents

上集:欢乐的票圈重构之旅——RecyclerView的头尾布局增加
下集:欢乐的票圈重构——九宫格控件(中上)

ps:票圈重构已经合并到主分支了,大多数功能也在逐步赶上以前的进度,而且以后的提交主要都是往主分支提交的,如果您是在main-dev分支clone的,请切换到master分支。

写在前面:

在重构之前的票圈版本是在大四,也就是我没毕业的时候写的,那时候有着比较充裕的时间,因此更新文章也比较频繁。

而现在参与了工作之后,虽然git的提交没有断,但写文章的频率是越来越低了,不过幸好,大部分知识在重构之前的文章都写过了,所以很多东西都不需要重复描述。

虽然文章写的越来越少,但有一点是不会变的,在下一定会认真地码出每一次的进步-V-

本次自定义控件断断续续码了10天,篇幅较长,因此分为上中下三篇

  • 上篇探究微信朋友圈实现和相关的库类,总结思路并给出一个初步的方案。
  • 中篇初步搭建控件的基本元素。
  • 下篇针对几个着重点进行特别描述。

如果您对这个项目感兴趣或者有什么好的建议,在下非常欢迎您提交pr或者issue哦~


预览:

preview.gif

重构之前

如果您有留意过我之前的文章,或者一直跟随着本项目进度的话,您肯定知道,在重构之前的版本里,朋友圈九宫格的实现采取的是GridView。

那时候水平不足同时又因为毕业设计等原因,所以就粗略的用GridView实现,众所周知,两个滑动控件的嵌套效率往往是不如人意的,而且两个AbsListView都是挺重的,因此在重构版本中,我下定决心亲自弄一个九宫格控件。


相关库类

本着不重复轮子的原则,开工之前肯定是去github淘一番~于是乎就找到了这么一个控件:
NineGridImageView
其中文介绍在这里:http://jaeger.itscoder.com/android/2016/03/06/nine-grid-iamge-view-libaray.html

看了一下git,star数挺多的,有着700+,想着貌似能直接用的感觉,但是本着用库先了解原理的原则,在用一个库之前,我都会去看一下核心方法。

结果不看不要紧,一看吓一跳。。。

原因在于一个方法里面:

    /**
     * 设置图片数据
     *
     * @param lists 图片数据集合
     */
    public void setImagesData(List lists) {
     ...略

        int[] gridParam = calculateGridParam(lists.size(), mShowStyle);
        mRowCount = gridParam[0];
        mColumnCount = gridParam[1];
        if (mImgDataList == null) {
            int i = 0;
            while (i < lists.size()) {
              ...略
                addView(iv, generateDefaultLayoutParams());
                i++;
            }
        } else {
           ...略
                for (int i = oldViewCount; i < newViewCount; i++) {
                    ImageView iv = getImageView(i);
                    if (iv == null) {
                        return;
                    }
                    addView(iv, generateDefaultLayoutParams());
                }
            
        }
        mImgDataList = lists;
        requestLayout();
    }

如您所见,在设置数据的时候,用的是addView,当一个用在频繁被复用和改变的布局的View不断的进行addView时,总觉得会有点影响。这让我想起我们票圈项目的评论控件,似乎也是这么个实现方案,看来这里有空的时候需要去优化一下了。(当然,我这里并没有进行实际的测试,仅仅是通过代码层面看出来的,要真实结果应该还是要去打印日志等验证一下的)

我们都知道addView执行一次会导致一次requestLayoutinvalidate,这里通过循环add进来本来是没问题的,但是如果放在RecyclerView等AbsListView的话,就会导致过多的measure/layout了,直接表现就是性能下降。。。

对比了ListView,官方用的是addViewInLayout或者attachViewToParent取代addView,最后再同一进行测量等操作,不过这是后面的内容了。。

同时看了几款NineGridXXXX系列后,还是不太尽如人意,于是就决定从微信下手,然后慢慢撸出我们的九宫格控件。


微信的实现

因为我的手机是小米开发版系统,所以可以直接通过AS的Layout Inspector(视图分析)来获取微信朋友圈的UI布局(com.tencent.mm.plugin.sns.ui.SnsTimeLineUI【应该不会被查水表吧。。。。QAQ】

得到了单图和多图的布局(顺带提一下:吐槽乐天那张干得漂亮):

单图
多图

从图上我们初步分析得到几个结果:

  • 微信的做法很明显不是通过控制View的可视性来控制View的数量,而是自定义ViewGroup
  • 无论是单张图还是多张图,用的都是同一个控件,其名为PhotosContent
  • MaskImageView应该可以理解为点击响应前景的ImageView,在我们的工程中,相当于ForceClickImageView
  • 不过有一点不明白的是,无论是单图还是多图,似乎都还有一个MaskImageView在占位?

有了上面几个条件,以我的经验来推测一下微信的做法:

  • 自定义一个ViewGroup,覆写measure和layout,使其适应1张图和4张图的特殊布局
  • 这个ViewGroup应该还有自己的缓存
    • 举个例子,比如在一个AbsListView里面使用,上一个控件有8张图,滑动后即将被复用,复用后的控件有4张图,两者相差4个ImageView。
    • 如果这4个ImageView没有缓存而是直接抛弃置空的话,假设我再滑回去,也就是从4个ImageView又变成8个,那么我就要重新new出4个ImageView
    • 这明显不是很合理,所以就应该要有个缓存机制,有View的时候直接使用,没有才是new出来(不错,说的就是ListView的方法)

初步方案

思路既然已经有了,剩下来就是开始着手我们的实现方案了,在我心目中有以下几个方案:

  • 继承GridView实现
  • 继承GridLayout实现
  • 继承RelativeLayout或者ViewGroup直接实现
  • 继承FlowLayout实现

首先要抛弃的就是GridView的实现,其次GridLayout确实是个不错的方案,我也曾经试过这个方案,但后来发现对于单张图片的适配极差,因此还是放弃了,第三个实现一个ViewGroup,这个是我曾经想做的,只是判断了一下,感觉花费我的精力会很多,甚至可能影响到了我的工作,于是也就抛弃了。

最后,我采取了继承FlowLayout的方案。

使用FlowLayout的原因有几个:

  • 我不用关注onLayout的实现
  • FlowLayout允许我针对控件换行
  • FlowLayout添加的控件是有序且方向可控

以上是本篇的内容,下一篇将会开始控件的初步搭建。

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

推荐阅读更多精彩内容