CLDropDownMenuView
一個(gè)高度可定制的下拉菜單革骨，效果如下：
下拉菜單效果圖.gif
Getting Started 【開始使用】
Features 【能做什么】
DropDownMenuView 是一個(gè)提供高度自定制的下拉菜單讥蔽。所以你可以根據(jù)的你的需要設(shè)置以下值。
- 右邊距(rightMarign // 注意這個(gè)位置是相對于 - (void)addDropDownMenuToView:(UIView *)view要添加視圖的右邊距 默認(rèn)是 15)
- 上邊距(topMarign; // 同上 上邊距 默認(rèn)是64篷角；)
- cell的樣式(dropDownType; // 默認(rèn)的是顯示文字和圖片)
- 寬度(viewWidth; // 默認(rèn)是150.00 最小寬度是60.0f)
- 最大顯示行數(shù)(limitMaxCount; // 最多顯示多少行 默認(rèn)是5行 如果設(shè)置的值<=0 或者 >= 10 那么就是默認(rèn)值)
- 能否拖動(dòng)(bounces; // 默認(rèn)是 NO. 能否拖動(dòng) )
- cell的高度(itemHeight; // 每個(gè)單元格的高度 默認(rèn)是50焊刹；最小高度35（避免圖片不能正常顯示）；)
- 文字(textFont; // 文字大小 默認(rèn)14號系統(tǒng)字體)
- 文字顏色(textColor; // 文字顏色 默認(rèn)0.25白色字體)
- 背景顏色(backgroundColor; // 背景顏色 默認(rèn)是白色)
- 是否可用(disableItemSelected; // 不可用的狀態(tài)是否可以被點(diǎn)擊 默認(rèn)是不可以)
- 不可用文字的大小(disableTextFont; // 不可用的文字大小 默認(rèn)14號系統(tǒng)字體)
- 不可用文字的顏色(disableTextColor; //不可以文字顏色 默認(rèn)0.88白色字體)
- 背景尖角的高度( pointedHeight; // 背景圖片尖的高度 默認(rèn)是9.0f 根據(jù)自己圖片尺寸進(jìn)行調(diào)整)
- 背景的圓角(cornerRadius; // 圓角半徑 默認(rèn)是5.f;)
Installation 【安裝】
From CocoaPods【使用CocoaPods】
pod 'CLDropDownMenuView'
安裝成功后恳蹲，引入頭文件#import <DropDownMenuView/CLDropDownMenuView.h>
Manually【手動(dòng)導(dǎo)入】
github地址：CLDropDownMenuView
項(xiàng)目結(jié)構(gòu)如下：
項(xiàng)目結(jié)構(gòu).png
直接將DropDownMenuView 文件到導(dǎo)入你的項(xiàng)目虐块，導(dǎo)入頭文件#import "CLDropDownMenuView.h"即可。
Description 【描述】
圖層分解：
CLDropDownMenuView --> 遮罩層UIView(黑色背景：bgMaskView) --> UIImageView(下拉菜單的背景圖：bgImageView) --> UItableView(表格視圖：tableView) -->UITableViewCell(點(diǎn)擊的單元格)
可能用到的庫文件分析：
CLDropDownMenuView：下拉菜單視圖類
CLDropDownMenuValue：一些枚舉
CLDropDownMenuDelegate:代理回調(diào)
CLDropDownMenuInfo: 每個(gè)單元格的信息
CLDropDownMenuConfig： 配置每個(gè)單元格的樣式
類中提供的的一些屬性和方法
CLDropDownMenuView：
// 背景圖片
@property (nonatomic, strong) UIImage *bgImage;
// delegate
@property (nonatomic, weak) id<CLDropDownMenuDelegate> delegate;
//設(shè)置菜單數(shù)據(jù)
@property (nonatomic, strong) NSArray<CLDropDownMenuInfo *> *itemList;
// 配置菜單信息
@property (nonatomic, strong) CLDropDownMenuConfig *menuConfig;
// 是否顯示
@property (nonatomic, assign, readonly) BOOL isShow;
// 視圖初始化
+ (instancetype)dropDownMenuView;
// 添加視圖到某個(gè)視圖上
- (void)addDropDownMenuToView:(UIView *)view;
//關(guān)閉下拉菜單 一般情況不用調(diào)用
- (void)dismissDropDownMenuView;
// 刷新數(shù)據(jù) 也是顯示菜單方法
- (void)reloadData;
// 自定義Item單元格的 可以根據(jù)自己的愛好 自己定義
- (void)registerNib:(UINib *)nib forCellReuseIdentifier:(NSString *)identifier;
- (void)registerClass:(Class)cellClass forCellReuseIdentifier:(NSString *)identifier;
- (__kindof UITableViewCell *)dequeueReusableCellWithIdentifier:(NSString *)identifier;
CLDropDownMenuValue：
typedef NS_ENUM(NSInteger, CLDropDownType) {
CLDropDownTypeAll = 0, // 有文字和圖片
CLDropDownTypeOnlyTitle, // 只有文字
CLDropDownTypeCustom // 自定義item樣式
};
CLDropDownMenuDelegate：
@protocol CLDropDownMenuDelegate <NSObject>
@required;
/* 點(diǎn)擊了哪一行*/
- (void)dropDownMenuView:(CLDropDownMenuView *)dropDownMenuView didSelectIndex:(NSInteger)index;
@optional;
/* 視圖將要顯示 */
- (void)dropDownMenuViewWillShow:(CLDropDownMenuView *)dropDownMenuView;
/* 視圖將要消失 */
- (void)dropDownMenuViewWillDismiss:(CLDropDownMenuView *)dropDownMenuView;
/* 視圖已經(jīng)顯示 */
- (void)dropDownMenuViewDidShow:(CLDropDownMenuView *)dropDownMenuView;
/* 視圖已經(jīng)消失 */
- (void)dropDownMenuViewDidDismiss:(CLDropDownMenuView *)dropDownMenuView;
// 1.1.2 增加自定義item
- (UITableViewCell *)dropDownMenuView:(CLDropDownMenuView *)dropDownMenuView cellForIndex:(NSInteger)index;
@end
CLDropDownMenuInfo：
// 圖片名字
@property (nonatomic, copy) NSString *imageName;
// 標(biāo)題
@property (nonatomic, copy) NSString *title;
//是不是不能用
@property (nonatomic, assign) BOOL disable;
CLDropDownMenuConfig：
@property (nonatomic, assign) CGFloat rightMarign; // 注意這個(gè)位置是相對于 - (void)addDropDownMenuToView:(UIView *)view要添加視圖的右邊距 默認(rèn)是 15
@property (nonatomic, assign) CGFloat topMarign; // 同上 上邊距 默認(rèn)是64嘉蕾；
@property (nonatomic, assign) CLDropDownType dropDownType; // 默認(rèn)的是顯示文字和圖片
@property (nonatomic, assign) CGFloat viewWidth; // 默認(rèn)是150.00 最小寬度是60.0f
@property (nonatomic, assign) NSInteger limitMaxCount; // 最多顯示多少行 默認(rèn)是5行 如果設(shè)置的值<=0 或者 >= 10 那么就是默認(rèn)值
@property (nonatomic, assign) BOOL bounces; // 默認(rèn)是 NO. 能否拖動(dòng)
@property (nonatomic, assign) CGFloat itemHeight; // 每個(gè)單元格的高度 默認(rèn)是50贺奠；最小高度35（避免圖片不能正常顯示）；
@property (nonatomic, strong) UIFont *textFont; // 文字大小 默認(rèn)14號系統(tǒng)字體
@property (nonatomic, strong) UIColor *textColor; // 文字顏色 默認(rèn)0.25白色字體
@property (nonatomic, strong) UIColor *backgroundColor; // 背景顏色 默認(rèn)是白色
@property (nonatomic, strong) UIFont *disableTextFont; // 不可用的文字大小 默認(rèn)14號系統(tǒng)字體
@property (nonatomic, strong) UIColor *disableTextColor; //不可以文字顏色 默認(rèn)0.88白色字體
@property (nonatomic, assign) CGFloat pointedHeight; // 背景圖片尖的高度 默認(rèn)是9.0f 根據(jù)自己圖片尺寸進(jìn)行調(diào)整
@property (nonatomic, assign) BOOL disableItemSelected; // 不可用的狀態(tài)是否可以被點(diǎn)擊 默認(rèn)是不可以
@property (nonatomic, assign) CGFloat cornerRadius; // 圓角半徑 默認(rèn)是5.f;
Examples 【示例】
具體可參照github CLDropDownMenuViewExample
#import "ViewController.h"
#import "CLDropDownMenuView.h"
#import "CLTestTableViewCell.h"
@interface ViewController ()<CLDropDownMenuDelegate>
@property (nonatomic, strong) CLDropDownMenuView *dropDownMenuView;
@property (nonatomic, strong) CLDropDownMenuConfig *menuConfig;
@property (nonatomic, strong) NSMutableArray *itemsList;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
self.view.backgroundColor = [UIColor whiteColor];
/********模擬數(shù)據(jù)*********/
self.itemsList = [NSMutableArray new];
for (int i = 0; i < 4; i++) {
CLDropDownMenuInfo *info1 = [[CLDropDownMenuInfo alloc] init];
info1.title = @"我是不能用的";
info1.imageName = @"CameraIcon";
info1.disable = arc4random()%2;
[self.itemsList addObject:info1];
}
UIButton *btn = [[UIButton alloc] init];
btn.frame = CGRectMake([UIScreen mainScreen].bounds.size.width - 100, 100, 80, 40);
[btn setTitle:@"請點(diǎn)擊我" forState:UIControlStateNormal];
[self.view addSubview:btn];
[btn addTarget:self action:@selector(showMenu) forControlEvents:UIControlEventTouchUpInside];
btn.backgroundColor = [UIColor colorWithRed:81/255.0 green:158/255.0 blue:138/255.0 alpha:0.9];
btn.layer.cornerRadius = 5;
btn.titleLabel.font = [UIFont systemFontOfSize:14];
}
- (void) showMenu {
[self.dropDownMenuView reloadData];
}
// 創(chuàng)建下拉菜單視圖
- (CLDropDownMenuView *)dropDownMenuView {
if (!_dropDownMenuView) {
_dropDownMenuView = [CLDropDownMenuView dropDownMenuView];
_dropDownMenuView.delegate = self;
_dropDownMenuView.menuConfig = self.menuConfig;
_dropDownMenuView.itemList = self.itemsList;
// [_dropDownMenuView registerNib:[UINib nibWithNibName:@"CLTestTableViewCell" bundle:nil] forCellReuseIdentifier:@"CLTestTableViewCell"];
[_dropDownMenuView addDropDownMenuToView:[UIApplication sharedApplication].keyWindow];
}
return _dropDownMenuView;
}
// 根據(jù)項(xiàng)目需要可以自己定制樣式
- (CLDropDownMenuConfig *)menuConfig {
if (!_menuConfig) {
_menuConfig = [[CLDropDownMenuConfig alloc] init];
_menuConfig.rightMarign = 20;
_menuConfig.topMarign = 145;
// _menuConfig.dropDownType = CLDropDownTypeCustom;
// _menuConfig.viewWidth = 150;
// _menuConfig.itemHeight = 44;
// _menuConfig.limitMaxCount = 5;
// _menuConfig.pointedHeight = 15;
//// _menuConfig.cornerRadius = 15;
// _menuConfig.backgroundColor = [UIColor redColor];
// _menuConfig.disableItemSelected = YES;
}
return _menuConfig;
}
#pragma mark --
#pragma mark -- CLDropDownMenuDelegate
- (void)dropDownMenuView:(CLDropDownMenuView *)dropDownMenuView didSelectIndex:(NSInteger)index {
NSLog(@"我點(diǎn)擊了第%ld行",index);
}
- (void)dropDownMenuViewDidDismiss:(CLDropDownMenuView *)dropDownMenuView {
if (self.dropDownMenuView == dropDownMenuView) {
NSLog(@"視圖已經(jīng)消失");
}
}
/* 視圖將要顯示 */
- (void)dropDownMenuViewWillShow:(CLDropDownMenuView *)dropDownMenuView {
if (self.dropDownMenuView == dropDownMenuView) {
NSLog(@"視圖將要顯示");
}
}
/* 視圖將要消失 */
- (void)dropDownMenuViewWillDismiss:(CLDropDownMenuView *)dropDownMenuView {
if (self.dropDownMenuView == dropDownMenuView) {
NSLog(@"視圖將要消失");
}
}
/* 視圖已經(jīng)顯示 */
- (void)dropDownMenuViewDidShow:(CLDropDownMenuView *)dropDownMenuView {
if (self.dropDownMenuView == dropDownMenuView) {
NSLog(@"視圖已經(jīng)顯示");
}
}
//// 自定義cell樣式 需要設(shè)置_menuConfig.dropDownType = CLDropDownTypeCustom;
//- (UITableViewCell *)dropDownMenuView:(CLDropDownMenuView *)dropDownMenuView cellForIndex:(NSInteger)index {
//
// CLTestTableViewCell *cell = [dropDownMenuView dequeueReusableCellWithIdentifier:@"CLTestTableViewCell"];
//
// CLDropDownMenuInfo *info = self.itemsList[index];
//
// cell.label.text = info.title;
//
// return cell;
//
//}
Q:這么寫不是太麻煩了嗎错忱？
A:為了適用于更多的項(xiàng)目儡率，CLDropDownMenuView提供了大量的可設(shè)置的屬性以及方法。所以你可以根據(jù)項(xiàng)目需要以清，在CLDropDownMenuView的基礎(chǔ)上封裝適合自己項(xiàng)目的菜單視圖儿普。
Expectation【期待】
如果在使用過程中遇到BUG，希望你能Issues我掷倔，謝謝（或者嘗試下載最新的框架代碼看看BUG修復(fù)沒有）
如果在使用過程中發(fā)現(xiàn)功能不夠用眉孩，希望你能Issues我，我非常想為這個(gè)框架增加更多好用的功能勒葱，謝謝
