高仿苹果(UIActionSheetView)弹窗带动画(3)

2017-09-04 本文已影响34人硅谷干货

因为项目需求，自定义弹出视图的基础上加一些用户体验更佳的动画和友情文字以及图片提示等，就有了写了这篇博客，一为方便自己以后在其他项目中复用二为更多开发者拷贝使用，若有书写代码不足之处欢迎批评指正。

先看下我的Demo示例运行效果图如下：

弹窗动态效果图.gif

实现文件只有两个类：（QDActionSheetView 和 QDActionSheetCell）

1. QDActionSheetView.h头文件代码如下：

#import <UIKit/UIKit.h>

@interface QDActionSheetView : UIView

//设置遮罩蒙板响应事件是否关闭
@property (nonatomic, assign) BOOL closeUserInteractionEnabled;

+ (instancetype)alertWithFrame:(CGRect)frame titles:(NSArray *)titles tapBlock:(void (^)(NSInteger index))tapBlock;

- (void)alert;

@end

2. QDActionSheetView.m实现文件代码如下：

#import "QDActionSheetView.h"
#import "QDActionSheetCell.h"

@interface QDActionSheetView ()<UITableViewDelegate,UITableViewDataSource>
@property (nonatomic, weak) UIView *bgView;
@property (nonatomic, weak) UITableView *tableView;
@property (nonatomic, copy) NSArray *titles;
@property (nonatomic, copy) void(^tapBlock)(NSInteger index);
@end

@implementation QDActionSheetView

+ (instancetype)alertWithFrame:(CGRect)frame titles:(NSArray *)titles tapBlock:(void (^)(NSInteger))tapBlock{
    QDActionSheetView *sheetView = [[self alloc] initWithFrame:frame];
    sheetView.tapBlock = tapBlock;
    sheetView.titles = titles;
    return sheetView;
}

- (void)alert{
    [QDKeyWindow addSubview:self];
}

- (instancetype)initWithFrame:(CGRect)frame{
    if (self == [super initWithFrame:frame]) {
        [self setUpUI];
    }
    return self;
}

- (void)setUpUI{
    
    //半透明遮盖视图（满屏）
    UIView *bgView = [[UIView alloc] initWithFrame:UIApplication.sharedApplication.keyWindow.bounds];
    bgView.backgroundColor = [UIColor colorWithWhite:0 alpha:0.5];
    bgView.alpha = 0;
    UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(bgViewTapped)];
    [bgView addGestureRecognizer:tap];
    [self addSubview:bgView];
    self.bgView = bgView;
    
    //创建tableView
    UITableView *tableView = [[UITableView alloc] initWithFrame:self.bounds style:UITableViewStylePlain] ;
    tableView.delegate = self;
    tableView.dataSource = self;
    tableView.scrollEnabled = NO;
    tableView.backgroundColor = QDColorTableViewBG;
    tableView.separatorStyle = UITableViewCellSeparatorStyleNone;
    tableView.showsVerticalScrollIndicator = NO;
    tableView.showsHorizontalScrollIndicator = NO;
    [tableView roundViewWithRadius:5.0f];//切圆角
    [self addSubview:tableView];
    self.tableView = tableView;
    
    if (UIDevice.currentDevice.systemVersion.doubleValue < 9.0) {
        [UIView animateWithDuration:0.2 animations:^{
            self.bgView.alpha = 1;
            CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
            scaleAnimation.fromValue = [NSNumber numberWithFloat:0.7] ;
            scaleAnimation.toValue = [NSNumber numberWithFloat:1.0] ;
            scaleAnimation.duration = 0.1;
            scaleAnimation.autoreverses = NO;
            [self.tableView.layer addAnimation:scaleAnimation forKey:@"transform.scale"];
        }];
    }else{
        CASpringAnimation *scaleAnimation = [CASpringAnimation animationWithKeyPath:@"transform.scale"];
        scaleAnimation.damping = 5;
        scaleAnimation.stiffness = 100;
        scaleAnimation.mass = 0.35;
        scaleAnimation.fromValue = [NSNumber numberWithFloat:0.7] ;
        scaleAnimation.toValue = [NSNumber numberWithFloat:1.0] ;
        scaleAnimation.duration = scaleAnimation.settlingDuration;
        scaleAnimation.autoreverses = NO;
        [self.tableView.layer addAnimation:scaleAnimation forKey:@"transform.scale"];
        [UIView animateWithDuration:0.2 animations:^{
            self.bgView.alpha = 1;
        }];
    }
}

- (void)layoutSubviews{
    [super layoutSubviews];
    
    self.frame = CGRectMake(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
    
    [self.tableView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.mas_equalTo(self).mas_offset(30);
        make.right.mas_equalTo(self.mas_right).mas_offset(-30);
        make.height.mas_equalTo(230);
        make.centerY.mas_equalTo(self);
    }];
}

- (void)setTitles:(NSArray *)titles{
    _titles = titles;
    if (!titles.count) {
        _titles = @[
                    @{@"title":@"尊敬的主人，用得怎么样？快去为我评个分吧",@"style":@(1)},
                    @{@"title":@"给个好评",@"style":@(0)},
                    @{@"title":@"下次再说",@"style":@(0)},
                    @{@"title":@"我要吐槽",@"style":@(0)}];
    }
}

#pragma mark -点击事件-
- (void)bgViewTapped{
    if (!self.closeUserInteractionEnabled) return [self cancleButtonTapped];
}

- (void)cancleButtonTapped{
    [UIView animateWithDuration:0.15 animations:^{
        self.bgView.alpha = 0;
        [self.tableView.layer removeAllAnimations];
        CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
        scaleAnimation.fromValue = [NSNumber numberWithFloat:1.0] ;
        scaleAnimation.toValue = [NSNumber numberWithFloat:0.5] ;
        scaleAnimation.duration = 0.15;
        scaleAnimation.autoreverses = NO;
        [self.tableView.layer addAnimation:scaleAnimation forKey:@"transform.scale"];
    }];
    
    [self performSelector:@selector(removeSelf) withObject:nil afterDelay:0.12];
}

- (void)removeSelf{
    [self removeFromSuperview];
}

#pragma mark -UITableViewDelegate/UITableViewDataSource-
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
    return self.titles.count;
}

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
    if (indexPath.row == 0) {
        return 80;
    }
    return 50;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    QDActionSheetCell *cell = [QDActionSheetCell cellWithTableView:tableView];
    cell.dict = self.titles[indexPath.row];
    return cell;
}

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{
    [tableView deselectRowAtIndexPath:indexPath animated:YES];
    if (self.tapBlock) {
        self.tapBlock(indexPath.row);
    }
    //除了标题栏，点击其他位置移除视图
    if (indexPath.row) {
        [self cancleButtonTapped];
    }
}

@end

3. QDActionSheetCell.h头文件代码如下：

#import <UIKit/UIKit.h>

@interface QDActionSheetCell : UITableViewCell

@property (nonatomic, copy) NSDictionary *dict;

+ (instancetype)cellWithTableView:(UITableView *)tableView;

@end

4. QDActionSheetCell.m实现文件代码如下：

#import "QDActionSheetCell.h"

@interface QDActionSheetCell ()
@property (nonatomic, weak) UILabel *titleL;
@property (nonatomic, weak) UIView *bottomLineV;
@end

@implementation QDActionSheetCell

+ (instancetype)cellWithTableView:(UITableView *)tableView{
    
    id cell = [tableView dequeueReusableCellWithIdentifier:NSStringFromClass(self)];
    if (!cell) {
        cell = [[self alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:NSStringFromClass(self)];
    }
    return cell;
}

- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier{
    if (self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]) {
        //添加所有子控件的方法
        [self setUpSubviews];
    }
    return self;
}

//初始化UI
-(void)setUpSubviews{
    
    UILabel *titleL = [[UILabel alloc] init];
    titleL.textAlignment = NSTextAlignmentCenter;
    titleL.numberOfLines = 2;
    titleL.backgroundColor = [UIColor whiteColor];
    [self.contentView addSubview:titleL];
    self.titleL = titleL;
    
    UIView *bottomLineV = [[UIView alloc] init];
    bottomLineV.backgroundColor = QDColorCellLine;
    [self.contentView addSubview:bottomLineV];
    self.bottomLineV = bottomLineV;
}

- (void)setDict:(NSDictionary *)dict{
    _dict = dict;
    self.titleL.text = dict[@"title"];
    NSNumber *styleNumber = dict[@"style"];
    if (styleNumber.boolValue) {
        self.titleL.font = QDFont17;
        self.titleL.textColor = [UIColor blackColor];
    }else{
        self.titleL.font = QDFont16;
        self.titleL.textColor = QDColorSystemBlue;
    }
}

//子控件布局
- (void)layoutSubviews{
    [super layoutSubviews];
    
    [self.titleL mas_makeConstraints:^(MASConstraintMaker *make) {
        make.center.mas_equalTo(self.contentView);
        make.left.mas_equalTo(self.contentView).mas_offset(20);
        make.right.mas_equalTo(self.contentView.mas_right).mas_offset(-20);
    }];
    
    [self.bottomLineV mas_makeConstraints:^(MASConstraintMaker *make) {
        make.height.mas_equalTo(0.8);
        make.left.mas_equalTo(self.contentView);
        make.right.mas_equalTo(self.contentView.mas_right);
        make.bottom.mas_equalTo(self.contentView.mas_bottom);
    }];
}


@end

5.调用方式:

QDActionSheetView *sheet = [QDActionSheetView alertWithFrame:self.view.window.bounds titles:nil tapBlock:^(NSInteger index) {
        DLog(@"index:%ld",index);
    }];
    [sheet alert];

注意:有的项目中有需求背景遮罩蒙板不让用户点击，只需要创建QDActionSheetView对象之后，设置属性closeUserInteractionEnabled = YES即可实现。

如果您希望在你的项目中直接使用，那就直接拷贝就行
如果觉得还不够具体，后期考虑将代码上传github与分享源码，希望深层交流的童鞋加我qq:1107160410，我们一起探讨，感谢您看到这里，如方便的话点个赞，我会更加努力。

欢迎点击下篇博客链接
http://www.jianshu.com/p/99984720f555查看更加相关内容，可能会帮到您。

高仿苹果(UIActionSheetView)弹窗带动画(3)

1. QDActionSheetView.h头文件代码如下：

2. QDActionSheetView.m实现文件代码如下：

3. QDActionSheetCell.h头文件代码如下：

4. QDActionSheetCell.m实现文件代码如下：

5.调用方式:

猜你喜欢

热点阅读