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

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

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

距离上一篇文章好像过了十多天了,这回趁这个周末有时间,就把中篇也写了。

上一篇中我们着重写了adapter和观察者这座桥。那么这次我们就着重写View的生成和缓存。


1、View生成:

相信用过ListView的人都会知道,在onCreateView的时候我们都会判断convertViewe是否存在,不存在才会创建,在这里我们的做法也是一样 。

首先从缓存获取一个对应位置的View,然后把这个View传给adapter,然后再获取从adapter返回来的View并对其再次缓存。

1.1 内部缓存类:
InnerRecyclerHelper

内部缓存类主要有两个缓存,一个是针对单张图片的,一个是针对多张图片的。

事实上这里其实可以优化为一个缓存,即单图和多图都复用已经有的,而不需要再区分,这个以后有空的话,我会再次优化的。

其中有个类叫SimpleObjectPool,看名字就知道是一个简单的对象池,其内部实现其实就是一个数组,通过指针(下标)的移动进行一个类似于栈的LIFO的规则。当然,直接用栈也是可以的,在这里就不详细写出来了。

上面的RecyclerHelper的代码量很少,功能也简单,所以也就不详细说明了。

1.2 obtainView():

接下来就是很重要的一个方法,传递位置信息并从adapter获取一个View.

具体操作如下:

  • 根据当前itemCount获知应该生成单图View还是多图(itemCount来源其实就是adapter.getCount())

  • 通过缓存得到对应的View

  • 把View和位置信息传递到adapter.onCreateView()

  • 获取回来的View如果与上述从缓存得到的View不一样,则把新产生的View缓存起来。

obtainView

在这里我们不用关心获取到的缓存是否为空,因为如果为空那么adapter理应会产生一个新的View。

不过在上述代码中我并没有对adapter.onCreateView返回的View进行判空处理,这里是需要留意的。


2、onMeasure():

在缓存,生成两个方法都写完之后,我们就需要做这个控件最核心的功能了——摆放控件。

在上一篇文章中,我们说过(因为懒),我们继承FlowLayout实现控件的摆放,所以我们不用关心onLayout的实现,但我们还是要关心测量这方面的功能的。

在onMeasure()里,我们会做两件事:

  • 测量控件,并处理换行的问题(比如4个控件的田字摆放)

  • 绑定数据,即在这里我们会执行adapter.onBindData(),当然,在onCreateView里面加载图片也是没什么大问题的(最大的问题大概就是View的大小还没被测量)

在开始之前我们有一点需要注意的是,onMeasure和onLayout这些方法处理要慎重,特别留意不要在使用addView等会调用requestLayout()的方法。

因为onMeasure()的代码比较多,因此会分开成几个方面来阐述。

2.1 尺寸裁定:

这里应该是最为简单的一个了,在这里我们会对我们控件内部的空间进行划分。

代码如下:

划分空间

在这里我们会划分出多图控件的宽高和单图的上限。

  • 多图控件划分为:控件的宽度的1/3(同时减去两两之间的间隔)

  • 单图控件宽度上限为:控件宽度的2/3(高度则是按照宽高比换算,暂时为16:9)

2.2 清空页面以及填充控件:

在这里我们会有一个成员变量用来标志是否接收到观察者提出的requestLayout,或者说数据产生了变化。

因为onMeasure会多次调用,而我们的操作其实只要执行一次就可以了。

擦除并填充

在检测到mDataChanged(在内部观察者控制这个成员变量),我们就知道这时候数据源应该是发生了变化,至少adapter.notifyDataChanged()被调用了,所以我们针对此时的情况需要进行一下操作:

  • 如果adapter或者itemCount为0,则清空所有东西。(mItemCount在上面的代码中已经更新,updateItemCount()方法,实际调用了adapter.getCount()

  • 假如说控件本身就有控件,那么我们就根据情况将这些View缓存,然后执行detachAllViewsFromParent()把旧的View从控件的View数组里面移除。

    • 注意这里不可以用removeAllViews(),因为会造成requestLayout(),导致再来一次measure
    • 注意detachAllViewsFromParent()会直接操作ViewGroup的View[]数组,并会将对应位置置空,调用之后再调用getChildAt只能拿到null
  • 清空控件之后进行View的填充,即fillView(),然后把标志位重新设为false,防止上述动作在下一次measure时重复操作。

2.3 View的填充并加载数据:

在fillView()方法里,我们会对几种情况进行分别处理:

  • 单图( fillSingleView();)
  • 4图( fillFourViews();)
  • 多图

对于这三者,共同的操作都是需要setLayoutParam并add到View组里面

所以我们先写共同的部分:setupViewAndAddView()

setupViewAndAddView

在这里进行LayoutParams的设置和adapter.onBindData。

在setItemLayoutParams方法里,我们要针对单图/多图以及是否需要换行来进行处理

setItemLayoutParams

在设置完LayoutParams之后,就可以进行数据绑定,调用adapter.onBindData()方法。

有一点我们需要记住的是,在这里我们的View还是在onMeasure里面的,所以我们不能用addView,而是用addViewInLayout(),当然,也可以用attachViewToParent(),不过attachViewToParent应用在一个被detach的View,而不是一个新创建的View。

在有了LayoutParams,我们的View就相当于有了宽高参数,并且可以提供给父类Layout时进行识别并摆放了。

ps:在此处我们还可以做一些事件的回调,比如代码中我提供了一个用于adapter的接口:onSetUpChildLayoutParamsListener,在设置完LayoutParams后回调出去,这样客户端在有需要的时候还可以进行二次设置,加大了灵活性。


3、点击事件:

说到点击事件,是不是第一时间想到OnClickListner

虽然ClickListener确实是一个简单的方法,但处于效率和泄漏等原因,最终决定还是我们直接捕捉touch事件。

事实上,通过touch事件,我们只能够获取x,y位置,那么我们如何才能通过这个x,y位置转换出我们点击的View呢?

很简单,只要知道点击的位置是否在View的范围内就好了。

如果读过ListView的源码,我们不难发现,系统的做法也是这样的,所以我们可以直接使用:

pointToPosition

每一次点击都遍历Child,然后通过其Frame是否包含x,y来知道点击的View的位置,就可以转换出来了。

也许我们看到每一次都会触发一个for循环,或许会很自然的想到会不会有效率什么的问题,但实际上,先不说View的数量也许最多也就9个(即使在ListView里一屏幕的Item数量也不会有很多),其次即使有很多,我们又没有大量的创建对象或销毁,所以这一点点问题可以忽略。

而点击事件则是在ACTION_UP里面捕捉,具体实现在github里面有,因为篇幅问题,我会移到下篇再讲。


4、小结:

诚然,目前为止这个控件还是很年轻,还有很多需要优化的地方,但如您所见,其实自定义一个View从来都不是一件很神秘的事情,毕竟再绚丽的东西,还不是得靠一个又一个属性,一个一个方法慢慢堆起来的?(或者一个一个画笔通过Canvas画出来。。。)

下一篇,将会是本控件的收尾,下一个朋友圈系列文章,将会是ImageView的过渡动画。

没错,又是过渡动画,也就是点击放大过渡到全屏,退出缩放到原来控件的大小。

这个ImageView耗了我好久好久时间,推翻了几次才算是比较完美的解决了。

嘛~敬请期待吧-V-

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

推荐阅读更多精彩内容