自定義一個(gè)和京東一樣的效果的UIAlertView

京東-退出登錄原型圖

今天無意間逛京東商城，退出賬號(hào)時(shí)候，看到京東的這個(gè)彈出框，和系統(tǒng)彈框很像，但是有不太一樣。于是乎就寫了一個(gè)自定義的UIAlertView，和京東這個(gè)彈框動(dòng)畫效果一樣。而且把點(diǎn)擊事件直接分裝在init方法中，使用方便，還做了文本多行適配高度的處理。
寫了這樣一個(gè)彈框的demo，之后遇到彈框這種UI，其實(shí)寫法都是一樣的，只不過把里面的控件換一下，就可以成為一個(gè)新的彈框界面，代碼可塑性很高。話不多說了了，直接上代碼，代碼注釋也都寫了，有什么問題，留言給我。

用法如下：

  SPAlertView *alertView = [[SPAlertView alloc]initWithTitle:@"你好，這是一個(gè)測試，莫驚慌莫驚慌莫驚慌莫驚慌莫驚慌莫驚慌莫驚慌莫驚慌莫驚慌莫驚慌莫驚慌莫驚慌莫驚慌莫驚慌莫驚慌莫驚慌莫驚慌莫驚慌莫驚慌莫驚慌莫驚慌莫驚慌莫驚慌莫驚慌莫驚慌莫驚慌莫驚慌莫驚慌莫驚慌莫驚慌莫驚慌莫驚慌莫驚慌莫驚慌莫驚慌莫驚慌莫驚慌莫驚慌111" cancelButtonTitle:@"取消" doneButtonTitle:@"刪除" cancleBlock:^{
        DDLog(@"點(diǎn)擊取消");
    } doneBlock:^{
        DDLog(@"點(diǎn)擊刪除");
    }];
    [alertView show];
SPAlertView.h
//
//  SPAlertView.h
//  Created by ZSP on 2017/6/1.
//

#import <UIKit/UIKit.h>

typedef void (^DoneBlock)();
typedef void (^CancleBlock)();

@interface SPAlertView : UIView

@property (nonatomic, copy) DoneBlock doneBlock;
@property (nonatomic, copy) CancleBlock cancleBlock;


/**
 自定義UIAlertView（高仿系統(tǒng)自帶的）
 
 @param title 提示語
 @param cancelButtonTitle 取消按鈕文本信息
 @param doneButtonTitle 完成按鈕文本信息
 @param cancleBlock 取消按鈕回調(diào)
 @param doneBlock 完成按鈕回調(diào)
 @return self
 */
- (instancetype)initWithTitle:(NSString *)title cancelButtonTitle:(NSString *)cancelButtonTitle doneButtonTitle:(NSString *)doneButtonTitle cancleBlock:(void(^)())cancleBlock doneBlock:(void(^)())doneBlock;
/**
 顯示UIAlertView
 */
- (void)show;

@end
SPAlertView.m
//
//  SPAlertView.m
//  Created by ZSP on 2017/6/1.
//

#import "SPAlertView.h"

@interface SPAlertView()

@property (nonatomic, strong) UIView *popView;

@end


@implementation SPAlertView

- (instancetype)initWithTitle:(NSString *)title cancelButtonTitle:(NSString *)cancelButtonTitle doneButtonTitle:(NSString *)doneButtonTitle cancleBlock:(void(^)())cancleBlock doneBlock:(void(^)())doneBlock{
    
    self = [super initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT)];
    
    if (self) {
        [self addSubViewsWithTitle:title cancelButtonTitle:cancelButtonTitle doneButtonTitle:doneButtonTitle cancleBlock:^{
            cancleBlock();
        } doneBlock:^{
            doneBlock();
        }];
    }
    
    return self;
}

- (void)addSubViewsWithTitle:(NSString *)title cancelButtonTitle:(NSString *)cancelButtonTitle doneButtonTitle:(NSString *)doneButtonTitle cancleBlock:(void(^)())cancleBlock doneBlock:(void(^)())doneBlock{
 
    self.cancleBlock = [cancleBlock copy];
    self.doneBlock = [doneBlock copy];
    
//    self.backgroundColor = mRGBAColor(0, 0, 0, 0.3);
    self.backgroundColor = [UIColor colorWithRed:0.5 green:0.5 blue:0.5 alpha:0.5];

    //不知道為撒這塊font寫成16，高度算的不準(zhǔn)，所以寫成16.1??
    CGFloat height = [GeneralMethods getTheStringHeight:title setFont:16.1 withWidth:250];
    if (height < 30) {
        height = 30;
    }
    
    self.popView = [[UIView alloc]init];
    [self addSubview:self.popView];
    self.popView.backgroundColor = [UIColor whiteColor];
    self.popView.layer.cornerRadius = 10;
    self.popView.clipsToBounds = YES;
    [self.popView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.center.equalTo(self);
        make.size.mas_equalTo(CGSizeMake(270, (height + 30) + 41));
    }];
    
    UILabel *lblTitle = [[UILabel alloc] init];
//    lblTitle.font =  [UIFont boldSystemFontOfSize:16.f];
    lblTitle.font =  [UIFont systemFontOfSize:16.f];
    lblTitle.numberOfLines = 0 ;
    lblTitle.text = title ;
    [self.popView addSubview:lblTitle];
    [lblTitle mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(self.popView).offset(15);
        make.left.equalTo(self.popView).offset(10);
        make.right.equalTo(self.popView).offset(-10);
        make.height.equalTo(@(height));
    }];
    
    //分割線橫線
    UILabel *horizontalLineLable  = [[UILabel alloc] init];
    horizontalLineLable.backgroundColor = [UIColor darkGrayColor];
    horizontalLineLable.alpha = 0.4 ;
    [self.popView addSubview:horizontalLineLable];
    [horizontalLineLable mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(lblTitle.mas_bottom).offset(15);
        make.left.right.equalTo(self.popView);
        make.height.equalTo(@(0.5));
    }];
    
    //分割線豎線
    UILabel *verticalLineLable = [[UILabel alloc] init];
    verticalLineLable.backgroundColor = [UIColor darkGrayColor];
    verticalLineLable.alpha = 0.4 ;
    [self.popView addSubview:verticalLineLable];
    [verticalLineLable mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(horizontalLineLable.mas_bottom);
        make.width.equalTo(@(0.5));
        make.centerX.equalTo(self.popView);
        make.bottom.equalTo(self.popView);
    }];
    
    //取消和確認(rèn)按鈕
    UIButton *cancleButton = [[UIButton alloc]init];
    [cancleButton setTitle:cancelButtonTitle forState:UIControlStateNormal];
    [cancleButton setTitleColor:[UIColor darkGrayColor] forState:UIControlStateNormal];
    [self.popView addSubview:cancleButton];
    [cancleButton mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(horizontalLineLable.mas_bottom);
        make.left.bottom.equalTo(self.popView);
        make.right.equalTo(verticalLineLable.mas_left);
    }];
    [cancleButton addTarget:self action:@selector(cancleButtonClick:) forControlEvents:UIControlEventTouchUpInside];
    
    
    UIButton *doneButton = [[UIButton alloc]init];
    doneButton.backgroundColor = [UIColor redColor];
    [doneButton setTitle:doneButtonTitle forState:UIControlStateNormal];
    [doneButton setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
    [self.popView addSubview:doneButton];
    [doneButton mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(horizontalLineLable.mas_bottom);
        make.right.bottom.equalTo(self.popView);
        make.left.equalTo(verticalLineLable.mas_right);
    }];
    [doneButton addTarget:self action:@selector(doneButtonClick:) forControlEvents:UIControlEventTouchUpInside];

    [self animationWithView:self.popView duration:0.5];
    
}

- (void)cancleButtonClick:(UIButton *)sender{
    [self removeFromSuperview];
    if (self.cancleBlock) {
        self.cancleBlock();
    }
}

- (void)doneButtonClick:(UIButton *)sender{
    [self removeFromSuperview];
    
    if (self.doneBlock) {
        self.doneBlock();
    }
}

//動(dòng)畫
- (void)animationWithView:(UIView *)view duration:(CFTimeInterval)duration{
    
    CAKeyframeAnimation * animation;
    animation = [CAKeyframeAnimation animationWithKeyPath:@"transform"];
    animation.duration = duration;
    animation.removedOnCompletion = NO;

    animation.fillMode = kCAFillModeForwards;

    NSMutableArray *values_Arr = [NSMutableArray array];
    [values_Arr addObject:[NSValue valueWithCATransform3D:CATransform3DMakeScale(0.1, 0.1, 1.0)]];
    [values_Arr addObject:[NSValue valueWithCATransform3D:CATransform3DMakeScale(1.2, 1.2, 1.0)]];
    [values_Arr addObject:[NSValue valueWithCATransform3D:CATransform3DMakeScale(1.0, 1.0, 1.0)]];
    animation.values = values_Arr;
    animation.timingFunction = [CAMediaTimingFunction functionWithName: @"easeInEaseOut"];
//    animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
    [view.layer addAnimation:animation forKey:nil];
    
}

- (void)show{
    
    [[UIApplication sharedApplication].keyWindow  addSubview:self];
    
}

@end

最終效果是：

自定義的UIAlertView效果圖
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,595評(píng)論 25贊 708
  • 我沒有舍得的境界，但我有舍棄的勇氣。 在二十多歲的年紀(jì)，誰不是什么都想要，什么都想要最好呢？我想說，這時(shí)候才該適度...
    祝孜孜閱讀 856評(píng)論 0贊 1
  • 懷李白 太白托白刃，詩仙入紅塵。筆溜銀鞍馬，留墨靜胡煙。貂裘將進(jìn)酒，吟嘆天老山。停步太行雪，黃河阻冰閑。醉言文...
    百里馬001閱讀 240評(píng)論 0贊 0
  • 節(jié)后上班第一天。 早上六點(diǎn)半起床。 中午睡覺一個(gè)小時(shí)。 晚上十一點(diǎn)二十睡，大概十一點(diǎn)半睡著 早上一個(gè)雞蛋。上午一個(gè)...
    快樂葡萄幸福家閱讀 254評(píng)論 27贊 0