开发过程中底部弹窗视图在很多处会被用到，所以今天写一个简易的底部弹窗视图
底部弹出视图
1.先分析都有哪些控件
底部蒙层 maskView（UIView），弹出视图部分：由里到外分别是：scrollview(可向下滑动关闭)->contentView(UIView用来盛放里面所有视图的容器)->tableview（容器里面的控件）
2.先上自定义view实现的代码(使用mansory布局)
#define SCREEN_WIDTH [[UIScreen mainScreen] bounds].size.width
#define SCREEN_HEIGHT [[UIScreen mainScreen] bounds].size.height
#define scrollHeight 500
#import
@interface ZKMyView()
@property (nonatomic,strong)UIView *maskView;
@property (nonatomic,strong)UIScrollView *scrollView;
@property (nonatomic,strong)UIView *contentViews;
@property (nonatomic,strong)UIView *topSlideView;
@property (nonatomic,strong)UILabel *titleLabel;
@property (nonatomic,strong)UITableView *tableView;
@end
@implementation ZKMyView
- (instancetype)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
self.backgroundColor = [UIColor clearColor];
[self createUI];
}
return self;
}
- (void)drawRect:(CGRect)rect
{
[self setNeedsUpdateConstraints];
[UIView animateWithDuration:0.4 animations:^{
[self.scrollView mas_updateConstraints:^(MASConstraintMaker *make) {
make.bottom.equalTo(self).with.offset(0);
}];
self.maskView.alpha = 1;
[self layoutIfNeeded];
}];
}
-(void)createUI{
self.maskView = [[UIView alloc]init];
self.maskView.alpha = 0;
self.maskView.userInteractionEnabled = YES;
UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(clickToHide)];
[self.maskView addGestureRecognizer:tap];
[self addSubview:self.maskView];
[self.maskView mas_makeConstraints:^(MASConstraintMaker *make) {
make.edges.equalTo(self);
}];
UIBlurEffect * blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleDark];
UIVisualEffectView * effectView = [[UIVisualEffectView alloc]initWithEffect:blurEffect];
effectView.userInteractionEnabled = NO;
effectView.alpha = 0.6;
[self.maskView addSubview:effectView];
[effectView mas_makeConstraints:^(MASConstraintMaker *make) {
make.edges.equalTo(self.maskView);
}];
self.scrollView = ({
UIScrollView *scrollView = [[UIScrollView alloc]init];
scrollView.delegate = self;
scrollView.backgroundColor = [UIColor clearColor];
scrollView.showsVerticalScrollIndicator = NO;
scrollView.layer.cornerRadius = 10;
scrollView.alwaysBounceVertical = NO;
scrollView;
});
[self addSubview:self.scrollView];
[self.scrollView mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.right .equalTo(self);
make.height.mas_equalTo(scrollHeight);
make.bottom.equalTo(self).offset(scrollHeight);
}];
self.contentViews = ({
UIView *aView = [[UIView alloc] init];
aView.backgroundColor = [UIColor whiteColor];
aView;
});
[self.scrollView addSubview:self.contentViews];
[self.contentViews mas_makeConstraints:^(MASConstraintMaker *make) {
make.edges.mas_equalTo(0);
make.width.equalTo(self.scrollView);
make.height.mas_equalTo(scrollHeight);
}];
self.topSlideView = ({
UIView *aView = [[UIView alloc] init];
aView.backgroundColor = [UIColor colorWithWhite:0 alpha:0.2];
aView.layer.cornerRadius = 2.5;
aView.layer.masksToBounds = true;
aView;
});
[self.contentViews addSubview:self.topSlideView];
[self.topSlideView mas_makeConstraints:^(MASConstraintMaker *make) {
make.centerX.mas_equalTo(0);
make.top.mas_equalTo(15);
make.width.mas_equalTo(36);
make.height.mas_equalTo(5);
}];
self.titleLabel = ({
UILabel *label = [[UILabel alloc]init];
label.text = @"hello";
label;
});
[self.contentViews addSubview:self.titleLabel];
[self.titleLabel mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(self.contentViews).offset(32 );
make.left.equalTo(self.contentViews).offset(16 );
make.right.equalTo(self.contentViews).offset(-58 );
make.height.mas_equalTo(24);
}];
self.tableView = ({
UITableView *tableView = [[UITableView alloc]initWithFrame:CGRectZero style:UITableViewStyleGrouped];
tableView.dataSource = self;
tableView.delegate = self;
tableView.showsVerticalScrollIndicator = NO;
tableView.editing = YES;
tableView.backgroundColor = [UIColor whiteColor];
tableView.separatorStyle = UITableViewCellSeparatorStyleNone;
tableView;
});
[self.contentViews addSubview:self.tableView];
[self.tableView mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.right.equalTo(self.contentViews);
make.top.equalTo(self.topSlideView.mas_bottom);
make.bottom.equalTo(self.contentViews.mas_bottom);
}];
}
//点击背景（蒙版）隐藏（视图）
-(void)clickToHide{
[UIView animateWithDuration:0.4 animations:^{
[self.scrollView mas_updateConstraints:^(MASConstraintMaker *make) {
make.bottom.equalTo(self.mas_bottom).offset(500);
}];
}];
[UIView animateWithDuration:0.3 animations:^{
self.maskView.alpha = 0;
[self layoutIfNeeded];
} completion:^(BOOL finished) {
[self removeFromSuperview];
}];
}
tableviewDataSource
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
return 50;
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *cellID = @"cellID";
UITableViewCell * cell = [tableView dequeueReusableCellWithIdentifier:cellID];
if (!cell) {
cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellID];
}
cell.textLabel.text = [NSString stringWithFormat:@"%ld",indexPath.row];
return cell;
}
实现scrollview代理
//此处是scrollview不允许向上滑动
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
if ([scrollView isEqual:self.scrollView]) {
if (scrollView.contentOffset.y > 0) {
scrollView.contentOffset = CGPointMake(0, 0);
}
}else{
if (scrollView.contentOffset.y <= 0) {
scrollView.contentOffset = CGPointMake(0, 0);
self.scrollView.alwaysBounceVertical = true;
}else{
self.scrollView.alwaysBounceVertical = false;
// self.topLineView.hidden = NO;
}
}
}
//此处是scrollview向下滑动超过80则关闭视图
- (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset{
if (scrollView.contentOffset.y <= -80) {
[self clickToHide];
}
}
@end
使用：在要用到的地方
self.zkView = [[ZKMyView alloc]initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT)];
[self.view addSubview:self.zkView];