iOS開發之自訂ActionSheet視圖__iOS

有時我們需要用到actionSheet來展示，但是但是往往系統的介面顯示很醜或者並不符合UI的要求，所以在這裡自訂一個，方便以後使用，後續有時間寫一下Swift的開發。

自訂ActionSheet的關鍵點，就是UI的樣式修改和設計調整，還有就是點擊儲存格時進行的後續操作，再一個就是介面顯示的平滑度。

首先介面設計：

建立一個半透明的背景視圖；

然後一個表格，表格分成兩個區，設定標題頭、區尾和儲存格邊角

//背景- (UIView*)maskView {    if (!_maskView) {        _maskView = [[UIView alloc]initWithFrame:[UIScreen mainScreen].bounds];        _maskView.backgroundColor = [UIColor blackColor];        _maskView.alpha = 0.5;        _maskView.userInteractionEnabled = YES;    }    return _maskView;}//表格- (UITableView *)tableView {    if (!_tableView) {        _tableView = [[UITableView alloc]initWithFrame:CGRectZero style:UITableViewStylePlain];        _tableView.delegate = self;        _tableView.dataSource = self;        _tableView.layer.cornerRadius = 10;        _tableView.clipsToBounds = YES;        _tableView.rowHeight = 44.0;        _tableView.bounces = NO;        _tableView.backgroundColor = [UIColor clearColor];        _tableView.tableHeaderView = self.headView;        _tableView.separatorInset = UIEdgeInsetsMake(0, -50, 0, 0);        [_tableView registerClass:[UITableViewCell class] forCellReuseIdentifier:@"OneCell"];    }    return _tableView;}#pragma mark <UITableViewDelegate,UITableViewDataSource>- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {    return 2;}- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {    return (section == 0)?_cellArray.count:1;}- (UITableViewCell*)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"OneCell"];    if (indexPath.section == 0) {        cell.textLabel.text = _cellArray[indexPath.row];        if (indexPath.row == _cellArray.count - 1) {                        //添加貝茲路徑，UIBezierPath與CAShapeLayer設計邊角樣式            /*             byRoundingCorners即為設定所需處理邊角參數,有如下枚舉克進行選擇：             typedef NS_OPTIONS(NSUInteger, UIRectCorner) {             UIRectCornerTopLeft     = 1 << 0,//左上圓角             UIRectCornerTopRight    = 1 << 1,//右上圓角             UIRectCornerBottomLeft  = 1 << 2,//左下圓角             UIRectCornerBottomRight = 1 << 3,//右下圓角             UIRectCornerAllCorners  = ~0UL   //四角圓角             };             */            UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, Screen_Width - (Space_Line * 2), tableView.rowHeight) byRoundingCorners:UIRectCornerBottomLeft|UIRectCornerBottomRight cornerRadii:CGSizeMake(10, 10)];            CAShapeLayer *maskLayer = [[CAShapeLayer alloc]init];            maskLayer.frame = cell.contentView.bounds;            maskLayer.path = maskPath.CGPath;            cell.layer.mask = maskLayer;        }    } else {        cell.textLabel.text = _cancelTitle;        cell.layer.cornerRadius = 10;    }    cell.textLabel.textAlignment = NSTextAlignmentCenter;    cell.selectionStyle = UITableViewCellSelectionStyleNone;    return cell;}- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {    if (indexPath.section == 0) {        if (self.selectedBlock) {            self.selectedBlock(indexPath.row);        }    } else {        if (self.cancelBlock) {            self.cancelBlock();        }    }    [self dismiss];}- (CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section {    return Space_Line;}- (UIView*)tableView:(UITableView *)tableView viewForFooterInSection:(NSInteger)section {    UIView *footerView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, tableView.bounds.size.width, Space_Line)];    footerView.backgroundColor = [UIColor clearColor];    return footerView;}

介面設計完成，需要考慮的就是彈出、消失的問題

/滑動彈出- (void)show {    _tableView.frame = CGRectMake(Space_Line, Screen_Height, Screen_Width - (Space_Line * 2), _tableView.rowHeight * (_cellArray.count + 1) + _headView.bounds.size.height + (Space_Line * 2));    [UIView animateWithDuration:.5 animations:^{        CGRect rect = _tableView.frame;        rect.origin.y -= _tableView.bounds.size.height;        _tableView.frame = rect;    }];}//滑動消失- (void)dismiss {    [UIView animateWithDuration:.5 animations:^{        CGRect rect = _tableView.frame;        rect.origin.y += _tableView.bounds.size.height;        _tableView.frame = rect;    } completion:^(BOOL finished) {        [self removeFromSuperview];    }];}#pragma mark ------ 觸控螢幕幕其他位置彈下- (void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {    [self dismiss];}

最後是對自訂的視圖的調用：

//彈出ActionSheet    __weak typeof(self) weakSelf = self;    JasonActionSheetView *jasonSheetView = [[JasonActionSheetView alloc]initWithHeadView:self.headView cellArray:self.dataArr cancelTitle:@"取消" selectedBlock:^(NSInteger index) {        //點擊儲存格後續操作        if (index == 0) {            weakSelf.view.backgroundColor = [UIColor redColor];        }else if(index == 1){            weakSelf.view.backgroundColor = [UIColor yellowColor];        }else{            weakSelf.view.backgroundColor = [UIColor lightGrayColor];        }    } cancelBlock:^{        NSLog(@"點擊了取消........");    }];        [self.view addSubview:jasonSheetView];

效果圖：

源碼：https://github.com/hbblzjy/OC-JasonActionSheet