在一些少数据没必要跳转下个界面,我们的产品大大就设计了在当前界面的底部弹上来一个View!
基本思路:
一.首先封装这个自定义蒙层弹起View: XHHTuanNumView
#import "XHHTuanNumView.h"
#define UI_navBar_Height 64.0;
@interface XHHTuanNumView()
{
UIView *_contentView;
}
@end
@implementation XHHTuanNumView
- (id)initWithFrame:(CGRect)frame {
if (self == [super initWithFrame:frame]) {
[self setupContent];
}
return self;
}
- (void)setupContent {
self.frame = CGRectMake(0, 0, UI_View_Width, XHHTuanNumViewHight);
//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) {
CGFloat margin = 15;
_contentView = [[UIView alloc]initWithFrame:CGRectMake(0, UI_View_Height - XHHTuanNumViewHight, UI_View_Width, XHHTuanNumViewHight)];
_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, XHHTuanNumViewHight)];
[UIView animateWithDuration:0.3 animations:^{
self.alpha = 1.0;
[_contentView setFrame:CGRectMake(0, UI_View_Height - XHHTuanNumViewHight - UI_navBar_Height, UI_View_Width, XHHTuanNumViewHight)];
} completion:nil];
}
//移除从上向底部弹下去的UIView（包含遮罩）
- (void)disMissView {
[_contentView setFrame:CGRectMake(0, UI_View_Height - XHHTuanNumViewHight, UI_View_Width, XHHTuanNumViewHight)];
[UIView animateWithDuration:0.3f
animations:^{
self.alpha = 0.0;
[_contentView setFrame:CGRectMake(0, UI_View_Height, UI_View_Width, XHHTuanNumViewHight)];
}
completion:^(BOOL finished){
[self removeFromSuperview];
[_contentView removeFromSuperview];
}];
}
@end
.h 文件里露出方法
#import <UIKit/UIKit.h>
#define XHHTuanNumViewHight 350.0
@interface XHHTuanNumView : UIView
//展示从底部向上弹出的UIView（包含遮罩）
- (void)showInView:(UIView *)view;
@end
现在的效果图:
二.在XHHTuanNumView里添加你需要的视图 View, 这里以我的 tableView 为例
.h里露出
@property (strong, nonatomic) XHHOrderModel *model;
<UITableViewDelegate, UITableViewDataSource>
// 自定义XHHTuanNumView
UITableView *detailTableView = [[UITableView alloc] init];
detailTableView.backgroundColor = [UIColor clearColor];
[_contentView addSubview:detailTableView];
detailTableView.delegate = self;
detailTableView.dataSource = self;
self.detailTableView = detailTableView;
self.detailTableView.frame = CGRectMake(0, CGRectGetMaxY(partner.frame), UI_View_Width, XHHTuanNumViewHight - tuan.height - partner.height - 50);
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
return 1;
}
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
return self.tuanModel.mobileArr.count;
}
- (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.selectionStyle = UITableViewCellSelectionStyleNone;
cell.backgroundColor = [UIColor clearColor];
// 手机号 加密截取中间四位替换****
cell.textLabel.text = [self.tuanModel.mobileArr[indexPath.row] stringByReplacingCharactersInRange:NSMakeRange(3, 4) withString:@"****"];
cell.detailTextLabel.text = @"已购";
return cell;
}
三.使用代理和模型传值
1.在当前ViewController中的所需按钮，添加点击事件
[testBtn addTarget:self action:@selector(testBtnClicked) forControlEvents:UIControlEventTouchUpInside];
2.添加点击事件则为创建当前弹起View
// 团购人数详情展开view
@property (nonatomic, strong) XHHTuanNumView *tuanNumView;
- (void) testBtnClicked {
_tuanNumView = [[XHHTuanNumView alloc]init];
_tuanNumView.tuanModel = self.orderModel;
[_tuanNumView showInView:self.view];
}
3.我这里使用假数据,正常情况则是请求数据或者上个界面的数据用 Model 传过来
- (void)viewDidLoad {
[super viewDidLoad];
# TODO:测试假数据
NSArray *jsonArr = @[
@{
@"orderNo" : @"1234567890",
@"consignee" : @"张smile",
@"city" : @"北京市大兴区西红门",
@"address" : @"某某街道",
@"mobile" : @"18611111952", // 测试号
@"name" : @"玉米",
@"number" : @"2",
@"price" : @"1000",
@"freight" : @"200",
@"realAmt" : @"2200",
@"orderTime" : @"1234567890",
@"isFreight" : @"2",
@"isTuan" : @"1",
@"tuanNum": @"6",
@"mobileArr" : @[@"18611110000", @"18611111111", @"18611112222", @"18611113333", @"18611114444", @"18611115555"],
},
];
NSArray *orderArr = [XHHOrderModel loadOrderInfoFromJson:jsonArr];
self.orderModel = orderArr[0];
}
4.加载从底部向上弹起的UIView; 点击一下遮罩或界面上关闭按钮，页面会自动下去（从上向下）
效果图如下:
