YANScrollMenu - 美团、大众点评首页滑动菜单

前言

之前因为项目用到了类似美团和大众点评首页的滑动菜单，于是打算造个简单易用且扩展性高的轮子，毕竟以后可能还会用到，然后就有了 YANScrollMenu

结构

---

.
│── UIView           # 页眉
├── UICollectionView  
│   └── UICollectionViewCell  #单元格
│       │──  UIImageView   #图片
│       └──  UILabel       #文本
└── UIPageControl    # 分页控制器

使用

---

环境

---

• ARC
• iOS 8.0 +

导入

---

支持 Cocoapods 导入:

pod 'YANScrollMenu', '~> 1.0.0'

也可以手动将YANScrollMenu文件夹下的文件导入工程，需要依赖 SDWebImage和Masonry，如果SDWebImage的版本大于3.8.2，则图片不再支持动态图。

在需要用到的地方导入头文件即可：

#import "YANScrollMenu.h"

初始化

目前仅支持一种方法初始化：

self.menu = [[YANScrollMenu alloc] initWithFrame:CGRectMake(0, 0, 375,150) delegate:self];
# 添加到视图
[self.view addSubview:self.menu];
    
# 也可以设置成tableHeaderView
self.tableView.tableHeaderView = self.menu;

协议

---

数据源需要遵守 YANObjectProtocol 协议：

/** 数据模型协议 */
@protocol YANObjectProtocol <NSObject>
/**
 *  显示文本
 */
@property (nonatomic, copy) NSString *itemDescription;
/**
 *  显示图片，可以为NSURL,NSString,UIImage三种格式
 */
@property (nonatomic, strong) id itemImage;
/**
 *  占位图片
 */
@property (nonatomic, strong) UIImage *itemPlaceholder;

@end

代理需要实现 YANScrollMenuDataSource的方法

/** 每个分区单元格的数量 */
- (NSUInteger)scrollMenu:(YANScrollMenu *)menu numberOfItemsInSection:(NSInteger)section

/** 分区的数量 */
- (NSUInteger)numberOfSectionsInScrollMenu:(YANScrollMenu *)menu
/** 数据源 */

- (id<YANObjectProtocol>)scrollMenu:(YANScrollMenu *)scrollMenu objectAtIndexPath:(NSIndexPath *)indexPath

YANScrollMenuDelegate 非必实现，此协议中的方法都是关于自定义以及处理点击事件的处理

/** 单元格尺寸，默认是(40,70) */
- (CGSize)itemSizeOfScrollMenu:(YANScrollMenu *)menu

/** 分区的页眉，默认不显示 */
- (UIView *)scrollMenu:(YANScrollMenu *)menu headerInSection:(NSUInteger)section
/** 页眉的高度，默认20 */
- (CGFloat)heightOfHeaderInScrollMenu:(YANScrollMenu *)menu

/** 分页器的高度，默认15 */
- (CGFloat)heightOfPageControlInScrollMenu:(YANScrollMenu *)menu

/** 当单元格数量改变时，是否自动更新Frame以适应。默认是NO */
- (BOOL)shouldAutomaticUpdateFrameInScrollMenu:(YANScrollMenu *)menu

/** 单元格点击回调*/
- (void)scrollMenu:(YANScrollMenu *)menu didSelectItemAtIndexPath:(NSIndexPath *)indexPath

自定义

---

也可以通过全局自定义 Cell 的部分属性

# 图片的尺寸
[[YANMenuItem appearance] setIconSize:30];

# 图片的圆角
[[YANMenuItem appearance] setIconCornerRadius:15];

# 文本的字体
[[YANMenuItem appearance] setTextFont:[UIFont systemFontOfSize:12]];

# 文本的颜色
[[YANMenuItem appearance] setTextColor:[UIColor darkTextColor]];

# 图片和文本之间的距离
[[YANMenuItem appearance] setSpace:5];

效果

---

关于

---

Github Blog