阿毛的蛋疼地

UIScrollView 表情选择的实现

11 Nov 2011

前几天做即时通上表情选择的功能，结果不幸用了 Windows 上的老套路，思路错步步错，越写越感觉进入了死胡同，白白浪费了一下午，然后突然开窍，轻松解决，有必要记录下相关的细节。

情景很简单，做一个选择表情的界面，功能无非是点击弹出一个 ScrollView，上面排列一些表情，然后通过拖曳或者点击的方式选择表情。具体可以参考 iPad 版 QQ 的操作。

一开始的思路很 Windows 化，既然 UIView 有 touchesBegan 相关的 4 种事件，基本可以映射成 Windows 上的 MouseDown，MouseMove 和 MouseUp，那么很简单，在 ScrollView 的 SuperView 上响应这四个事件即可：当 touchesBegan 的时候通过 hitTest 找到 ScrollView 中的相应表情，并生成其拷贝，然后在 touchesMoved 的时候不断改变这份拷贝的位置，最后在 touchEnded 的时候销毁相应拷贝，并发送选择的通知给接收端即可。但实施的时候碰到了各种问题：

  • ScrollView 是当前 View 中的 First Responder，也就意味着在 ScrollView 内部触发的事件都会优先发给它，由他直接处理并丢弃。解决这个问题的方法很简单，自定义一个类，继承 ScrollView 并在响应完相应触摸事件之后将事件传递给它的 NextResponder，也就是它的 SuperView 处理。
  • SrcollView 的 touchesMoved 事件实际上并不被 ScrollView 直接处理！纳尼？从自己试验和 stackoverflow 上的一些问答可以知道 ScrollView 并不直接处理 touchesMoved 事件，换而言之，即使你继承了 ScrollView 重写相应方法还是无效。

于是貌似陷入了死胡同。不过在查阅各种资料的时候，突然发现了一种特别的做法 (其实应该算是 iOS 下比较常规的做法，不过从 Windows 过来的童鞋可能会觉得比较奇怪)：自定义 ScrollView 内的表情，以它为 First Responder 去响应触摸事件即可。看了 DEMO，突然回忆起一早看的官网上看到的一段话，恍然大悟：

触摸信息有时间和空间两方面，时间方面的信息称为阶段（phrase），表示触摸是否刚刚开始、是否正在移动或处于静止状态，以及何时结束—也就是手指何时从屏幕举起（参见图 3-1）。触摸信息还包括当前在视图或窗口中的位置信息，以及之前的位置信息（如果有的话）。当一个手指接触屏幕时，触摸就和某个窗口或视图关联在一起，这个关联在事件的整个生命周期都会得到维护。如果有多个触摸同时发生，则只有和同一个视图相关联的触摸会被一起处理。类似地，如果两个触摸事件发生的间隔时间很短，也只有当它们和同一个视图相关联时，才会被处理为多触击事件。

和 Windows 不同，由于 iOS 设备的特殊性，在事件处理方面简单了很多，从 Windows 的角度来说，iOS 上的一个触摸事件基本等同于 Windows 上对某个控件触发某种消息后进行 Capture 直到最终 ReleaseCapture 这么一个过程，只要一个事件开始就不会做 HitTest，事件是和刚开始确定的 First Responder 所关联。这样一来实现拖曳就非常简单，主要自定义一个继承自 UIImageView 或者 UIButton 用于表情显示的控件，并重写其触摸事件的实现即可：

触摸事件发生：初始化拖曳状态，对表情对象进行拷贝并显示：

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    scrollView.scrollEnabled = NO;
    isDraging = NO;
    // 生成自己的 clone
    self.clone = [Emoticon getEmoticonFromIndex:iconIndex];
    CGPoint newLocation = [[touches anyObject]         locationInView:parentView];
    CGFloat startX = newLocation.x - 128 / 2;
    CGFloat startY = newLocation.y - 128 / 2;
    CGRect rect = CGRectMake(startX, startY, 128, 128);
    [clone setFrame:rect];
    [parentView addSubview:clone];
    clone.center = newLocation;
    [super touchesBegan:touches withEvent:event];
}

移动中：移动拷贝对象，并设置拖曳状态 (设置这个状态是为了区分点击事件和拖曳事件)

- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
    isDraging = YES;
    CGPoint newLocation = [[touches anyObject] locationInView:parentView];
    clone.center = newLocation;
    [super touchesMoved:touches withEvent:event];
}

触摸事件结束：先响应父类事件 (区分点击和拖曳事件)，设置拖曳状态，并发送通知

- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
    [super touchesEnded:touches withEvent:event];
    CGPoint newLocation  = [[touches anyObject] locationInView:parentView];
    // 如果不在当前 ScrollView 内就认为已经选了
    CGRect scrollViewRect = scrollView.frame;
    if (!CGRectContainsPoint(scrollViewRect, newLocation))
    {
        [self postNotification:YES];
    }
    [self cleanClone];
}

这样一个简单的表情拖曳的功能就算完成了，详细的代码可以参考这里：点此下载 。(XCode4.2)

Related Posts