1. 程式人生 > >iOS開發之自定義ActionSheet檢視

iOS開發之自定義ActionSheet檢視

有時我們需要用到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];
效果圖: