CLDropDownMenuView
一個高度可定制的下拉菜單，效果如下：
下拉菜單效果圖.gif
Getting Started 【開始使用】
Features 【能做什么】
DropDownMenuView 是一個提供高度自定制的下拉菜單。所以你可以根據的你的需要設置以下值。
- 右邊距(rightMarign // 注意這個位置是相對于 - (void)addDropDownMenuToView:(UIView *)view要添加視圖的右邊距 默認是 15)
- 上邊距(topMarign; // 同上 上邊距 默認是64；)
- cell的樣式(dropDownType; // 默認的是顯示文字和圖片)
- 寬度(viewWidth; // 默認是150.00 最小寬度是60.0f)
- 最大顯示行數(limitMaxCount; // 最多顯示多少行 默認是5行 如果設置的值<=0 或者 >= 10 那么就是默認值)
- 能否拖動(bounces; // 默認是 NO. 能否拖動 )
- cell的高度(itemHeight; // 每個單元格的高度 默認是50；最小高度35（避免圖片不能正常顯示）；)
- 文字(textFont; // 文字大小 默認14號系統字體)
- 文字顏色(textColor; // 文字顏色 默認0.25白色字體)
- 背景顏色(backgroundColor; // 背景顏色 默認是白色)
- 是否可用(disableItemSelected; // 不可用的狀態是否可以被點擊 默認是不可以)
- 不可用文字的大小(disableTextFont; // 不可用的文字大小 默認14號系統字體)
- 不可用文字的顏色(disableTextColor; //不可以文字顏色 默認0.88白色字體)
- 背景尖角的高度( pointedHeight; // 背景圖片尖的高度 默認是9.0f 根據自己圖片尺寸進行調整)
- 背景的圓角(cornerRadius; // 圓角半徑 默認是5.f;)
Installation 【安裝】
From CocoaPods【使用CocoaPods】
pod 'CLDropDownMenuView'
安裝成功后，引入頭文件#import <DropDownMenuView/CLDropDownMenuView.h>
Manually【手動導入】
github地址：CLDropDownMenuView
項目結構如下：
項目結構.png
直接將DropDownMenuView 文件到導入你的項目，導入頭文件#import "CLDropDownMenuView.h"即可。
Description 【描述】
圖層分解：
CLDropDownMenuView --> 遮罩層UIView(黑色背景：bgMaskView) --> UIImageView(下拉菜單的背景圖：bgImageView) --> UItableView(表格視圖：tableView) -->UITableViewCell(點擊的單元格)
可能用到的庫文件分析：
CLDropDownMenuView：下拉菜單視圖類
CLDropDownMenuValue：一些枚舉
CLDropDownMenuDelegate:代理回調
CLDropDownMenuInfo: 每個單元格的信息
CLDropDownMenuConfig： 配置每個單元格的樣式
類中提供的的一些屬性和方法
CLDropDownMenuView：
// 背景圖片
@property (nonatomic, strong) UIImage *bgImage;
// delegate
@property (nonatomic, weak) id<CLDropDownMenuDelegate> delegate;
//設置菜單數據
@property (nonatomic, strong) NSArray<CLDropDownMenuInfo *> *itemList;
// 配置菜單信息
@property (nonatomic, strong) CLDropDownMenuConfig *menuConfig;
// 是否顯示
@property (nonatomic, assign, readonly) BOOL isShow;
// 視圖初始化
+ (instancetype)dropDownMenuView;
// 添加視圖到某個視圖上
- (void)addDropDownMenuToView:(UIView *)view;
//關閉下拉菜單 一般情況不用調用
- (void)dismissDropDownMenuView;
// 刷新數據 也是顯示菜單方法
- (void)reloadData;
// 自定義Item單元格的 可以根據自己的愛好 自己定義
- (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;
/* 點擊了哪一行*/
- (void)dropDownMenuView:(CLDropDownMenuView *)dropDownMenuView didSelectIndex:(NSInteger)index;
@optional;
/* 視圖將要顯示 */
- (void)dropDownMenuViewWillShow:(CLDropDownMenuView *)dropDownMenuView;
/* 視圖將要消失 */
- (void)dropDownMenuViewWillDismiss:(CLDropDownMenuView *)dropDownMenuView;
/* 視圖已經顯示 */
- (void)dropDownMenuViewDidShow:(CLDropDownMenuView *)dropDownMenuView;
/* 視圖已經消失 */
- (void)dropDownMenuViewDidDismiss:(CLDropDownMenuView *)dropDownMenuView;
// 1.1.2 增加自定義item
- (UITableViewCell *)dropDownMenuView:(CLDropDownMenuView *)dropDownMenuView cellForIndex:(NSInteger)index;
@end
CLDropDownMenuInfo：
// 圖片名字
@property (nonatomic, copy) NSString *imageName;
// 標題
@property (nonatomic, copy) NSString *title;
//是不是不能用
@property (nonatomic, assign) BOOL disable;
CLDropDownMenuConfig：
@property (nonatomic, assign) CGFloat rightMarign; // 注意這個位置是相對于 - (void)addDropDownMenuToView:(UIView *)view要添加視圖的右邊距 默認是 15
@property (nonatomic, assign) CGFloat topMarign; // 同上 上邊距 默認是64；
@property (nonatomic, assign) CLDropDownType dropDownType; // 默認的是顯示文字和圖片
@property (nonatomic, assign) CGFloat viewWidth; // 默認是150.00 最小寬度是60.0f
@property (nonatomic, assign) NSInteger limitMaxCount; // 最多顯示多少行 默認是5行 如果設置的值<=0 或者 >= 10 那么就是默認值
@property (nonatomic, assign) BOOL bounces; // 默認是 NO. 能否拖動
@property (nonatomic, assign) CGFloat itemHeight; // 每個單元格的高度 默認是50；最小高度35（避免圖片不能正常顯示）；
@property (nonatomic, strong) UIFont *textFont; // 文字大小 默認14號系統字體
@property (nonatomic, strong) UIColor *textColor; // 文字顏色 默認0.25白色字體
@property (nonatomic, strong) UIColor *backgroundColor; // 背景顏色 默認是白色
@property (nonatomic, strong) UIFont *disableTextFont; // 不可用的文字大小 默認14號系統字體
@property (nonatomic, strong) UIColor *disableTextColor; //不可以文字顏色 默認0.88白色字體
@property (nonatomic, assign) CGFloat pointedHeight; // 背景圖片尖的高度 默認是9.0f 根據自己圖片尺寸進行調整
@property (nonatomic, assign) BOOL disableItemSelected; // 不可用的狀態是否可以被點擊 默認是不可以
@property (nonatomic, assign) CGFloat cornerRadius; // 圓角半徑 默認是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];
/********模擬數據*********/
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:@"請點擊我" 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];
}
// 創建下拉菜單視圖
- (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;
}
// 根據項目需要可以自己定制樣式
- (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(@"我點擊了第%ld行",index);
}
- (void)dropDownMenuViewDidDismiss:(CLDropDownMenuView *)dropDownMenuView {
if (self.dropDownMenuView == dropDownMenuView) {
NSLog(@"視圖已經消失");
}
}
/* 視圖將要顯示 */
- (void)dropDownMenuViewWillShow:(CLDropDownMenuView *)dropDownMenuView {
if (self.dropDownMenuView == dropDownMenuView) {
NSLog(@"視圖將要顯示");
}
}
/* 視圖將要消失 */
- (void)dropDownMenuViewWillDismiss:(CLDropDownMenuView *)dropDownMenuView {
if (self.dropDownMenuView == dropDownMenuView) {
NSLog(@"視圖將要消失");
}
}
/* 視圖已經顯示 */
- (void)dropDownMenuViewDidShow:(CLDropDownMenuView *)dropDownMenuView {
if (self.dropDownMenuView == dropDownMenuView) {
NSLog(@"視圖已經顯示");
}
}
//// 自定義cell樣式 需要設置_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:為了適用于更多的項目，CLDropDownMenuView提供了大量的可設置的屬性以及方法。所以你可以根據項目需要，在CLDropDownMenuView的基礎上封裝適合自己項目的菜單視圖。
Expectation【期待】
如果在使用過程中遇到BUG，希望你能Issues我，謝謝（或者嘗試下載最新的框架代碼看看BUG修復沒有）
如果在使用過程中發現功能不夠用，希望你能Issues我，我非常想為這個框架增加更多好用的功能，謝謝
