iOS 下拉式功能表 FFDropDownMenu自訂下拉式功能表樣式實戰-b

標籤：

Demo地址:
https://github.com/chenfanfang/CollectionsOfExample
FFDropDownMenu架構地址:
https://github.com/chenfanfang/FFDropDownMenu

老樣子，先附上兩張

customMenuStyle.gif

customMenuStyle.png

• 首先自訂一個繼承於FFDropDownMenuBasedModel的菜單模型
  .h檔案

#import <FFDropDownMenuBasedModel.h>@interface FFDropDownCustomMenuStyle1Model : FFDropDownMenuBasedModel/** 主標題的背景顏色 */@property (nonatomic, strong) UIColor *mainTitleBgColor;/** 主標題 */@property (nonatomic, copy) NSString *mainTitle;/** 副標題 */@property (nonatomic, copy) NSString *subTitle;//菜單模型建立的屬性用於自訂菜單cell，所以需要什麼屬性，自己定義@end

.m檔案

#import "FFDropDownCustomMenuStyle1Model.h"@implementation FFDropDownCustomMenuStyle1Model@end

• 其次自訂一個繼承於FFDropDownMenuBasedCell的cell

FFDropDownCustomMenuStyle1Cell.h

#import <FFDropDownMenuView.h>/**   *  自訂菜單效果1 菜單 cell   */@interface FFDropDownCustomMenuStyle1Cell : FFDropDownMenuBasedCell@end

FFDropDownCustomMenuStyle1Cell.m

#import "FFDropDownCustomMenuStyle1Cell.h"//model#import "FFDropDownCustomMenuStyle1Model.h"@interface FFDropDownCustomMenuStyle1Cell ()@property (weak, nonatomic) IBOutlet UILabel *mainTitle_Label;@property (weak, nonatomic) IBOutlet UILabel *subTitle_Label;@[email protected] FFDropDownCustomMenuStyle1Cell- (void)setMenuModel:(id)menuModel {          _menuModel = menuModel;        //在這裡將模型轉成自訂的模型         FFDropDownCustomMenuStyle1Model *realModel = (FFDropDownCustomMenuStyle1Model *)menuModel;        self.mainTitle_Label.backgroundColor = realModel.mainTitleBgColor;        self.mainTitle_Label.text = realModel.mainTitle;        self.subTitle_Label.text = realModel.subTitle; 
}@end

cell的xib布局圖如下

Snip20160915_1.png

• 最後就可以建立下拉式功能表了

#import "FFDropDownCustomMenuStyle1VC.h"//controller#import "FFDropDownMenuNextPageVC.h"//view#import <FFDropDownMenuView.h>//model#import "FFDropDownCustomMenuStyle1Model.h"@interface FFDropDownCustomMenuStyle1VC ()/** 下拉式功能表 */@property (nonatomic, strong) FFDropDownMenuView *dropDownMenu;@[email protected] FFDropDownCustomMenuStyle1VC- (void)viewDidLoad {         [super viewDidLoad];          [self createDropdownMenu];          [self setupNav];}- (void)createDropdownMenu {        NSArray *menuModelsArr = [self getDropDownMenuModelsArray];        self.dropDownMenu = [FFDropDownMenuView new];        //設定動畫效果,可以根據項目需求設定自己所需要的動畫效果    self.dropDownMenu.menuAnimateType = FFDropDownMenuViewAnimateType_FallFromTop;        //若不需要灰色透明蒙板，下面的兩個透明度可以設定為0     self.dropDownMenu.bgColorbeginAlpha = 0;        self.dropDownMenu.bgColorEndAlpha = 0;        //設定下拉式功能表的寬度為整個螢幕的寬度     self.dropDownMenu.menuWidth = [UIScreen mainScreen].bounds.size.width;        //設定菜單距離螢幕右邊的邊距為0     self.dropDownMenu.menuRightMargin = 0;        //取消菜單圓角效果     self.dropDownMenu.menuCornerRadius = 0;        //隱藏三角形     self.dropDownMenu.triangleSize = CGSizeZero;        self.dropDownMenu.eachMenuItemHeight = 70;        self.dropDownMenu.menuModelsArray = menuModelsArr;        self.dropDownMenu.cellClassName = @"FFDropDownCustomMenuStyle1Cell.xib";        self.dropDownMenu.menuItemBackgroundColor = FFColor(255, 255, 255, 0.7);         [self.dropDownMenu setup]; }/** 擷取下拉式功能表模型數組 */- (NSArray *)getDropDownMenuModelsArray {         __weak typeof(self)weakSelf = self;          FFDropDownCustomMenuStyle1Model *menuModel1 = [FFDropDownCustomMenuStyle1Model new];         menuModel1.mainTitleBgColor = FFColor(54, 188, 37, 1);         menuModel1.mainTitle = @"1";         menuModel1.subTitle = @"First Menu Item";         menuModel1.menuBlock = ^ {                 FFDropDownMenuNextPageVC *vc = [FFDropDownMenuNextPageVC new];                 vc.navigationItem.title = @"First Menu Item";                 [weakSelf.navigationController pushViewController:vc animated:YES];         };           FFDropDownCustomMenuStyle1Model *menuModel2 = [FFDropDownCustomMenuStyle1Model new];         menuModel2.mainTitleBgColor = FFColor(255, 199, 40, 1);         menuModel2.mainTitle = @"2";         menuModel2.subTitle = @"Second Menu Item";         menuModel2.menuBlock = ^ {                 FFDropDownMenuNextPageVC *vc = [FFDropDownMenuNextPageVC new];                 vc.navigationItem.title = @"Second Menu Item";                 [weakSelf.navigationController pushViewController:vc animated:YES];         };           FFDropDownCustomMenuStyle1Model *menuModel3 = [FFDropDownCustomMenuStyle1Model new];         menuModel3.mainTitleBgColor = FFColor(255, 81, 31, 1);         menuModel3.mainTitle = @"3";         menuModel3.subTitle = @"Third Menu Item";         menuModel3.menuBlock = ^ {             FFDropDownMenuNextPageVC *vc = [FFDropDownMenuNextPageVC new];                 vc.navigationItem.title = @"Facebook";                 [weakSelf.navigationController pushViewController:vc animated:YES];         };          FFDropDownCustomMenuStyle1Model *menuModel4 = [FFDropDownCustomMenuStyle1Model new];         menuModel4.mainTitleBgColor = FFColor(18, 170, 158, 1);         menuModel4.mainTitle = @"4";         menuModel4.subTitle = @"Fourth Menu Item";         menuModel4.menuBlock = ^ {             FFDropDownMenuNextPageVC *vc = [FFDropDownMenuNextPageVC new];                 vc.navigationItem.title = @"Facebook";                 [weakSelf.navigationController pushViewController:vc animated:YES];         };          FFDropDownCustomMenuStyle1Model *menuModel5 = [FFDropDownCustomMenuStyle1Model new];         menuModel5.mainTitleBgColor = FFColor(0, 119, 195, 1);         menuModel5.mainTitle = @"5";         menuModel5.subTitle = @"Fifth Menu Item";         menuModel5.menuBlock = ^ {                 FFDropDownMenuNextPageVC *vc = [FFDropDownMenuNextPageVC new];                 vc.navigationItem.title = @"Facebook";                 [weakSelf.navigationController pushViewController:vc animated:YES];         };        NSArray *menuModelArr = @[menuModel1,menuModel2,menuModel3,menuModel4,menuModel5];        return menuModelArr; }/** 初始化導覽列 */- (void)setupNav {        self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemAdd target:self.dropDownMenu action:@selector(showMenu)];        self.navigationItem.title = @"實戰:自訂菜單效果1"; }@end

iOS 下拉式功能表 FFDropDownMenu自訂下拉式功能表樣式實戰-b