高仿蘋果(UIActionSheetView)彈窗帶動畫(3)

因為項目需求,自定義彈出視圖的基礎上加一些用戶體驗更佳的動畫和友情文字以及圖片提示等,就有了寫了這篇博客,一為方便自己以后在其他項目中復用二為更多開發(fā)者拷貝使用,若有書寫代碼不足之處歡迎批評指正。

先看下我的Demo示例運行效果圖如下:

彈窗動態(tài)效果圖.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;
    
    //創(chuàng)建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];

注意:有的項目中有需求背景遮罩蒙板不讓用戶點擊,只需要創(chuàng)建QDActionSheetView對象之后,設置屬性closeUserInteractionEnabled = YES即可實現。

如果您希望在你的項目中直接使用,那就直接拷貝就行
如果覺得還不夠具體,后期考慮將代碼上傳github與分享源碼,希望深層交流的童鞋加我qq:1107160410,我們一起探討,感謝您看到這里,如方便的話點個贊,我會更加努力。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 227,702評論 6 531
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發(fā)現死者居然都...
    沈念sama閱讀 98,143評論 3 415
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 175,553評論 0 373
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,620評論 1 307
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,416評論 6 405
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 54,940評論 1 321
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,024評論 3 440
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,170評論 0 287
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發(fā)現了一具尸體,經...
    沈念sama閱讀 48,709評論 1 333
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,597評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,784評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,291評論 5 357
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 44,029評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,407評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,663評論 1 280
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,403評論 3 390
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,746評論 2 370

推薦閱讀更多精彩內容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,597評論 25 707
  • 因為項目需求,自定義彈出視圖的基礎上加一些用戶體驗更佳的動畫和友情文字以及圖片提示等,就有了寫了這篇博客,一為方便...
    硅谷干貨閱讀 757評論 0 0
  • Spring Cloud為開發(fā)人員提供了快速構建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務發(fā)現,斷路器,智...
    卡卡羅2017閱讀 134,776評論 18 139
  • 因為項目需求,自定義彈出視圖的基礎上加一些用戶體驗更佳的動畫和友情文字以及圖片提示等,就有了寫了這篇博客,一為方便...
    硅谷干貨閱讀 958評論 0 0
  • 夢里,我端坐在黑暗之中 在流水叮咚的律動里 隱約有一絲火光搖曳 在無邊無際的遠 和觸手可及的近 風涼了的九月 我在...
    鹿夜鳴閱讀 151評論 0 0