需求

昨天接到一个需求，就是类似QQ好友动态，点击箭头的那个弹窗，如下图 第一张是QQ的，第二张是我模仿的

QQ好友动态弹窗.jpg
Custom Alert.gif

分析

• 首选tableView显示cell的方式展示，这个不解释，那么问题来了，我要怎么显示？

  • 直接弹出一个控制器，此时就需要自定义modal控制器来管理tableView，好处是，方便管理，但事件处理最终还是要交个上一个控制器，而且自定义modal控制器需要多个类来实现，这种方式我迟点会实现

• 直接显示一个tableView到当前window上面，事件还是让当前控制器处理_{但相对来说而且只需要一个h和m文件就行，怎么实现？很简单的}往下看呗😁

实现思路

• 1. 首先肯定创建一个继承NSObject的工具类，只需要告诉我在哪显示 我就帮你显示，告诉我消失我就消失，至于内部怎么实现的，我不关心~

   @interface FLAlertViewHud : NSObject

• 2.当然此时可以直接在方法内部中创建tableView、弹窗的背景图（就是那个带箭头的图）、阴影coverView，然后添加到当前的keyWindow上，并处理所有的事件，这样虽然内部屏蔽了实现方式，但什么事都让它一个人做了，还不好修改维护呢~因此我们需要再次封装，tableView以及其背景图应该封装成一个专门的类，继承UIView就行,这样这个类内部就可以处理cell的点击事件等等

@interface FLAlertView : UIView

• 3.此时呢，FLAlertViewHud 只需要创建一个coverView阴影 以及 FLAlertView 就行，对于这个工具类来说，代码就少了很多了，是不是更面向对象呢~~

• 4.此时管理的关系流程就是，然后事件处理就往回传递

FLAlertViewHud->FLAlertView->UITableView->UITableViewCell

• 5.关系理清后，我们就可以制定API了！

  • 首先肯定需要一个fl_dismiss 方法来销毁弹窗~~~
  • 那么创建弹窗呢？适应需求，需要在一个按钮的上面或者下面显示弹窗，那么你只需要告诉哪个按钮就行，至于显示在上面还是下面，我会帮你计算好，如果下面够位置，我就显示在下面，如果不够就显示在上面。
  • 还有，现在需求只需要两个cell，如果我要多几个呢？因此还需要一个API，你给我一个数组，数组里面有我需要的东西，包括图片名字，标题名字等，我就创建多少个cell显示
  • 如果我不知道哪个按钮或者其他控件，但我知道要显示在哪，那么此时你就给我一个 Y值 吧，我会根据 Y 值在指定位置显示个弹窗
  • 同理，多个cell的话也需要再给我一个数组，里面装我需要的东西就行啦
  • 上面都是显示的，事件处理当然也需要API，作者我呢，喜欢用block，那么就提供两个block，一个fl_shareCellOperationBlock专门处理分享那个cell上面的按钮点击，传出点击哪个按钮就行，因此这种情况只有一个嘛，就它一个cell，另一个fl_normalCellOperationBlock处理一般的cell的点击，当然，需要传出点击的是哪个cell

• 还有一个单例方法，因为当前显示只会一个这样的弹窗，所以直接弄成单例得了

---

#import <UIKit/UIKit.h>
// 修改弹窗的高度，内部自适应
#define FLTableViewCellHeight 44
typedef enum{
    FLAlertViewHudCellTypeShare,
    FLAlertViewHudCellTypeNormal
}FLAlertViewHudCellType;

// image name key
extern NSString * const FLAlertViewHudLeftImageKey;
// title text key
extern NSString * const FLAlertViewHudTitleLabelKey;
// cell type default is FLAlertViewHudCellTypeNormal
extern NSString * const FLAlertViewHudCellTypeKey;

@interface FLAlertViewHud : NSObject
/**
 *  @author 孔凡列, 16-09-03 05:09:32
 *
 *  单例
 *
 *  @return return value description
 */
+ (instancetype)shareAlertViewHud;
/**
 *  @author 孔凡列, 16-09-03 01:09:47
 *
 *  显示在指定位置
 *
 *  @param y 指定的y值
 */
- (void)fl_show:(CGFloat)y;
/**
 *  @author 孔凡列, 16-09-03 06:09:38
 *
 *  显示在指定位置
 *
 *  @param y   指定的y值
 *  @param arr 字典数组（指定key的字典）
 */
- (void)fl_show:(CGFloat)y arr:(NSArray<NSDictionary *> *)arr;

/**
 *  @author 孔凡列, 16-09-03 01:09:16
 *
 *  根据弹窗的高度自适应弹窗的显示位置，在view的上面还是下面，目前只有两种情况
 *
 *  @param view view description
 */
- (void)fl_showAround:(UIView *)view;
/**
 *  @author 孔凡列, 16-09-03 06:09:55
 *
 *  根据弹窗的高度自适应弹窗的显示位置，在view的上面还是下面，目前只有两种情况
 *
 *  @param view 指定的view
 *  @param arr  字典数组（指定key的字典）
 */
- (void)fl_showAround:(UIView *)view arr:(NSArray<NSDictionary *> *)arr;
/**
 *  @author 孔凡列, 16-09-03 06:09:16
 *
 *  消失弹窗
 */
- (void)fl_dismiss;

/**
 *  @author 孔凡列, 16-09-03 01:09:05
 *
 *  分享按钮的点击事件---适应项目需求（可再次封装）
 */
@property (nonatomic,copy)void(^fl_shareCellOperationBlock)(NSInteger index);
/**
 *  @author 孔凡列, 16-09-03 01:09:52
 *
 *  普通cell的点击事件
 */
@property (nonatomic,copy)void(^fl_normalCellOperationBlock)(NSInteger row);

@end

显示调用如下：
    NSArray *arr = @[
                     @{FLAlertViewHudLeftImageKey : @"Snip20160903_4",FLAlertViewHudTitleLabelKey : @"分享",FLAlertViewHudCellTypeKey : @(FLAlertViewHudCellTypeShare)},
                     @{FLAlertViewHudLeftImageKey : @"Snip20160903_5",FLAlertViewHudTitleLabelKey : @"收藏"},
                     @{FLAlertViewHudLeftImageKey : @"Snip20160903_6",FLAlertViewHudTitleLabelKey : @"转载照片"},
                     @{FLAlertViewHudLeftImageKey : @"Snip20160903_7",FLAlertViewHudTitleLabelKey : @"隐藏此条动态"},
                     @{FLAlertViewHudLeftImageKey : @"Snip20160903_8",FLAlertViewHudTitleLabelKey : @"不看他的动态"},
                     @{FLAlertViewHudLeftImageKey : @"Snip20160903_9",FLAlertViewHudTitleLabelKey : @"收藏"}
                     ];
    
    [[FLAlertViewHud shareAlertViewHud] fl_showAround:btn
                                                  arr:arr];

事件处理如下：
   [FLAlertViewHud shareAlertViewHud].fl_normalCellOperationBlock = ^(NSInteger row){
        NSDictionary *dict = arr[row];
        UIAlertView *alert = [[UIAlertView alloc] initWithTitle:dict[FLAlertViewHudTitleLabelKey] message:nil delegate:nil cancelButtonTitle:@"OK" otherButtonTitles: nil];
        [alert show];
    };
    
    [FLAlertViewHud shareAlertViewHud].fl_shareCellOperationBlock = ^(NSInteger index){
        NSLog(@"在 %zd 行 点击%zd按钮",indexPath.row,index);
        NSString *str = nil;
        switch (index) {
            case 0:
                str = @"QQ分享";
                break;
            case 1:
                str = @"微信分享";
                break;
            default:
                str = @"朋友圈分享";
                break;
        }
        UIAlertView *alert = [[UIAlertView alloc] initWithTitle:str message:nil delegate:nil cancelButtonTitle:@"OK" otherButtonTitles: nil];
        [alert show];
    };

面向模型封装后：

    NSArray *arr = @[
                     [FLAlertViewModel fl_alertViewModelWithTitleName:@"分享" leftImageName:@"Snip20160903_4" alertViewCellType:FLAlertViewHudCellTypeShare],
                     [FLAlertViewModel fl_alertViewModelWithTitleName:@"收藏" leftImageName:@"Snip20160903_5"],
                     [FLAlertViewModel fl_alertViewModelWithTitleName:@"转载照片" leftImageName:@"Snip20160903_6"],
                     [FLAlertViewModel fl_alertViewModelWithTitleName:@"隐藏此条动态" leftImageName:@"Snip20160903_7"],
                     [FLAlertViewModel fl_alertViewModelWithTitleName:@"不看他的动态" leftImageName:@"Snip20160903_8"],
                     [FLAlertViewModel fl_alertViewModelWithTitleName:@"收藏" leftImageName:@"Snip20160903_9"]
                     ];
    
    [[FLAlertViewHud shareAlertViewHud] fl_showAround:btn
                                                  arr:arr];

m文件代码太多了，这里就不拷贝过来了。。。。两种模式任君选择

• 面向字典：gitHub地址
• 面向模型：gitHub地址喜欢的话，给个Star呗

---

总结

• 上面 的实现方式 是面向字典开发的，而且我是创建了两种cell，一个专门是分享的，一个是普通的，通过外界传入的字典数组，然后根据对应字典的key的类型来创建不同的cell，同时赋相关值，考虑显示内容不超过一个页面，因此没有重用机制，可以封装成模型，个人偏向面向模型开发，这样就更加面向对象了，有些小伙伴喜欢面向字典，因此这份我就先这样啦，我会另外再封装一份面向模型~~~如果大家有什么问题，随时提问，看到都会回复喔！！！

更新啦~~~_{面向模型也在上面喔}

---