开发B端app过程中,我们经常会遇到类似这样的需求:“通过多个下拉框的单个或者多个复合条件,对列表进行筛选操作”,类似如下图:
上图标注分析:红框内为标题栏,绿框是每个标题所对应的下拉框,下拉框样式根据项目需求可自定义。蓝色框为整体筛选框View,它和标题栏的frame是重叠的,它主要包含了标题栏+下拉框,筛选框用来一致对外交互和输出。
此需求分析:1. 需要动态控制标题栏的个数;2. 标题栏的点亮熄灭状态的控制;3. 标题栏分别对应的下拉框是否一致问题;4.下拉框下拉or上滑动效实现问题;5. 如何封装拓展,可更加灵活运用于后期其他项目;
个人思路简述:
由于外界需要传递给筛选框标题组,每个标题会对应不同的下拉框,每个下拉框我们用不同vc的view去实现。因此设计了一个DLFilterItemModel,此model中持有title和listVc两个属性,这个itemModel用于筛选框和标题栏之间的数据传递值。如下图:
然后是标题栏的设计, 自定义xib,用stackView去定义。通过外界传递models,动态添加view到stackView中,然后每个标题的点击,就对应把model的vc.view添加到蓝框筛选框的底部,同时把该事件代理给蓝框筛选框,用于外界逻辑交互;如下图:
标题栏中的子view组件封装,主要有有值,无值,有选中等几种状态,不同赋值方式后,都进行刷新,综合完毕后决定文字点亮状态,具体如下:
最后是最外层的蓝框,筛选框,通过一个方法,接收外界传入的models, 再传递给自己持有的titleview, 内部标题栏点击事件,listVc的一些自定义事件,都已经代理给当前蓝框筛选框。所以外界使用的时候,只需要跟当前蓝框筛选框进行交互,蓝框筛选框重点交互方法如下:
具体使用:
1. 自定义继承于DLFilterItemModel的customModel, 在customModel中自定义标题名;2. 自定义FilterView继承于蓝框DLFilterView;3. 有需求可以自定义listVc; 4. 在项目中把自定义的filterView当成View放在所需要的地方直接使用;
2. 看完还是很蒙🤣, 移步demo:自定义筛选下拉框,下载该demo,别忘给星🤣,run起来,然后可以结合该文章思路整理。
3. 如果觉得该文有用,请送出你的小星星。若有更好的思路,不吝赐教。