iOS自定义从底部弹上来的View

在一些少数据没必要跳转下个界面,我们的产品大大就设计了在当前界面的底部弹上来一个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; 点击一下遮罩或界面上关闭按钮，页面会自动下去（从上向下）

效果图如下: