IOS之自定义对话框

IOS之自定义对话框

由于通过继承UIAlterView来实现自定义对话框的方法在IOS7.0系统中不能再实现，通过查找相关资料寻找到一个相对比较简单而且有效的方法来替代之前的方法。接下来我们将学习如何利用UIView来实现自定义对话框的效果。

实现思路：

1、在需要弹出对话框的ViewController中添加一张用来自定义对话框的子View。

2、按照自定义对话框的效果要求修改子View。

3、将子View的透明度设置为0，这样我们就无法看到这个子View。

4、通过自定义动画逐渐弹出和显示对话框。

具体实现代码分析：

1、创建一个类，命名为CustomAlterView，继承自UIView。这个CustomAlterView将用来控制对话框的布局。

2、在ViewController中创建一个CustomAlterView的对象，并设置相应参数。

    self.alterView.delegate = self;//设置代理
    [self.view addSubview:self.alterView];//将view添加到父View上
    self.alterView.alpha = 0.0f;//设置透明度为0.0f
    self.alterView.layer.borderWidth = 5.0f;//设置边界宽度
    self.alterView.layer.borderColor = [[UIColor whiteColor] CGColor];//设置边界颜色
    self.alterView.transform = CGAffineTransformScale(CGAffineTransformIdentity,0.6, 0.6);//设置缩放比例

3、接下来是最核心的动画部分，当用户点击需要弹出对话框时，我们执行下面代码

[UIView animateWithDuration:0.2 animations:
     ^(void){
         self.alterView.transform = CGAffineTransformScale(CGAffineTransformIdentity,1.1f, 1.1f);//设置缩放比例，将View拉伸到1.1倍
         self.alterView.alpha = 0.5;//透明度修改为0.5
         self.tableView.alpha = 0.0;
     }
     completion:^(BOOL finished){
        [self bounceOutAnimationStoped];//当拉伸的动画执行完毕后，为了达到良好的用户体验，我们还需要使得弹出效果有bounce，因此，我们继续动画。
     }];

- (void)bounceOutAnimationStoped
{
    [UIView animateWithDuration:0.1 animations:
     ^(void){
         self.alterView.transform = CGAffineTransformScale(CGAffineTransformIdentity,0.9, 0.9);//这次的动画是将View收缩到0.9倍
         self.alterView.alpha = 0.8;//透明度修改为0.8
     }
     completion:^(BOOL finished){
        [self bounceInAnimationStoped];//收缩动画完成之后我们还要将View拉伸到正常状态。
     }];
}

- (void)bounceInAnimationStoped
{
    [UIView animateWithDuration:0.1 animations:
     ^(void){
         self.alterView.transform = CGAffineTransformScale(CGAffineTransformIdentity,1, 1);//将View拉伸到1：1的状态
         self.alterView.alpha = 1.0;//将View透明度设置为1.0，View完全显示
     }
     completion:^(BOOL finished){
     }];
}

此时，CustomAlterView的弹出效果就全部完成了。

当然，整个的设计还没有结束，弹出效果完成之后我们还要考虑对话框关闭的状态，关闭效果的实现相对就比较简单，只需要我们在用户触发关闭对话框的事件时执行以下代码：

self.alterView.alpha = 0;//重新将透明度设置为0
self.alterView.transform = CGAffineTransformScale(CGAffineTransformIdentity,0.6, 0.6);//将View收缩到0.6倍

这样，我们就实现了自定义对话框的设计，而且这种实现方法在IOS7.0中也可以完美呈现。

当然，不难发现这种实现方法有一个问题就是当我们在项目中多处要使用这一功能时，我们就会遇到要写多次方法的情况，如何避免这种情况产生呢，接下来我们就介绍一种更好的方式。

首先，同样要在ViewController上添加一个子View，只是这个View需要继承自我们的CustomAlertView。

接下来，就是在CustomAlertView里面添加内容了，我们需要添加两个方法，一个show方法，一个dismiss方法。显而易见，一个用来显示View，一个用来隐藏View。

- (void)show;
{
    self.hidden = NO;
    CAKeyframeAnimation *animation = [CAKeyframeAnimation
                                      animationWithKeyPath:@"transform"];
    
    CATransform3D scale1 = CATransform3DMakeScale(0.5, 0.5, 1);
    CATransform3D scale2 = CATransform3DMakeScale(0.8, 0.8, 1);
    CATransform3D scale3 = CATransform3DMakeScale(0.9, 0.9, 1);
    CATransform3D scale4 = CATransform3DMakeScale(1.0, 1.0, 1);
    
    NSArray *frameValues = [NSArray arrayWithObjects:
                            [NSValue valueWithCATransform3D:scale1],
                            [NSValue valueWithCATransform3D:scale2],
                            [NSValue valueWithCATransform3D:scale3],
                            [NSValue valueWithCATransform3D:scale4],
                            nil];
    [animation setValues:frameValues];
    
    NSArray *frameTimes = [NSArray arrayWithObjects:
                           [NSNumber numberWithFloat:0.0],
                           [NSNumber numberWithFloat:0.5],
                           [NSNumber numberWithFloat:0.9],
                           [NSNumber numberWithFloat:1.0],
                           nil];
    [animation setKeyTimes:frameTimes];
    
    animation.fillMode = kCAFillModeForwards;
    animation.removedOnCompletion = NO;
    animation.duration = .2;
    
    [self.layer addAnimation:animation forKey:@"popup"];
}

- (void)dissmiss;
{
    self.hidden = YES;
    CAKeyframeAnimation *animation = [CAKeyframeAnimation
                                      animationWithKeyPath:@"transform"];
    
    CATransform3D scale1 = CATransform3DMakeScale(1.0, 1.0, 1);
    CATransform3D scale2 = CATransform3DMakeScale(0.7, 0.7, 1);
    CATransform3D scale3 = CATransform3DMakeScale(0.3, 0.3, 1);
    CATransform3D scale4 = CATransform3DMakeScale(0, 0, 1);
    
    NSArray *frameValues = [NSArray arrayWithObjects:
                            [NSValue valueWithCATransform3D:scale1],
                            [NSValue valueWithCATransform3D:scale2],
                            [NSValue valueWithCATransform3D:scale3],
                            [NSValue valueWithCATransform3D:scale4],
                            nil];
    [animation setValues:frameValues];
    
    NSArray *frameTimes = [NSArray arrayWithObjects:
                           [NSNumber numberWithFloat:0.0],
                           [NSNumber numberWithFloat:0.5],
                           [NSNumber numberWithFloat:0.9],
                           [NSNumber numberWithFloat:1.0],
                           nil];
    [animation setKeyTimes:frameTimes];
    
    animation.fillMode = kCAFillModeForwards;
    animation.removedOnCompletion = NO;
    animation.duration = .2;
    
    [self.layer addAnimation:animation forKey:@"popup"];
}

由以上代码不然看出，我们要利用关键帧动画来实现View的显示和隐藏。