您的位置:首页 > 移动开发 > IOS开发

ios 底部弹出框菜单

2015-10-15 14:28 567 查看
在IOS开发中,经常用到底部菜单,这是一个简单的底部弹出菜单的实现

代码如下:

头文件(.h)

#import <UIKit/UIKit.h>

@interface ShareMenuView : UIView
{
UIButton *_backView;
}

- (void)show;
- (void)hide;

@property(nonatomic,copy)void (^ shareButtonClickBlock)(NSInteger index);

@end


_backView 是菜单弹出时的半透明背景,点击背景菜单消失,show和hide方法是菜单弹出和菜单消失的方法,shareButtonClickBlock是菜单中按钮点击的响应,其中用index来区分菜单中的按钮,也可用代理实现。

类文件(.m)

#import "ShareMenuView.h"

#define AnimateDuration     0.4

@implementation ShareMenuView

- (instancetype)init{

self = [super init];
if (self) {
[self setup];
}
return self;
}

- (void)setup{

//弹出菜单,添加半透明背景
_backView = [UIButton buttonWithType:UIButtonTypeCustom];
_backView.frame = CGRectMake(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
_backView.alpha = 0.3;
_backView.backgroundColor = [UIColor blackColor];
[_backView addTarget:self action:@selector(backViewClicked:) forControlEvents:UIControlEventTouchUpInside];

self.frame = CGRectMake(0, SCREEN_HEIGHT, SCREEN_WIDTH, ShareMenuHeight);
self.backgroundColor = [UIColor whiteColor];
[[[UIApplication sharedApplication] keyWindow] addSubview:self];

NSMutableArray *shareTitleArray = [[NSMutableArray alloc]initWithObjects:@"QQ",@"QQ空间",@"微信",@"朋友圈",@"复制链接", nil];
NSMutableArray *shareIconArray = [[NSMutableArray alloc]initWithObjects:@"news_control_center_qq",@"news_control_center_zone",@"news_control_center_wechat",@"news_control_center_wechatQ",@"news_control_center_link", nil];

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

UIButton *itemView = [UIButton buttonWithType:UIButtonTypeCustom];
itemView.backgroundColor = [UIColor clearColor];
itemView.tag = i;
[itemView addTarget:self action:@selector(share:) forControlEvents:UIControlEventTouchUpInside];
[self addSubview:itemView];

//图标
UIImageView *icon = [[UIImageView alloc]init];
icon.backgroundColor = [UIColor clearColor];
icon.image = [UIImage imageNamed:shareIconArray[i]];
[itemView addSubview:icon];

//标题
UILabel *title = [[UILabel alloc]init];
title.font = [UIFont systemFontOfSize:13.0f];
title.backgroundColor = [UIColor clearColor];
[title sizeToFit];
title.text = shareTitleArray[i];
[itemView addSubview:title];

[itemView mas_makeConstraints:^(MASConstraintMaker *make) {
make.height.equalTo(@70);
make.width.equalTo(@(SCREEN_WIDTH*1/4));
make.left.equalTo(self.mas_left).offset((SCREEN_WIDTH*(i%4)/4));
make.top.equalTo(self.mas_top).offset(70*(i/4));
//            if (i == shareIconArray.count - 1) {
//                make.bottom.equalTo(self.mas_bottom).offset(-10);
//            }
}];

[icon mas_makeConstraints:^(MASConstraintMaker *make) {
make.height.width.equalTo(@40);
make.top.equalTo(itemView.mas_top).offset(10);
make.centerX.equalTo(itemView.mas_centerX);
}];

[title mas_makeConstraints:^(MASConstraintMaker *make) {
make.centerX.equalTo(itemView.mas_centerX);
make.top.equalTo(icon.mas_bottom).offset(5);
make.bottom.equalTo(itemView.mas_bottom);
}];

}
}

- (void)backViewClicked:(id)sender{
[self hide];
}

- (void)show{

[[[UIApplication sharedApplication] keyWindow] addSubview:_backView];
[[[UIApplication sharedApplication] keyWindow] insertSubview:self aboveSubview:_backView];

[UIView animateWithDuration:AnimateDuration animations:^{

self.frame = CGRectMake(0, SCREEN_HEIGHT - ShareMenuHeight, SCREEN_WIDTH, ShareMenuHeight);

} completion:^(BOOL finished) {

}];

}

- (void)hide{

[_backView removeFromSuperview];

[UIView animateWithDuration:AnimateDuration animations:^{

self.frame = CGRectMake(0, SCREEN_HEIGHT, SCREEN_WIDTH, ShareMenuHeight);

} completion:^(BOOL finished) {

}];

}

- (void)share:(id)sender{
UIButton *button = (UIButton *)sender;
if (self.shareButtonClickBlock) {
self.shareButtonClickBlock(button.tag);
}
}

/*
// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect {
// Drawing code
}
*/

@end


这里面用到了一个第三方自动布局的框架(名称Masonry,点击可下载),代码很简单,如果高见,欢迎批评指正。

效果如下:

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: