知乎用户反馈设计与实现

问题背景

我们的App上线后,一直没有做用户反馈的界面.老大觉得市面上的普通没什么新意, 比较中意知乎的用户反馈机制.用户通过"摇一摇"手机,进入反馈页面.

下面给出的关于TLUserFeedbackWindow的代码片段只是部分源码，只为说明实现的具体思想。

最新:源码已上传到Github

分析问题

主要需要四部分的需求.

1."摇一摇" 2.截图  3.展示的UI类 4.绘图

解决思路

1."摇一摇" : 首先用户反馈要在App里的任何一个ViewController中都可以响应所以将摇一摇的代码要放到AppDelegate中. 由于"摇一摇"功能此前在我的项目其他的页面实现过相关的代码.我就直接拿来了.

"摇一摇"相关的代码如果想更深入了解可以参考官方文档:Motion Events

2.截图:我写了一个Category

+ (UIImage*)snapshot {

UIViewController *topViewController = [UIViewController topViewController];

UIGraphicsBeginImageContextWithOptions(topViewController.view.bounds.size,YES,2.0f);

if([[[UIDevicecurrentDevice]systemVersion]floatValue] >=8.0) {

[topViewController.view.layerrenderInContext:UIGraphicsGetCurrentContext()];

} else {

[topViewController.viewdrawViewHierarchyInRect:topViewController.view.boundsafterScreenUpdates:YES];

}

UIImage*finalImage =UIGraphicsGetImageFromCurrentImageContext();

UIGraphicsEndImageContext();

returnfinalImage;

}

这个Category里面又套了一个UIViewController topViewController 的Category.这个主要是获取到当前最上面的TopViewController这里我就不给出源码,网上有很多.

3.展示的UI类:我参考了唐巧的《iOS开发进阶》中UIWindow的内容.详情大家可以参考巧哥的书.凑巧的是我开始写的当天晚上下班途中我刷微博看到了唐巧发的微博.

我也因此解决了这个问题,这点会在后面说.

4.绘图:重写drawRect

首先在AppDelegate 实现"摇一摇"代码.在代码里调用TLUserFeedbackWindow 让Window盖到最上层.

TLUserFeedbackWindow 主要写了下面的property

@property(strong,nonatomic)UIImageView*imageView;

@property(strong,nonatomic)TLDoodleView*doodleView;

@property(strong,nonatomic)DrawBoardView*drawBoardView;

@property(strong,nonatomic)UIView*titleView;

@property(strong,nonatomic)UIView*toolsView;

@property(strong,nonatomic)SZTextView*textView;

@property(copy,nonatomic)NSString*contentString;

@property(strong,nonatomic)UIView*lineView;

@property(strong,nonatomic)UIView*shadeView;

UIImageView  主要将截图展示

[self addSubview:self.imageView];

TLDoodleView 设置透明色 露出UIImageView 进行涂鸦

[self.imageView addSubview:self.doodleView];

DrawBoardView 选择不同颜色的色板

[self.doodleView addSubview:self.drawBoardView];

其他的View主要是展示相关按钮逻辑的View.在这里不详细描述.但需要注意的是,当用户结束涂鸦点击完成按钮.需要隐藏相关的View,以保证得到完整的图.

技术提示点

1.截图需要考虑iOS7和iOS8以上适配的问题.否则会出现不同系统截不出图的问题.

2.UIWindow 需要写一个rootViewController.否则该页面StatusBar是无法隐藏的.

3.imageView要记得设置userInteractionEnabled为YES.

感悟&总结

公司的项目已经写了一年多,但并没有某一功能实现以博客的形式展现出来,这也是第一次写比较详细的技术博客.我当时接到这个需求的适合并没有有多难.希望这部分代码对你有所帮助.

功能实现截图: