类似微信下降菜单栏的实现YHDropMenuView

最近由于公司在开发私有库组件，给我分配了这个下降菜单栏的组件，恰好现在任务完成了，有时间。就把自己写的东西，分享一下。

我把这个功能封装成了一个framework，使用的时候只要一句话就可以实现了

用法：

NSArray *titleArr = @[@"发起群聊",@"添加好友",@"扫一扫",@"收付款",@"帮助与反馈"];

//类方法调用属性只能使用默认值

[YHDropMenuView showDropMenuFrame:CGRectMake(108, 200, 120, 208) ArrowOffset:32.f TitleArr:titleArr ImageArray:nil RowHeight:40 Delegate:self ];

//初始化方法调用

YHDropMenuView *dropMenuView = [[YHDropMenuView alloc] initWithFrame:CGRectMake(100, 460, 150, 208) ArrowOffset:16.f TitleArr:titleArr ImageArray:imageArr RowHeight:40.0 Delegate:self];

dropMenuView.arrowColor = @"97d200"; //改变背景颜色

dropMenuView.titleColor = [UIColor yellowColor]; //改变字体颜色

dropMenuView.lineColor = [UIColor redColor]; //改变线条颜色

下面是主要文件的生命与实现，代码简单，逻辑清楚

YHDropMenuView.h文件

#import@protocol YHDropMenuViewDelegate

//代理方法回调

-(void) didSelectRowAtIndex:(NSInteger)index Title:(NSString *) title Image:(NSString *) image;

@end

@interface YHDropMenuView : UIView

/** * 显示下拉菜单

* frame 显示的位置以及大小

* arrowOffset 箭头的x偏移值

* titleArr 标题数组

* imageArr 如果不需要显示图片可穿空

* rowHeight 每一行的高度 * /

//通过类方法调用

-(instancetype) initWithFrame:(CGRect)frame ArrowOffset:(CGFloat)arrowOffset TitleArr:(NSArray *)titleArray ImageArray:(NSArray *)imageArray RowHeight:(CGFloat)rowHeight Delegate:(id)delegate;// 移除menuView-(void) removeYHDropMenuView; // 文字颜色默认为微信颜色

@property (nonatomic,strong) UIColor *titleColor;

// 线条颜色默认为微信颜色

@property (nonatomic, strong) UIColor *lineColor;

// 箭头x偏移值

@property (nonatomic, assign) CGFloat arrowOffset;

// 箭头的颜色 (背景颜色默认为微信颜色) (传16进制类型字符串例如:#97d216)

@property (nonatomic, copy) NSString *arrowColor;

// 代理

@property (nonatomic, weak) iddelegate;

@end

YHDropMenuView.m文件实现部分

#import "YHDropMenuView.h"

#import "YHDropMenuCell.h"

#import "YHDropMenuModel.h"

#define kWindow [UIApplication sharedApplication].windows.firstObject

#define kCellIdentifier @"cellIdentifier"

@interface YHDropMenuView()

//蒙版

@property (nonatomic, strong) UIView *cover;

// tableView

@property (nonatomic, strong) UITableView *tableView;

// 存放标题和图片数组

@property (nonatomic, strong) NSMutableArray *titleImageArrM;

// rowHeight

@property (nonatomic, assign) CGFloat rowHeight;

// rgb的可变数组

@property (nonatomic, strong) NSMutableArray *RGBStrValueArr;

@end

@implementation YHDropMenuView

//类方法加载

+(instancetype) showDropMenuFrame:(CGRect)frame ArrowOffset:(CGFloat)arrowOffset TitleArr:(NSArray *)titleArray ImageArray:(NSArray *)imageArray RowHeight:(CGFloat)rowHeight Delegate:(id)delegate{ return [[self alloc] initWithFrame:frame ArrowOffset:arrowOffset TitleArr:titleArray ImageArray:imageArray RowHeight:rowHeight Delegate:delegate]; }

//初始化方法加载

-(instancetype) initWithFrame:(CGRect)frame ArrowOffset:(CGFloat)arrowOffset TitleArr:(NSArray *)titleArray ImageArray:(NSArray *)imageArray RowHeight:(CGFloat)rowHeight Delegate:(id)delegate{

if (self = [super initWithFrame:frame]) {

//初始化frame

self.frame = frame;

_arrowOffset = arrowOffset;

_rowHeight = rowHeight;

_delegate = delegate;

//默认值

self.RGBStrValueArr = [NSMutableArray arrayWithObjects:@(54),@(54),@(54), nil];

_titleColor = [UIColor whiteColor];

_lineColor = [UIColor whiteColor];

}

for(int i = 0;i<titleArray.count;i++){

NSMutableDictionary *tempDic = [NSMutableDictionary dictionary];

if (titleArray.count != 0) {

[tempDic setObject:titleArray[i] forKey:@"title"];

}

if (imageArray.count != 0) {

[tempDic setObject:imageArray[i] forKey:@"image"];

}

YHDropMenuModel *model = [YHDropMenuModel dropMenuWithDictonary:tempDic];

[self.titleImageArrM addObject:model];

}

[kWindow addSubview:self.cover];

UITapGestureRecognizer *tapCover = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tapCoverClick)];

[self.cover addGestureRecognizer:tapCover];

self.backgroundColor = [UIColor clearColor];

[kWindow addSubview:self];

[self addSubview:self.tableView];

return self;

}

#pragma mark - UITableViewDelegate

-(NSInteger) tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{

return self.titleImageArrM.count;

}

-(UITableViewCell *) tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{

YHDropMenuCell *cell = [YHDropMenuCell dropMenuCellWithTableView:tableView];

cell.model = self.titleImageArrM[indexPath.row];

float r = [self.RGBStrValueArr[0] floatValue] / 255.0;

float g = [self.RGBStrValueArr[1] floatValue] / 255.0;

float b = [self.RGBStrValueArr[2] floatValue] / 255.0;

cell.backgroundColor = [UIColor colorWithRed:r green:g blue:b alpha:1];

cell.titleL.textColor = _titleColor;

cell.line1.backgroundColor = _lineColor;

return cell;

}

-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{

YHDropMenuModel *model = self.titleImageArrM[indexPath.row];

if ([_delegate respondsToSelector:@selector(didSelectRowAtIndex:Title:Image:)]) {

[_delegate didSelectRowAtIndex:indexPath.row Title:model.title Image:model.image];

}

[self removeYHDropMenuView];

}

-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{

return _rowHeight;

}

#pragma mark - 蒙版点击

- (void)tapCoverClick {

[self removeYHDropMenuView];

}

#pragma mark - 移除蒙版

-(void) removeYHDropMenuView{

[self.tableView removeFromSuperview];

[self.cover removeFromSuperview];

[self removeFromSuperview];

}

#pragma mark - 懒加载 Getter

- (UIView *)cover {

if (!_cover) {

_cover = [[UIView alloc] initWithFrame:kWindow.bounds];

_cover.backgroundColor = [UIColor clearColor];

}

return _cover;

}

- (UITableView *)tableView {

if (!_tableView) {

_tableView = [[UITableView alloc] initWithFrame:CGRectMake(0, 8, self.frame.size.width, self.frame.size.height - 8) style:UITableViewStylePlain];

_tableView.delegate = self;

_tableView.dataSource = self;

_tableView.tableFooterView = [UIView new];

_tableView.separatorStyle = UITableViewCellSeparatorStyleNone;

_tableView.scrollEnabled = NO;

_tableView.layer.masksToBounds = YES;

_tableView.layer.cornerRadius = 6.f;

}

return _tableView;

}

- (NSMutableArray *)titleImageArrM {

if (!_titleImageArrM) {

_titleImageArrM = [NSMutableArray array];

}

return _titleImageArrM;

}

- (NSMutableArray *)RGBStrValueArr {

if (!_RGBStrValueArr) {

_RGBStrValueArr = [NSMutableArray array];

}

return _RGBStrValueArr;

}

#pragma mark - Setter方法

//箭头允许的偏移量

- (void)setArrowOffset:(CGFloat)arrowOffset {

_arrowOffset = arrowOffset;

[self setNeedsDisplay];

}

//箭头颜色传16进制

- (void)setArrowColor:(NSString *)arrowColor {

_arrowColor = arrowColor;

self.RGBStrValueArr = [self hexStringToColor:arrowColor];

[self setNeedsDisplay];

}

//文字颜色

- (void)setTitleColor:(UIColor *)titleColor {

_titleColor = titleColor;

[self.tableView reloadData];

}

//线条颜色

- (void)setLineColor:(UIColor *)lineColor {

_lineColor = lineColor;

[self.tableView reloadData];

}

#pragma mark - 私有方法

//16进制颜色字符串转为UIColor

- (NSMutableArray *)hexStringToColor:(NSString *)stringToConvert

{

NSString *cString = [[stringToConvert stringByTrimmingCharactersInSet:[NSCharacterSet whitespaceAndNewlineCharacterSet]] uppercaseString];

if ([cString hasPrefix:@"0X"]) cString = [cString substringFromIndex:2];

if ([cString hasPrefix:@"#"]) cString = [cString substringFromIndex:1];

NSRange range;

range.location = 0;

range.length = 2;

NSString *rString = [cString substringWithRange:range];

range.location = 2;

NSString *gString = [cString substringWithRange:range];

range.location = 4;

NSString *bString = [cString substringWithRange:range];

unsigned int r, g, b;

[[NSScanner scannerWithString:rString] scanHexInt:&r];

[[NSScanner scannerWithString:gString] scanHexInt:&g];

[[NSScanner scannerWithString:bString] scanHexInt:&b];

return [NSMutableArray arrayWithObjects:@(r),@(g),@(b), nil];

}

#pragma mark - 覆盖drawRect方法，自定义绘画，画一个三角形

- (void)drawRect:(CGRect)rect{

//获取上下文

CGContextRef context = UIGraphicsGetCurrentContext();

//画三角形

CGPoint sPoint[3]; //定义三个坐标点

sPoint[0] = CGPointMake(_arrowOffset, 0); //第一个坐标

sPoint[1] = CGPointMake(_arrowOffset-8, 8); //第二个坐标

sPoint[2] = CGPointMake(_arrowOffset+8, 8); //第三个坐标

CGContextAddLines(context, sPoint, 3); //开始连线

//填充颜色

float r = [self.RGBStrValueArr[0] floatValue] / 255.0;

float g = [self.RGBStrValueArr[1] floatValue] / 255.0;

float b = [self.RGBStrValueArr[2] floatValue] / 255.0;

UIColor *stuffColor = [UIColor colorWithRed:r green:g blue:b alpha:1.0]; //颜色定义跟tableView的背景也一致

//填充的颜色

CGContextSetFillColorWithColor(context, stuffColor.CGColor);

//线的颜色

CGContextSetRGBStrokeColor(context, r, g, b, 1.0);

//封装起来

CGContextClosePath(context);

//根据坐标开始连线绘制路径

CGContextDrawPath(context, kCGPathFillStroke);

}

@end

接下来是单元格cell

YHDropMenuCell.h文件

#import#import "YHDropMenuModel.h"

@interface YHDropMenuCell : UITableViewCell

+ (instancetype)dropMenuCellWithTableView:(UITableView *)tableView;

// 数据模型

@property (nonatomic, strong) YHDropMenuModel *model;

// 图片

@property (nonatomic, strong) UIImageView *imageIV;

// 标题

@property (nonatomic, strong) UILabel *titleL;

// 线条

@property (nonatomic, strong) UIImageView *line1;

@end

YHDropMenuCell.m文件实现部分

#import "YHDropMenuCell.h"

#define kDropMenuCellID @"DropMenuCellID"

@interface YHDropMenuCell()

@property (nonatomic,assign) CGFloat screenCenter; //蒙版的中心点

@end

@implementation YHDropMenuCell

+ (instancetype) dropMenuCellWithTableView:(UITableView *)tableView{

YHDropMenuCell *cell = [tableView dequeueReusableCellWithIdentifier:kDropMenuCellID];

if (!cell) {

cell = [[YHDropMenuCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:kDropMenuCellID];

}

return cell;

}

-(instancetype) initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier{

if (self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]) {

self.imageIV = [[UIImageView alloc] init];

[self.contentView addSubview:self.imageIV];

self.titleL = [[UILabel alloc] init];

self.titleL.font = [UIFont systemFontOfSize:15.f];

[self.contentView addSubview:self.titleL];

self.line1 = [[UIImageView alloc] init];

[self.contentView addSubview:self.line1];

self.selectionStyle = UITableViewCellSelectionStyleNone;

}

return self;

}

//UI布局

-(void)layoutSubviews{

[super layoutSubviews];

self.screenCenter = self.contentView.frame.size.height * 0.5;

self.imageIV.frame = CGRectMake(10, self.screenCenter - 8, 16, 16);

if (self.model.image == nil) {

self.titleL.frame = CGRectMake(10, self.screenCenter - 10, self.frame.size.width, 20);

}else{

self.titleL.frame = CGRectMake(CGRectGetMaxX(self.imageIV.frame) + 10, self.screenCenter - 10, self.contentView.frame.size.width - 50, 20);

}

self.line1.frame = CGRectMake(0, self.contentView.frame.size.height - 0.5, self.contentView.frame.size.width, 0.5);

}

//赋值

-(void)setModel:(YHDropMenuModel *)model{

_model = model;

self.imageIV.image = [UIImage imageNamed:model.image];

self.titleL.text = model.title;

}

@end

最后model 文件

YHDropMenuModel.h

#import <Foundation/Foundation.h>

@interface YHDropMenuModel : NSObject

//图片

@property (nonatomic, copy) NSString *image;

// 文字

@property (nonatomic, copy) NSString *title;

- (instancetype)initWithDictonary:(NSDictionary *)dict;

+ (instancetype)dropMenuWithDictonary:(NSDictionary *)dict;

@end

YHDropMenuModel.m 实现

#import "YHDropMenuModel.h"

@implementation YHDropMenuModel

- (instancetype)initWithDictonary:(NSDictionary *)dict {

if (self = [super init]) {

[self setValuesForKeysWithDictionary:dict];

}

return self;

}

+ (instancetype)dropMenuWithDictonary:(NSDictionary *)dict {

return [[self alloc] initWithDictonary:dict];

}

@end

到这里，下降菜单栏的功能就全部实现了

最后编辑于：2022.08.22 09:41:55

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 194,524评论 5赞 460
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 81,869评论 2赞 371
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 141,813评论 0赞 320
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 52,210评论 1赞 263
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 61,085评论 4赞 355
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 46,117评论 1赞 272
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 36,533评论 3赞 381
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 35,219评论 0赞 253
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 39,487评论 1赞 290
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 34,582评论 2赞 309
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 36,362评论 1赞 326
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 32,218评论 3赞 312
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 37,589评论 3赞 299
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 28,899评论 0赞 17
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 30,176评论 1赞 250
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 41,503评论 2赞 341
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 40,707评论 2赞 335

类似微信下降菜单栏的实现YHDropMenuView

推荐阅读更多精彩内容