最近寫了這個框架: FFDropDownMenu,類似手機QQ下拉菜單。
github地址:
https://github.com/chenfanfang/FFDropDownMenu
更多的使用方法的demo地址:
https://github.com/chenfanfang/CollectionsOfExample
更多的使用方法的博客地址:
http://www.lxweimin.com/notebooks/5552428/latest
若覺得框架自帶的菜單樣式不夠好看，或者布局不是自己想要的效果，那么，你可以自定義菜單選項的cell,自己給每個菜單選項cell添加子控件，自己對其進行任意樣式的布局。這篇博客將介紹如何用xib來自定義菜單選項cell。
先來看下效果圖
仿QQ下拉菜單自定義xibCell.gif
仿QQ下拉菜單自定義xibCell.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類 xib的菜單cell
先來一張cell的UI布局圖
Snip20160807_6.png
自定義菜單cell 的.h文件
#import <FFDropDownMenuBasedCell.h>
/**
* 自定義的xib cell
*
* 注意:一定要在.m文件里重寫setMenuModel，對控件進行賦值
*/
@interface FFDropDownMenuCustomXibCell : FFDropDownMenuBasedCell
@end
自定義菜單cell 的.m文件
#import "FFDropDownMenuCustomXibCell.h"
//model
#import "FFDropDownMenuCustomXibCellModel.h"
@interface FFDropDownMenuCustomXibCell ()
/** 圖標—-imageView */
@property (weak, nonatomic) IBOutlet UIImageView *iconImageView;
/** 標題--label */
@property (weak, nonatomic) IBOutlet UILabel *title_Label;
@end
@implementation FFDropDownMenuCustomXibCell
/** 重寫setMenuModel---對控件進行賦值 */
- (void)setMenuModel:(id)menuModel {
_menuModel = menuModel;
//在創建 FFDropDownMenu時候賦值的 menuModelsArray數組里放的是什么模型，下面就轉換成什么模型
FFDropDownMenuCustomXibCellModel *realMenuModel = (FFDropDownMenuCustomXibCellModel *)menuModel;
//對控件進行屬性的賦值
self.iconImageView.image = [UIImage imageNamed:realMenuModel.iconName];
self.title_Label.text = realMenuModel.title;
}
若自定義了cell,框架自帶的模型FFDropDownMenuModel里面的屬性不夠用，可以自定義一個繼承于FFDropDownMenuBasedModel的模型，自己添加屬性。本篇博客的例子用框架自帶的模型FFDropDownMenuModel是夠用的，但是為了讓大家了解如何自定義模型，現在才去自定義模型的方式。
自定義模型的.h文件
#import <FFDropDownMenuBasedModel.h>
/**
* 自定義菜單模型
*/
@interface FFDropDownMenuCustomXibCellModel : FFDropDownMenuBasedModel
//提醒：父類中有@property (nonatomic, copy) FFMenuBlock menuBlock; 這個屬性
/** 標題 */
@property (nonatomic, copy) NSString *title;
/** 圖片名稱 */
@property (nonatomic, copy) NSString *iconName;
@end
到此為止，自定義菜單樣式、自定義模型已經完成，接下來就是如何創建菜單了。
獲取下拉菜單模型數組
/** 創建下拉菜單模型數組 */
- (NSArray *)getDropDownMenuModelsArray {
__weak typeof(self)weakSelf = self;
//若 模型FFDropDownMenuModel里面的屬性夠用，則無需自定義模型----如下
/*
//菜單模型0
FFDropDownMenuModel *menuModel0 = [FFDropDownMenuModel ff_DropDownMenuModelWithMenuItemTitle:@"Twitter" menuItemIconName:@"menu0" menuBlock:^{
UIViewController *vc = [UIViewController new];
vc.navigationItem.title = @"Twitter";
[weakSelf.navigationController pushViewController:vc animated:YES];
}];
*/
//若 模型FFDropDownMenuModel里面的屬性不夠用，可以自定義繼承于FFDropDownMenuBasedModel的模型
//菜單模型0
FFDropDownMenuCustomXibCellModel *menuModel0 = [FFDropDownMenuCustomXibCellModel new];
menuModel0.title = @"Twitter";
menuModel0.iconName = @"menu0";
menuModel0.menuBlock = ^ {
UIViewController *vc = [UIViewController new];
[weakSelf.navigationController pushViewController:vc animated:YES];
};
//菜單模型1
FFDropDownMenuCustomXibCellModel *menuModel1 = [FFDropDownMenuCustomXibCellModel new];
menuModel1.title = @"Line";
menuModel1.iconName = @"menu1";
menuModel1.menuBlock = ^ {
//do something
};
//菜單模型2
FFDropDownMenuCustomXibCellModel *menuModel2 = [FFDropDownMenuCustomXibCellModel new];
menuModel2.title = @"QQ";
menuModel2.iconName = @"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 = @"FFDropDownMenuCustomXibCell.xib";
self.dropDownMenu.menuItemBackgroundColor = FFColor(255, 255, 255, 0.7);
self.dropDownMenu.triangleColor = self.dropDownMenu.menuItemBackgroundColor;
[self.dropDownMenu setup];
}
顯示下拉菜單
[self.dropDownMenu showMenu];
期待
- 如果在使用過程中遇到BUG，希望你能在 簡書私信我，或者在我簡書專題的博客進行評論。謝謝（或者嘗試下載最新的框架代碼看看BUG修復沒有）
- 如果在使用過程中發現功能不夠用，希望你能在 簡書私信我，或者在我簡書專題的博客進行評論。我非常想為這個框架增加更多好用的功能，謝謝
- 如果你想和我一起完善FFDropDownMenu，請Pull Requests我
