CoolSlidingMenu 仿美团、糯米、大众点评顶部可滑动菜单 Swift & Objective-C 双版本

CoolSlidingMenu

CoolSlidingMenu

开发环境

Mac OS 10.12+ / Xcode 8+

支持环境

iOS 8+, iPhone & iPad

项目获取

项目已经上传至github中, Swift版本: CoolSlidingMenu(https://github.com/cba023/CoolSlidingMenu),若要使用,请导入文件到您的项目,另有Objective-C版本 CoolSlidingMenu (https://github.com/cba023/CoolSlidingMenuOC)。
简书地址:http://www.jianshu.com/p/375fe7984571

功能展示

User guide

使用说明

导入项目

1. 手动导入

手动导入项目需要将该文件夹的所有内容引入项目中

如图所示,将“CoolSlingMenu”文件夹拖入要用到该框架的工程中,在Swift项目中,可直接对其进行使用,ObjC项目中需要用到桥接。

对项目菜单进行定制

创建滚动菜单视图

var slidingMenuView = CoolSlidingMenuView()

定制我们要使用的CoolSlidingMenu

// 显示滑动菜单pageControl
slidingMenuView.pgCtrl.isHidden = false  
// 未选中页pageControl颜色
slidingMenuView.pgCtrlNormalColor = .lightGray
// 选中页pageControl颜色
slidingMenuView.pgCtrlSelectedColor = .red
// 设置滑动菜单的行数
slidingMenuView.countRow = 2
// 设置滑动菜单的列数
slidingMenuView.countCol = 5

CoolSlidingMenu数据源

数组格式如下所示:


屏幕快照 2017-08-20 16.14.21.png

滑动菜单数据源是带title 和image 两个key的字典型数组:

let arrMenu = [
  ["title":"0美食","image":"img1.png"],
  ["title":"1电影","image":"img2.png"],
  ["title":"2健身","image":"img3.png"]
]
slidingMenuView.arrMenu = arrMenu

添加CoolSlidingMenu到视图中

let width = UIScreen.main.bounds.size.width
slidingMenuView.contentMode = .scaleAspectFit
// 行数2, 列数5,pageControl预留高度8
slidingMenuView.frame = CGRect(x: 0, y: 0, width: width, height: width / 5.0 * 2.0 + 8.0)
self.view.addSubview(slidingMenuView)

实现原理

CoolSlidingMenu主要通过UICollectionView实现,在滑动菜单中,是从左至右排列的,所以我们想要的布局如下:


1.我们想要的效果

然而,UICollectionView的实际排列确实纵向排列。如下图:


2.UICollectionView默认的排列方式

所以我们要将纵向排列转换成横向排列,CoolSlidingMenu中用到转换函数如下:

/// Converting the ordering of Numbers Author: ChenBo
    ///
    /// - Parameters:
    ///   - number: input number  输入的数字
    ///   - rowCount: rows count   行数
    ///   - colCount: cols count   列数
    /// - Returns: output number  输出的数字
func convertDirectionCount(Number number:Int, RowCount rowCount: Int, ColCount colCount: Int) -> Int {
        // 十位
        let tempH = number / (colCount * rowCount)
        // 个位
        let tempL = number % (colCount * rowCount)
        let result:Int = tempL - (tempL / rowCount) * (rowCount - 1) + tempL % rowCount * (colCount - 1) + tempH * (colCount * rowCount)
//        print("排序前:",number,"行数:",rowCount, "列数:" ,"tempH:",tempH,"tempL:",tempL, colCount,"----->",result)
        return result
    }

经过转换,滑动菜单就从纵向排列转化成横向排列了。 亲,懂了吗?赶快去嗨皮吧!

致读者

该项目已经上传至github中CoolSlidingMenu(https://github.com/cba023/CoolSlidingMenu),另有Objective-C版本 CoolSlidingMenu (https://github.com/cba023/CoolSlidingMenuOC),可以在那里直接star 或者fork 该项目,它可能会长期的帮助您高效地进行程序开发,当然也欢迎留言,有不足或者错误的地方可以随时指正,您的指导和建议是我前行路上新的动力!

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

推荐阅读更多精彩内容