# iOS实现自定义炫酷的弹出视图（popView）

语言：zh-CN
原文：[iOS实现自定义炫酷的弹出视图（popView）](<https://allluckly.cn/%E6%8A%95%E7%A8%BF/tuogao03>)
中文：[中文 HTML](<https://allluckly.cn/%E6%8A%95%E7%A8%BF/tuogao03>)
English: [English HTML](<https://allluckly.cn/en/journal/2016-01-13-building-a-custom-pop-up-view-with-hwpoptool/>)
发布于: 2016-01-13T00:00:00+08:00
内容更新于: 2016-01-13T00:00:00+08:00
署名：[HenryCheng](<http://www.jianshu.com/users/233c37d8a732/latest_articles>)

介绍 HWPopTool 自定义弹出视图的接入，通过配置内容视图、背景遮罩和关闭按钮控制展示效果，并说明关闭回调由代理改为 block 后的使用方式。

原文署名HenryCheng，Bison 编辑收录。

[原文所列来源](<http://www.jianshu.com/users/233c37d8a732/latest_articles>)

**阅读前** 这是 2015–2017 年间的技术记录，本次整理未重新运行验证示例。涉及的 API、依赖和工具版本请结合发表日期阅读。

编辑：[Bison](<https://allluckly.cn/>)  
 投稿：[HenryCheng](<http://www.jianshu.com/users/233c37d8a732/latest_articles>)

> "前段时间，在项目中有个需求是支付完成后，弹出红包，实现这么一个发红包的功能。做了最后，实现的效果大致如下："

![1](<https://allluckly.cn/images/blog/tuogao/tougao03/1.gif>)

### 一、使用方法

整个ViewController的代码大致如下

```css
//
//  SecondViewController.m
//  HWPopTool
//
//  Created by HenryCheng on 16/1/11.
//  Copyright © 2016年 www.igancao.com. All rights reserved.
//

#import "SecondViewController.h"
#import "HWPopTool.h"

@interface SecondViewController ()

@property (strong, nonatomic) UIView *contentView;

@end

@implementation SecondViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor whiteColor];

    _contentView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 200, 300)];
    _contentView.backgroundColor = [UIColor clearColor];

    UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
    btn.frame = CGRectMake(100, 200, 100, 50);
    btn.backgroundColor = [UIColor greenColor];
    [btn addTarget:self action:@selector(popViewShow) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:btn];
}

- (void)popViewShow {
    UIImageView *imageV = [[UIImageView alloc]initWithFrame:_contentView.bounds];
    imageV.image = [UIImage imageNamed:@"jei"];
    [_contentView addSubview:imageV];

    [HWPopTool sharedInstance].shadeBackgroundType = ShadeBackgroundTypeSolid;
    [HWPopTool sharedInstance].closeButtonType = ButtonPositionTypeRight;
    [[HWPopTool sharedInstance] showWithPresentView:_contentView animated:YES];

}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end
```

我们引入了HWPopTool.h，并且创建了一个button，点击button的方法是popViewShow，  
 我们来看一下这里面的代码：

```css
- (void)popViewShow {

    UIImageView *imageV = [[UIImageView alloc]initWithFrame:_contentView.bounds];
    imageV.image = [UIImage imageNamed:@"jei"];
    [_contentView addSubview:imageV];

    [HWPopTool sharedInstance].shadeBackgroundType = ShadeBackgroundTypeSolid;
    [HWPopTool sharedInstance].closeButtonType = ButtonPositionTypeRight;
    [[HWPopTool sharedInstance] showWithPresentView:_contentView animated:YES];

}
```

这里在\_contentView上放了一个imageView，然后我们设置了shadeBackgroundType  
 和closeButtonType以后，下面一句代码就是展示出来popView。这里主要就是我们弹出  
 一个view，至于这个view多大，上面放什么，都是由你自己决定的。

### 二、关于HWPopTool里面的一些属性和方法

先来看一下HWPopTool.h

```css
//
//  HWPopTool.h
//  HWPopTool
//
//  Created by HenryCheng on 16/1/11.
//  Copyright © 2016年 www.igancao.com. All rights reserved.
//

#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>
/**
*  关闭按钮的位置
*/
typedef NS_ENUM(NSInteger, ButtonPositionType) {
    /**
    *  无
    */
    ButtonPositionTypeNone = 0,
    /**
    *  左上角
    */
    ButtonPositionTypeLeft = 1 << 0,
    /**
    *  右上角
    */
    ButtonPositionTypeRight = 2 << 0
};
/**
*  蒙板的背景色
*/
typedef NS_ENUM(NSInteger, ShadeBackgroundType) {
    /**
    *  渐变色
    */
    ShadeBackgroundTypeGradient = 0,
    /**
    *  固定色
    */
    ShadeBackgroundTypeSolid = 1 << 0
};

typedef void(^completeBlock)(void);

@interface HWPopTool : NSObject

@property (strong, nonatomic) UIColor *popBackgroudColor;//弹出视图的背景色
@property (assign, nonatomic) BOOL tapOutsideToDismiss;//点击蒙板是否弹出视图消失
@property (assign, nonatomic) ButtonPositionType closeButtonType;//关闭按钮的类型
@property (assign, nonatomic) ShadeBackgroundType shadeBackgroundType;//蒙板的背景色

/**
*  创建一个实例
*
*  @return CHWPopTool
*/
+ (HWPopTool *)sharedInstance;
/**
*  弹出要展示的View
*
*  @param presentView show View
*  @param animated    是否动画
*/
- (void)showWithPresentView:(UIView *)presentView animated:(BOOL)animated;
/**
*  关闭弹出视图
*
*  @param complete complete block
*/
- (void)closeWithBlcok:(void(^)())complete;

@end
```

由于之前写的比较仓促，今天趁着空余时间又把代码整理了一遍，比如关闭之后的回调，  
 之前用`delegate`实现的，今天又用`block`重新写的，简洁一点吧，另外基本上所  
 有的方法、属性、枚举我都有注释，算是个个人习惯吧。  
 这里面有几点需要说明的是：

> 1.`ShadeBackgroundType`是蒙板的背景色属性，有固定的和渐变的（ShadeBackgroundTypeGradient），关于这个渐变，有兴趣的可以研究一下CAGradientLayer，还是很有趣的，在后来的文章中也会说到。

> 2.`tapOutsideToDismiss`这个是设置点击蒙板，`popView`消失不消失的属性，默认的是YES

> 3.`- (void)closeWithBlcok:(void(^)())complete`这个方法，是关闭后的回调，比如说发送红包以后，等`popView`消失以后回到上一页的这种。

由于注释的基本都很清楚了，这里就不多说了，

### 三、最后

我一般写博客的时候，贴代码喜欢贴全部的代码，我认为这样会直观一点（当然非常多的除外）  
 最后，所有的代码demo都可以在  
 [这里](<https://github.com/Loveway/HWPopTool>) 看到！

---

好文推荐：[Bison眼中的iOS开发多线程是这样的（一）](<https://allluckly.cn/%E5%A4%9A%E7%BA%BF%E7%A8%8B/duoxiancheng01>)