Swift 类似美团下拉菜单

写在前面

好久没有写文章记录总结平时用到的知识了,最近都在准备新项目的,项目上手才发现,自己可能真的是该再多努力一些了,今天记录的这个是项目里面用到的一个控件,我之前有在网上找过,看看有没有类似的demo,然而,哈哈哈,并没有找到合适的,大体效果就是美团 APP 上那种,如图:

11668737-77b9cd1128d4506d

12668737-59683ee4d20bd3f2

我好像就在美团上看见了这种类似的效果,然后公司项目要用到类似控件,于是就自己写了一个放在这里吧,嘿嘿

步入正题

接下来不如正题,控件效果是这样的———–> 图:

13668737-88e337651e557a67

大体效果大致就是像 GIF 图上显示的这样,这只是个简单的大体 demo,具体的细化还没有做呢,里面的数据也是我随意填的,😜。

大体思路

这个控件的功能也很明显了,分左中右这三块,大概说一下这个控件的大体思路,从左往右,最左边是 为了增加点儿视觉效果,而且选项不多,所以用的图片多点儿,我是用的 collectionView , 里面的 cell 就特别简单了,就是一个 ImageView+label 搞定的。中间需要复选,这个是用了两个tableView,将两个tableView进行关联。最右边是一个简单的tableView 。这两块里用的 tableView 里面的 cell 就是用的系统自带的 cell 样式。这个控件我就是根据 tableView的思想来 code 的,外部方法的调用也都是通过dataSourcedelegate来调用的。大体介绍完毕,接下来就结合代码介绍一下。

代码

第一部分:提前工作准备

这个没有什么可以介绍的,我就是比较喜欢把可能用到的变量写在前面,便于修改啊什么的。

第二部分:DOPIndexPath

这个就是根据tableView的思路,声明了一个IndexPath类,这里的 column是用来区分 titleBar 上是第几列的

14668737-a97b01199641dd71

row 就是控件中的tableViewcell的行数,item是中间双tableView中右边rightTableViewcell用的。
看着这些方法是不是很熟悉啊,就是 tableView 中我们经常用到的方法。😁

DOPDropDownMenuDataSource+DOPDropDownMenuDelegate

这一部分是声明的 protocol, 便于在外部调用,每个方法都有注释了,里面的方法和tableView也是很相似。

DOPBackgroundCellView

这个是用 context 画的一个 cell 选中的背景 view,当然也可以用别的代替啊

DataSourceFlags

这个是声明的一个结构体,里面存放的是每个 protocol 返回的 Num,以便在本体里进行判断操作。名字和 protocol 的方法名相同。

DOPDropDownMenu

这一部分代码比较多,先说控件上所有的 title,image 都是用自定义的动画实现的。主要有以下几个方法:

方法中包含了title,indicator,BackGroundView,tableVIew,collectionView改变效果的实现.动画中的方法基本都是关联的,我将它们拆分开,以便复用,每个方法中也比较多的frame 变换计算。

在前面说过了,这个控件是由collectionViewtableView构成的, 在init 方法中初始化collectionViewtableViewbottomImageView(底部的条)、navBar 的tapGesture(手势),backgroundTapGesture(点击背景消失手势)、、、
在 dataSource的 set 方法中给结构体中的structDataSourceFlags各项复0和1值,便于接下来的往外传代理方法时候进行判断。

然后就是 nav的构建。包括:title,separator,Indicators 表现在控件上就是,navBar 上的题目,分割线,和上下的指示条(这里指示条有 bug,我还没有找出来,想着后期用 ImgView 替代)根据传入的 navBar 上 title 的数目和 column 数量进行构建 navBar,并将 title,separator,Indicators放进数组里面储存,以便进行操作(比如点击某个选项后 title 改变)。
接下来说的就是 navBar 上的点击事件的响应了,由于最左边的是collectionView 和其余两个不一样(其余两个是 tableView)所以在处理点击方法时候需要判断是不是 column 的 tapIndex == 0? 和 所选的 view 是否是打开的 isShow? ,一共四种大情况,还需要再判读 collectionView的状态进行 show OR close。

处理完 navBar 上的点击事件然后就是 backGroundView 的点击事件方法了:

然后就是 tableViewcollectionView的代理方法了,这里的 tableView用了 两个,用来区分显示一个还是显示两个就是用到 item 是否有数据来判断。

使用

控件的初始化就特别简单了,设置好frame 声明delegatedataSource是self,就好了
控件中赋值和响应方法是通过代理方法调用的:
delegate:

dataSource:

总结

项目大致流程就是这样子,代码有点儿多了,也不能具体拿出来分析了,里面各种方法穿插使用,可能会晕,具体的方法使用还是看代码的,自己回经常回头看的,这篇文章也会多多弥补缺漏的。。。。

代码链接在这:https://github.com/iOSJason/SwiftDropDownMenuDemo

打赏支持我写出更多好文章,谢谢!

打赏作者

打赏支持我写出更多好文章,谢谢!

任选一种支付方式

1 1 收藏 评论

关于作者:劉光軍_Shine

行到水穷处,坐看云起时 个人主页 · 我的文章 · 3 ·     

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部