需求
昨天接到一个需求，就是类似QQ好友动态，点击箭头的那个弹窗，如下图 第一张是QQ的，第二张是我模仿的
QQ好友动态弹窗.jpg
Custom Alert.gif
分析
-
首选tableView显示cell的方式展示，这个不解释，那么问题来了，我要怎么显示？
- 直接弹出一个控制器，此时就需要自定义modal控制器来管理tableView，好处是，方便管理，但事件处理最终还是要交个上一个控制器，而且自定义modal控制器需要多个类来实现，这种方式我迟点会实现
-
直接显示一个tableView到当前window上面，事件还是让当前控制器处理但相对来说而且只需要一个h和m文件就行，怎么实现？很简单的往下看呗😁
实现思路
- 首先肯定创建一个继承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文件代码太多了，这里就不拷贝过来了。。。。两种模式任君选择
总结
- 上面 的实现方式 是面向字典开发的，而且我是创建了两种cell，一个专门是分享的，一个是普通的，通过外界传入的字典数组，然后根据对应字典的key的类型来创建不同的cell，同时赋相关值，考虑显示内容不超过一个页面，因此没有重用机制，可以封装成模型，个人偏向面向模型开发，这样就更加面向对象了，有些小伙伴喜欢面向字典，因此这份我就先这样啦，我会另外再封装一份面向模型~~~如果大家有什么问题，随时提问，看到都会回复喔！！！
网友评论