欢乐的票圈重构——九宫格控件（中下）

灰太狼 2022-03-16 11:52 57阅读 0赞

> 项目重构的Git地址： [github.com/razerdp/Fri…][github.com_razerdp_Fri]

> 本文控件Git地址: [github.com/razerdp/Pho…][github.com_razerdp_Pho]

上集：[欢乐的票圈重构——九宫格控件（中上）][Link 1]

下集：[欢乐的票圈重构——九宫格控件（下）][Link 2]

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

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

--------------------

#### 1、View生成： ####

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

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

##### 1.1 内部缓存类： #####

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

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

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

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

##### 1.2 obtainView()： #####

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

具体操作如下：

*  根据当前itemCount获知应该生成单图View还是多图（itemCount来源其实就是adapter.getCount()）
 *  通过缓存得到对应的View
 *  把View和位置信息传递到adapter.onCreateView()
 *  获取回来的View如果与上述从缓存得到的View不一样，则把新产生的View缓存起来。

在这里我们不用关心获取到的缓存是否为空，因为如果为空那么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()`

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

在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的源码，我们不难发现，系统的做法也是这样的，所以我们可以直接使用：

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

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

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

--------------------

#### 4、小结： ####

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

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

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

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

嘛~敬请期待吧-V-

[github.com_razerdp_Fri]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Frazerdp%2FFriendCircle
[github.com_razerdp_Pho]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Frazerdp%2FPhotoContents
[Link 1]: https://juejin.im/post/5a30f5d96fb9a044fb07c150
[Link 2]: https://juejin.im/post/5a30f5c451882531b15b7d84