CLDropDownMenuView 高度可定制的下拉菜单

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我,我非常想为这个框架增加更多好用的功能,谢谢

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,080评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,422评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,630评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,554评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,662评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,856评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,014评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,752评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,212评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,541评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,687评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,347评论 4 331
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,973评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,777评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,006评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,406评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,576评论 2 349

推荐阅读更多精彩内容

  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明先生_X自主阅读 15,969评论 3 119
  • 社会发展到一定阶段出现了分工,每个成员在团队里各自贡献技能,一起实现团队目标。互联网技术的出现,使得通过设计开发互...
    邹志楠阅读 12,701评论 12 31
  • 【我走了,你自己要乖乖的,要照顾好自己,要听潘姐和蔡姐的话。】此刻的kimi正站在机场大厅里对璐璐说道。 【好的你...
    石思琳阅读 409评论 0 5