Swift类似美团下拉菜单

最新推荐文章于 2024-08-28 09:03:06 发布

劉光軍_Shine

最新推荐文章于 2024-08-28 09:03:06 发布

阅读量266

点赞数

分类专栏： swift整理

本文链接：https://blog.csdn.net/qq_26968911/article/details/103954369

版权

本文介绍了如何使用Swift创建类似美团APP中的下拉菜单，包括控件效果、大体思路和实现代码，展示了实现这一功能的关键代码和数据源协议。

摘要由CSDN通过智能技术生成

写在前面

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

![meituanPic2.PNG](http://upload-images.jianshu.io/upload_images/668737-59683ee4d20bd3f2.PNG?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

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

步入正题

接下来不如正题，控件效果是这样的-----------> 图：

DOP_Screen.gif

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

大体思路

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

代码

第一部分：提前工作准备

//MARK:- 全局变量
public let kTableViewCellHeight: Int = 43
public let kCollectionViewCellHeight: Int = 100
public let kCollectionViewHeight: Int = 220
public let kTableViewHeight: Int = 300
public let kButtomImageViewHeight: Int = 21

public let kTextColor: UIColor = UIColor(red: 51/255.0, green: 51/255.0, blue: 51/255.0, alpha: 1)
public let kDetailTextColor: UIColor = UIColor(red: 136/255.0, green: 136/255.0, blue: 136/255.0, alpha: 1)
public let kSepatatorColor: UIColor = UIColor(red: 219/255.0, green: 219/255.0, blue: 219/255.0, alpha: 1)
public let kCellBgColor: UIColor = UIColor(red: 245/255.0, green: 245/255.0, blue: 245/255.0, alpha: 1)
public let kTextSelectColor: UIColor = UIColor(red: 253/255.0, green: 191/255.0, blue: 44/255.0, alpha: 1)```
这个没有什么可以介绍的，我就是比较喜欢把可能用到的变量写在前面，便于修改啊什么的。
######第二部分：DOPIndexPath

//MARK:DOPIndexPath
class DOPIndexPath: NSObject {
var column:Int?
var row:Int?
var item:Int?

init(dopColumn: Int, dopRow: Int) {
    column = dopColumn
    row = dopRow
    item = -1
}

convenience init(dopColumn: Int, dopRow: Int, dopItem: Int) {
    self.init(dopColumn: dopColumn, dopRow: dopRow)
    item = dopItem
}

static func indexPathWith(col: Int, row: Int) -> DOPIndexPath {
    let indexPath = DOPIndexPath.init(dopColumn: col, dopRow: row)
    return indexPath
}

static func indexPathWith(col: Int, row: Int, item: Int) -> DOPIndexPath {
    return DOPIndexPath(dopColumn: col, dopRow: row, dopItem: item)
}

}

这个就是根据```tableView```的思路，声明了一个``` IndexPath ```类，这里的 ```column```是用来区分 titleBar 上是第几列的
![titleBar.png](http://upload-images.jianshu.io/upload_images/668737-a97b01199641dd71.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
`&