仿手机QQ下拉菜单框架(FFDropDownMenu) -- 自
2016-08-07 本文已影响1323人
chenfanfang
最近写了这个框架: FFDropDownMenu,类似手机QQ下拉菜单。
github地址:
https://github.com/chenfanfang/FFDropDownMenu
更多的使用方法的demo地址:
https://github.com/chenfanfang/CollectionsOfExample
更多的使用方法的博客地址:
http://www.jianshu.com/notebooks/5552428/latest
若觉得框架自带的菜单样式不够好看，或者布局不是自己想要的效果，那么，你可以自定义菜单选项的cell,自己给每个菜单选项cell添加子控件，自己对其进行任意样式的布局。这篇博客将介绍如何自定义菜单选项cell。
先来看下效果图
仿QQ下拉菜单自定义菜单样式.gif
仿QQ下拉菜单自定义菜单样式.png
框架自带的菜单选项样式是左边是图标，右边是标题，上面的效果图是左边标题，右边图标。你也可以自定义任何样式，添加更多的控件。
<a id="Installation"></a> Installation【安装】
From CocoaPods【使用CocoaPods】
pod FFDropDownMenu
Manually【手动导入】
-
Drag all source files under floder
FFDropDownMenuto your project.【将FFDropDownMenu文件夹中的所有源代码拽入项目中】 -
FFDropDownMenu文件夹里面的文件有
FFDropDownMenuBasedCell.h FFDropDownMenuBasedCell.m
FFDropDownMenuBasedModel.h FFDropDownMenuBasedModel.m
FFDropDownMenuCell.h FFDropDownMenuCell.m
FFDropDownMenuModel.h FFDropDownMenuModel.m
FFDropDownMenuTriangleView.h FFDropDownMenuTriangleView.m
FFDropDownMenuView.h FFDropDownMenuView.m
【开始使用】
先导入头文件
//若使用CocoaPods
#import <FFDropDownMenuView.h>
//若使用手动导入
#import "FFDropDownMenuView.h"
自定义继承于FFDropDownMenuBasedCell类的菜单cell
自定义菜单cell 的.h文件
#import <FFDropDownMenuBasedCell.h>
@interface FFDropDownMenuCustomCell : FFDropDownMenuBasedCell
@end
自定义菜单cell 的.m文件
#import "FFDropDownMenuCustomCell.h"
//model
#import "FFDropDownMenuModel.h"
@interface FFDropDownMenuCustomCell ()
/** 图片 */
@property (weak, nonatomic) UIImageView *customImageView;
/** 标题 */
@property (weak, nonatomic) UILabel *customTitleLabel;
/** 底部分割线 */
@property (nonatomic, weak) UIView *separaterView;
@end
@implementation FFDropDownMenuCustomCell
- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {
if (self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]) {
//初始化子控件
UIImageView *customImageView = [[UIImageView alloc] init];
customImageView.contentMode = UIViewContentModeScaleToFill;
[self addSubview:customImageView];
self.customImageView = customImageView;
UILabel *customTitleLabel = [[UILabel alloc] init];
customTitleLabel.font = [UIFont systemFontOfSize:15];
[self addSubview:customTitleLabel];
self.customTitleLabel = customTitleLabel;
UIView *separaterView = [[UIView alloc] init];
separaterView.backgroundColor = [UIColor colorWithRed:25 / 255.0 green:168 / 255.0 blue:243 / 255.0 alpha:0.3];
[self addSubview:separaterView];
self.separaterView = separaterView;
}
return self;
}
- (void)layoutSubviews { //这个方法的主要任务是进行子控件frame的赋值
[super layoutSubviews];
//frame的赋值
CGFloat separaterHeight = 1; //底部分割线高度
//图片 customImageView
CGFloat imageViewMargin = 3;
CGFloat imageViewH = self.frame.size.height - 2 * imageViewMargin;
self.customImageView.frame = CGRectMake(10, imageViewMargin, imageViewH, imageViewH);
//标题
CGFloat labelX = CGRectGetMaxX(self.customImageView.frame) + 10;
self.customTitleLabel.frame = CGRectMake(labelX, 0, self.frame.size.width - labelX, self.frame.size.height - separaterHeight);
//分割线
self.separaterView.frame = CGRectMake(0, self.frame.size.height - separaterHeight, self.frame.size.width, separaterHeight);
}
/** 重写setMenuModel---对控件进行赋值 */
- (void)setMenuModel:(id)menuModel {
_menuModel = menuModel;
FFDropDownMenuModel *realMenuModel = (FFDropDownMenuModel *)menuModel;
self.customTitleLabel.text = realMenuModel.menuItemTitle;
//给imageView赋值
self.customImageView.image = [UIImage imageNamed:realMenuModel.menuItemIconName];
}
@end
若自定义了cell,框架自带的模型FFDropDownMenuModel里面的属性不够用，可以自定义一个继承于FFDropDownMenuBasedModel的模型，自己添加属性。本篇博客的例子用框架自带的模型FFDropDownMenuModel是够用的，所以不自定义菜单模型。自定义菜单模型在这篇博客中有介绍http://www.jianshu.com/p/6a42a35ae2db
到此为止，自定义菜单样式就已经完成，接下来就是如何创建菜单了。
获取下拉菜单模型数组
/** 获取下拉菜单模型数组 */
- (NSArray *)getDropDownMenuModelsArray {
__weak typeof(self)weakSelf = self;
//若 模型FFDropDownMenuModel里面的属性不够用，可以自定义继承于FFDropDownMenuBasedModel的模型
//菜单模型0
FFDropDownMenuModel *menuModel0 = [FFDropDownMenuModel new];
menuModel0.menuItemTitle = @"Twitter";
menuModel0.menuItemIconName = @"menu0";
menuModel0.menuBlock = ^ {
UIViewController *vc = [UIViewController new];
[weakSelf.navigationController pushViewController:vc animated:YES];
};
//菜单模型1
FFDropDownMenuModel *menuModel1 = [FFDropDownMenuModel new];
menuModel1.menuItemTitle = @"Line";
menuModel1.menuItemIconName = @"menu1";
menuModel1.menuBlock = ^ {
//do something
};
//菜单模型2
FFDropDownMenuModel *menuModel2 = [FFDropDownMenuModel new];
menuModel2.menuItemTitle = @"QQ";
menuModel2.menuItemIconName = @"menu2";
menuModel2.menuBlock = ^ {
//do something
};
NSArray *menuModelArr = @[menuModel0, menuModel1, menuModel2....];
return menuModelArr;
}
创建下拉菜单
- (void)createDropdownMenu {
NSArray *menuModelsArr = [self getDropDownMenuModelsArray];
self.dropDownMenu = [FFDropDownMenuView new];
self.dropDownMenu.menuModelsArray = menuModelsArr;
self.dropDownMenu.cellClassName = @"FFDropDownMenuCustomCell";
self.dropDownMenu.menuItemBackgroundColor = FFColor(255, 255, 255, 0.7);
self.dropDownMenu.triangleColor = FFColor(255, 255, 255, 0.7);
[self.dropDownMenu setup];
}
显示下拉菜单
[self.dropDownMenu showMenu];
期待
- 如果在使用过程中遇到BUG，希望你能在 简书私信我，或者在我简书专题的博客进行评论。谢谢（或者尝试下载最新的框架代码看看BUG修复没有）
- 如果在使用过程中发现功能不够用，希望你能在 简书私信我，或者在我简书专题的博客进行评论。我非常想为这个框架增加更多好用的功能，谢谢
- 如果你想和我一起完善FFDropDownMenu，请Pull Requests我
