关于交互的一些细节以及GCD的活用

人生三重境界。第一重境界,看山是山,看水是水;第二重境界,看山不是山,看水不是水;第三重境界,看山还是山,看水还是水。

昨天看《猫妖传》电影解说,让我重新领悟了这句话,当时去电影院并没有理会其中的深奥,觉得特效挺好,大唐盛世。其实不然,当我们学会透过现象看本质的时候,心境会豁然开朗,搞开发也正是如此。

在我离职进行网投这段时间,招聘软件会把一些公司的产品链接显示出来,我感兴趣也会去AppStore下载,特别是充满创新和有魅力的界面。我在实用性>交互>界面进行分析,发现一些App在弱网环境下反复点击提交按钮做网络请求会不停push下级页面,以及输入框在文字编辑超过键盘顶部,会遮挡3行左右文字等没做处理。这些交互的不友好细节,在我以前开发导航类App是从没关注的,所谓看山是山。后来在我做香港护理项目PCW,因为每个院友大量日活数据,特别是多护工分时段提交数据,在数据库查询发现同时间账号有多次记录的时候,就发现问题不容忽视,因为涉及数据的查重,以及医院的检查。下面记录我的解决方法以及心得

我们如果从UI交互入手

首先想到的是避免带有重要post数据按钮重复点击
在实际应用场景中,有几个业务场景需要控制UIButton响应事件的时间间隔。

  • 当点击按钮来执行网络请求时,若请求耗时稍长,用户往往会多次点击。这样,就执行了多次请求,造成资源浪费。
  • 纯UI交互不带有网络请求,在移动终端设备性能较差时,连续点击按钮会执行多次事件(比如push出来多个viewController)。
  • 防止暴力点击。

通过UIButton的enabled属性和userInteractionEnabled属性控制按钮是否可点击。以及用GCD进行延迟交互响应链

此方案在逻辑上比较清晰、易懂,但具体代码书写分散,常常涉及多个地方。

1
2
3
4
5
6
7
8
- (void)tapBtn:(UIButton *)btn {
NSLog(@"按钮点击...");
btn.enabled = NO;

dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(2.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
btn.enabled = YES;
});
}

通过 NSObject

1
2
+ (void)cancelPreviousPerformRequestsWithTarget:(id)aTarget selector:(SEL)aSelector object:(nullable id)anArgument;
- (void)performSelector:(SEL)aSelector withObject:(nullable id)anArgument afterDelay:(NSTimeInterval)delay;
1
2
3
4
5
6
7
8
9
10
11

- (void)tapBtn:(UIButton *)btn {
NSLog(@"按钮点击了...");
// 此方法会在连续点击按钮时取消之前的点击事件,从而只执行最后一次点击事件
[NSObject cancelPreviousPerformRequestsWithTarget:self selector:@selector(buttonClickedAction:) object:btn];
// 多长时间后做某件事情
[self performSelector:@selector(buttonClickedAction:) withObject:btn afterDelay:2.0];
}
- (void)buttonClickedAction:(UIButton *)btn {
NSLog(@"真正开始执行业务 - 比如网络请求...");
}

通过打印结果可知,如果连续点击多次,只会响应最后一次点击事件,并且是在设定的时间间隔后执行,这边设置的时间间隔是 2S。
缺点:会出现延时现象,并且需要对大量的UIButton做处理,工作量大,不方便。

通过Runtime交换UIButton的响应事件方法,从而控制响应事件的时间间隔。

  • 1 创建一个UIButton的分类,使用runtime增加public属性cs_eventInterval和private属性cs_eventInvalid。
  • 在+load方法中使用runtime将UIButton的-sendAction:to:forEvent:方法与自定义的cs_sendAction:to:forEvent:方法进行交换
  • 使用cs_eventInterval作为控制cs_eventInvalid的计时因子,用cs_eventInvalid控制UIButton的event事件是否有效果
1
2
3
4
5
6
@interface UIButton (Extension)

/** 时间间隔 */
@property(nonatomic, assign)NSTimeInterval cs_eventInterval;

@en
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

#import "UIButton+Extension.h"
#import <objc/runtime.h>

static char *const kEventIntervalKey = "kEventIntervalKey"; // 时间间隔
static char *const kEventInvalidKey = "kEventInvalidKey"; // 是否失效

@interface UIButton()

/** 是否失效 - 即不可以点击 */
@property(nonatomic, assign)BOOL cs_eventInvalid;

@end

@implementation UIButton (Extension)

+ (void)load {
// 交换方法
Method clickMethod = class_getInstanceMethod(self, @selector(sendAction:to:forEvent:));
Method cs_clickMethod = class_getInstanceMethod(self, @selector(cs_sendAction:to:forEvent:));
method_exchangeImplementations(clickMethod, cs_clickMethod);
}

#pragma mark - click

- (void)cs_sendAction:(SEL)action to:(id)target forEvent:(UIEvent *)event {
if (!self.cs_eventInvalid) {
self.cs_eventInvalid = YES;
[self cs_sendAction:action to:target forEvent:event];
[self performSelector:@selector(setCs_eventInvalid:) withObject:@(NO) afterDelay:self.cs_eventInterval];
}
}

#pragma mark - set | get

- (NSTimeInterval)cs_eventInterval {
return [objc_getAssociatedObject(self, kEventIntervalKey) doubleValue];
}

- (void)setCs_eventInterval:(NSTimeInterval)cs_eventInterval {
objc_setAssociatedObject(self, kEventIntervalKey, @(cs_eventInterval), OBJC_ASSOCIATION_RETAIN_NONATOMIC);
}

- (BOOL)cs_eventInvalid {
return [objc_getAssociatedObject(self, kEventInvalidKey) boolValue];
}

- (void)setCs_eventInvalid:(BOOL)cs_eventInvalid {
objc_setAssociatedObject(self, kEventInvalidKey, @(cs_eventInvalid), OBJC_ASSOCIATION_RETAIN_NONATOMIC);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

- (void)drawExpecialBtn{
UIButton *btn = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 200, 100)];
[btn setTitle:@"按钮点击" forState:UIControlStateNormal];
[btn setTitleColor:[UIColor redColor] forState:UIControlStateNormal];
[btn setTitleColor:[UIColor grayColor] forState:UIControlStateDisabled];
[btn setTitleColor:[UIColor blueColor] forState:UIControlStateHighlighted];
btn.center = self.view.center;
[btn addTarget:self action:@selector(tapBtn:) forControlEvents:UIControlEventTouchUpInside];
btn.cs_eventInterval = 2.0;
[self.view addSubview:btn];
}

- (void)tapBtn:(UIButton *)btn {
NSLog(@"按钮点击...");
}
  • UIButton的sendAction:to:forEvent:方法,实际上交互的是UIControl的sendAction:to:forEvent:方法,所以在使用·UIControl·或其·子类(比如UISlider)·的·sendAction:to:forEvent:·方法时会引起参数缺失的崩溃。

  • 因为在UIButton+Extension.m中的+load方法中交换了UIControl的sendAction:to:forEvent:方法,所以在使用UIControl或其子类(比如UISlider)的sendAction:to:forEvent:方法时会引起参数缺失的崩溃。可以将UIButton+Extension改成UIControl+Extension以避免此问题。

关于键盘弹出的通知细节以及cell的复用动画后面再补充,待续