仿Clear纯手势操作的UITableView

前言

在Clear应用中,用户无需任何按钮,,纯靠不同的手势就可以完成对ToDoItem的删除、完成、添加、移动。具体来说,功能上有左划删除,右划完成,点击编辑,下拉添加、捏合添加、长按移动。这里将这些功能实现并记录。

左划删除与右划完成

所谓的左右滑动,就是自定义一个cell然后在上面添加滑动手势。在处理方法中计算偏移量,如果滑动距离超过cell宽度一半,就删除它,或者是为文本添加删除线等来完成它;如果没有超过一半,那么就用动画把cell归位。 效果图如下:

关键代码如下:

– (void)handlePan:(UIPanGestureRecognizer *)recognizer {canResignFirstResponder]) {[self.textField resignFirstResponder];}//计算偏移量CGPoint trans = [recognizer translationInView:self];) / (/ 2);switch (recognizer.state) {case UIGestureRecognizerStateBegan:= self.center;break;case UIGestureRecognizerStateChanged:= alpha;= alpha;= CGPointMake(+ trans);<= -/ 2) {self.deleteOnDragRelease = YES;= [UIColor redColor];} else {self.deleteOnDragRelease = NO;= [UIColor whiteColor];}>= / 2) {self.completeOnDragRelease = YES;= [UIColor greenColor];} else {self.completeOnDragRelease = NO;= [UIColor whiteColor];}break;case UIGestureRecognizerStateEnded:== NO) {[UIView animateWithDuration:0.3f animations:^{;}];} else {if ([self.delegate respondsToSelector:@selector(toDoItemDeleted:)]) {[];}}) {= NO;NSMutableAttributedString *itemText = [[NSMutableAttributedString alloc] initWithString:];[itemText addAttribute:NSStrikethroughColorAttributeName value:[UIColor whiteColor] range:NSMakeRange(0, itemText.length)];[itemText addAttribute:NSStrikethroughStyleAttributeName value:[NSNumber numberWithInt:kCTUnderlineStyleSingle] range:NSMakeRange(0, itemText.length)];= itemText;= YES;}break;default:break;}}下拉添加

类似于下拉刷新,这里监听scrollview的滑动,当scrollview顶部继续往下滑动,即contentOffset.y < 0时便在最顶端新添加一个cell,为其添加适当的透明度和比例变换。当用户松开手指时,根据偏移量计算出是否应该添加上新的cell,如果超过一定值,则通知代理添加新item。 效果:

关键代码:

– (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView {//when user pull down while at the top of the table, set _pullDownInProgress to YES_pullDownInProgress = (scrollView.contentOffset.y <= 0.0f);if (_pullDownInProgress) {//add placeholder[_tableView insertSubview:_placeholderCell atIndex:0];}}- (void)scrollViewDidScroll:(UIScrollView *)scrollView {if (_pullDownInProgress && scrollView.contentOffset.y <= 0) {_placeholderCell, ROW_HEIGHT);_placeholderCell> ROW_HEIGHT ? @”Release to Add New Item” : @”Pull to Add New Item”;_placeholderCell.alpha = MIN(1.0f, -scrollView.contentOffset.y / ROW_HEIGHT);NSLog(@”%f”, -scrollView.contentOffset.y / ROW_HEIGHT);} else {_pullDownInProgress = NO;}}- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate {//check whether the user pull down far enoughif (_pullDownInProgress && -scrollView.contentOffset.y > ROW_HEIGHT) {//add a new item[_tableView.dataSource itemAdded];} else {_pullDownInProgress = NO;[_placeholderCell removeFromSuperview];}}捏合添加

通过捏合手势添加cell应该算是相当优秀的设计了,配合一定的动画,可以让效果非常逼真. 对于捏合,API中仅仅会给出scale和velocity两个数值。我们这里需要的是获得两个碰触点的位置,分清上下手指,并对每个手指各自的方向获取其移动距离,这期间让两手指操纵的两个cell以及各自一边的cells都向两边移动,同时在中间展露出placeholder cell。最后,同样的,根据距离决定是否添加该cell。 应用中还有一道判断——如果两个手所在的cells差值不为一,即“跨行捏合”,则不响应这样的操作。我这里没有加上这个限制,而是取中间值的方法,这样操作(测试)起来更方便。 效果图:

注:图中最后下面一片空白的原因是,这里为了防止在编辑时键盘遮挡而向上移动了UITableView,但是模拟器中没有露出键盘,真机时(或者设置模拟器键盘后)不会出现这种现象。 关键代码: 首先为了方便得分清上下手指,我们定义一个结构体:

typedef struct _PinchTouchPoints {CGPoint upper;CGPoint lower;} PinchTouchPoints;到尽头,也许快乐,或有时孤独,如果心在远方,

仿Clear纯手势操作的UITableView

相关文章:

你感兴趣的文章:

标签云: