iOS自定义从底部弹上来的View
ios 自定义 View 底部
2023-09-11 14:18:03 时间
概述
自定义蒙层弹起View,点击一下遮罩或界面上关闭按钮,页面会自动下去(从上向下)
详细
在一些少数据没必要跳转下个界面,我们的产品大大就设计了在当前界面的底部弹上来一个View!
看下项目里截图:
一、主要思路
1、首先封装这个自定义蒙层弹起View: ZLBounceView
2、在ZLTuanNumView里添加你需要的视图 View
3、使用代理和模型传值
二、程序实现
Step1. 首先封装这个自定义蒙层弹起View: ZLBounceView
设置界面相关:
- (void)setupContent { self.frame = CGRectMake(0, 0, UI_View_Width, ZLBounceViewHight); //alpha 0.0 白色 alpha 1 :黑色 alpha 0~1 :遮罩颜色,逐渐 self.backgroundColor = [UIColor colorWithRed:0 green:0 blue:0 alpha:0.4]; self.userInteractionEnabled = YES; [self addGestureRecognizer:[[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(disMissView)]]; if (_contentView == nil) { _contentView = [[UIView alloc]initWithFrame:CGRectMake(0, UI_View_Height - ZLTuanNumViewHight, UI_View_Width, ZLBounceViewHight)]; _contentView.backgroundColor = [UIColor whiteColor]; [self addSubview:_contentView]; // 右上角关闭按钮 UIButton *closeBtn = [UIButton buttonWithType:UIButtonTypeCustom]; closeBtn.frame = CGRectMake(_contentView.width - 20 - 15, 15, 20, 20); [closeBtn setImage:[UIImage imageNamed:@"guanbi"] forState:UIControlStateNormal]; [closeBtn addTarget:self action:@selector(disMissView) forControlEvents:UIControlEventTouchUpInside]; [_contentView addSubview:closeBtn]; } }
展示从底部向上弹出的UIView(包含遮罩):
- (void)showInView:(UIView *)view { if (!view) { return; } [view addSubview:self]; [view addSubview:_contentView]; [_contentView setFrame:CGRectMake(0, UI_View_Height, UI_View_Width, ZLBounceViewHight)]; [UIView animateWithDuration:0.3 animations:^{ self.alpha = 1.0; [_contentView setFrame:CGRectMake(0, UI_View_Height - ZLBounceViewHight, UI_View_Width, ZLBounceViewHight)]; } completion:nil]; }
移除从上向底部弹下去的UIView(包含遮罩):
- (void)disMissView { [_contentView setFrame:CGRectMake(0, UI_View_Height - ZLBounceViewHight, UI_View_Width, ZLBounceViewHight)]; [UIView animateWithDuration:0.3f animations:^{ self.alpha = 0.0; [_contentView setFrame:CGRectMake(0, UI_View_Height, UI_View_Width, ZLBounceViewHight)]; } completion:^(BOOL finished){ [self removeFromSuperview]; [_contentView removeFromSuperview]; }]; }
.h 文件里露出方法:
//展示从底部向上弹出的UIView(包含遮罩) - (void)showInView:(UIView *)view;
现在的效果图:
Step2. 在ZLBounceView里添加你需要的视图 View, 这里以我的 tableView 为例
<UITableViewDelegate, UITableViewDataSource>
自定义ZLBounceView:
UITableView *detailTableView = [[UITableView alloc] init]; detailTableView.backgroundColor = [UIColor clearColor]; detailTableView.frame = CGRectMake(0, CGRectGetMaxY(partner.frame), UI_View_Width, ZLBounceViewHight - tuan.frame.size.height - partner.frame.size.height - 50 - 20); [_contentView addSubview:detailTableView]; detailTableView.delegate = self; detailTableView.dataSource = self; self.detailTableView = detailTableView; self.detailTableView.separatorStyle = UITableViewCellSeparatorStyleNone;
UITableViewDelegate: 这里用假数据测试
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { static NSString *ID = @"cell"; UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:ID]; if (cell == nil) { cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleValue1 reuseIdentifier:ID]; cell.backgroundColor = [UIColor clearColor]; cell.textLabel.font = [UIFont systemFontOfSize:13]; cell.textLabel.textColor = ZLColor(102, 102, 102); cell.detailTextLabel.font = [UIFont systemFontOfSize:13]; cell.detailTextLabel.textColor = ZLColor(102, 102, 102); } cell.selectionStyle = UITableViewCellSelectionStyleNone; // 假数据 cell.textLabel.text = [NSString stringWithFormat:@"%ld", (long)indexPath.row]; cell.detailTextLabel.text = @"已购"; self.total.text = [NSString stringWithFormat:@"总计:%@吨", @"100"]; return cell; }
Step3. 使用代理和模型传值
3.1 在当前ViewController中的所需按钮,添加点击事件
[testBtn addTarget:self action:@selector(testBtnClicked) forControlEvents:UIControlEventTouchUpInside];
3.2 添加点击事件则为创建当前弹起View
// 详情展开view @property (nonatomic, strong) ZLBounceView *tuanNumView;
- (void)testBtnClicked { _tuanNumView = [[ZLBounceView alloc]init]; [_tuanNumView showInView:self.view]; }
3.3 我这里使用假数据,正常情况则是请求数据或者上个界面的数据用 Model 传过来
_tuanNumView.tuanModel = self.orderModel;
Step4. 加载从底部向上弹起的UIView; 点击一下遮罩或界面上关闭按钮,页面会自动下去(从上向下)
运行效果图如下:
三、其他补充
压缩文件截图:
目前是项目中直接操作, 界面性问题可以根据自己项目需求调整即可, 具体可参考代码, 项目能够直接运行!
注:本文著作权归作者,由demo大师发表,拒绝转载,转载需要作者授权
相关文章
- iOS拍的图片上传到服务器(阿里云)旋转
- iOS自定义转场动画实战讲解
- iOS开发之窥探UICollectionViewController(四) --一款功能强大的自定义瀑布流
- iOS开发之窥探UICollectionViewController(三) --使用UICollectionView自定义瀑布流
- iOS开发之SQLite--C语言接口规范(四) —— Result Values From A Query
- iOS开发之自定义表情键盘(组件封装与自动布局)
- IOS之UI--自定义按钮实现代理监听点击事件
- iOS中block类型大全
- iOS 自定义步骤进度条
- iOS基础面试题一
- uni-app:ios/android中的nvue和vue页面加载自定义字体(hbuilderx 3.7.3)
- 【转】【UNITY3D 游戏开发之十】关于IL2CPP(支持IOS-64BIT)的深入讲解以及UNITY优化方面的几篇文章
- iOS中 图文混排/自定义图文混排
- iOS中 自定义cell升级版 (高级)
- iOS开发那些事--iOS视图生命周期与视图控制器关系
- iOS swift5 改变UILabel上指定文字的颜色和字体
- ios swift 纯代码自定义view(控件) XYswitchView
- iOS 适配刘海屏 刘海 状态栏 底部安全距离
- ios swift 长按手势
- iOS swift5 UISlider 自定义UISlider 修改滑块和滑条的大小
- iOS swift5 自定义导航栏
- iOS 改变xib视图的大小
- iOS 循环引用
- iOS KVC
- iOS swift 自定义16进制键盘 九宫格 button和collectionView
- iOS swift extensions
- iOS程序,在main函数之前发生了什么
- iOS开发-使用storyboard实现UILabel的自适应高度(iOS8)
- Appium - Android 对照 iOS
- ios 自己定义导航栏和切割线
- iOS配置Dot和Doh