iOS自定义从底部弹上来的View
概述
详细
代码下载:http://www.demodashi.com/demo/10724.html
在一些少数据没必要跳转下个界面,我们的产品大大就设计了在当前界面的底部弹上来一个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.3fanimations:^{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大师(http://www.demodashi.com)宣传,拒绝转载,转载需要作者授权
iOS自定义从底部弹上来的View相关推荐
- android 仿ios 底部弹出,项目需求讨论-仿ios底部弹框实现及分析
hi,在项目开发中,有时候需要仿照ios的底部弹框做效果,比如我们在iPhone上面关闭定位的时候,就会弹出ios特有的底部弹框: 屏幕快照 2017-10-09 08.20.30 PM.png 弹框 ...
- Android之底部弹框
文章链接: Android之底部弹窗 知识点: 1.dialog的简单使用: 2.自定义底部弹框: 3.新名词记录 { 5.0 转场动画 } 底部弹框:就是从手机屏幕底边位置弹出来,最常见的就是弹框里 ...
- jquery底部弹出菜单_带有jQuery的新鲜底部滑出菜单
jquery底部弹出菜单 View demo 查看演示Download Source 下载源 In this tutorial we will create a unique bottom slide ...
- 【uniapp】实现小程序底部弹框带动画以及隐藏底部栏tab
代码如下:[暂且还没优化,点击后会有点闪烁的bug,有点影响效果] <template><view><view @tap="clickme">点 ...
- Android仿IOS封装通用的弹出框Dialog和底部弹出列表选择框 仿美团顶部条件筛选框 附自定义ViewGroup
弹出框 背景 提示与询问弹出框 实现 使用 列表选择框 实现 使用 顶部条件筛选框 实现 自定义ViewGroup 使用 总结 背景 鉴于Android提供的默认弹出框很一般,IOS的弹出框样式还不错 ...
- ios点击大头针气泡不弹出_百度地图使用(二)自定义大头针和弹出气泡
百度地图使用(二)自定义大头针和弹出气泡 (2014-08-19 10:37:09) 标签: 时尚 分类: IOS http://www.aichengxu.com/article/系统优化/1149 ...
- android的底部弹出框炫酷的样式,Android自定义底部弹出框ButtomDialog
本文实例为大家分享了Android自定义底部弹出框的具体代码,供大家参考,具体内容如下 先看看效果和你要的是否一样 一 .先来配置自定义控件需要的资源 1.在res文件夹下创建一个anim文件夹并创建 ...
- Android自定义底部弹出窗-dialog(2种实现分析+源码)
Android自定义底部弹出窗-dialog(2种实现分析+源码) 上线项目功能抽取,在项目开发中,我们会在许多地方会用到底部自定义弹窗,比如设置:个人账户退出,切换,照片的拍照或者相册的调出,或者一 ...
- iOS项目中一定会用到的两种常用的弹框 从底部弹出 、中间弹出 Swift代码
从底部弹出的弹框 ,样式如下 1.利用CocoaPods导入HWPanModal 框架,在桥接文件中导入头文件 #import "HWPanModal.h" 2.创建一个新的控制器 ...
最新文章
- php 获取鼠标的坐标,如何实时获取鼠标的当前坐标-
- C语言函数strcmp()(比较两个字符串)
- Seurat的单细胞免疫组库分析来了!
- 三星Galaxy S10系列外观配置爆料:多种颜色可选
- 转化关系模型外键_网站数据分析:流量运营分析模型拯救你的广告流量
- Java关键字transient和volatile小结(转)
- C# DataTable常用方法总结
- [NOIP2011] 计算系数(二项式定理)
- android顶部标题app_name,如何写一个app通用的title
- 矩阵的运算和矩阵的秩
- 测试 - 用例篇 - 细节狂魔
- 关于原理图库和封装库设计(三)
- axios请求失败,如何获取接口返回的状态码及错误信息
- 抢票助手-for 12306买火车票.订票助手.高铁.动车.春运.车票管家.自动刷票.列车时刻表
- flv视频播放demo
- 使用EFI安装win7-64位,在不能使用U盘的情况下
- H5音乐播放器我的2.0
- linux系统微内核,微内核操作系统的定义及用微内核设计的系统,附Linux是单内核结构介绍...
- 大家小心了,做寄生虫排名骗子
- hdu 5145 NPY and girls (莫队算法)
热门文章
- python经典程序实例_Python入门经典实例(一)
- Python 入门级1
- Keil(MDK-ARM-STM32)介绍、下载、安装与注册
- STM32 RCC时钟配置
- ldap radius mysql_OpenLDAP+FreeRADIUS+MySQL+RP-PPPOE 构建PPPOE服务器
- 【JAVA SE】第八章 异常处理与抽象类
- 微信小程序|开发实战篇之七-steps进度条组件
- oracle中distinct和group by的区别
- 【转】java基础知识总结
- maven项目部署到Repository(Nexus)