UITableView实现格瓦拉飞天投票模块

本文主要是介绍UITableView实现格瓦拉飞天投票模块，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

转载自：http://www.cocoachina.com/ios/20160823/17410.html?utm_source=tuicool&utm_medium=referral

格瓦拉目前来说动画效果确实做的还比较好，虽然不是说很炫但做到精致，这次就模仿了它投票的模块。其实想到要实现它还是有很多方法，不过这次我还是采用了苹果自带控件UITableView简简单单来实现它，再次认识它的强大一面。

Github地址：https://github.com/ZFbaby/ZFVoteViewDemo（欢迎star~谢谢）

接着先上效果：

实现步骤：

* 数据回来的时候就要根据数据算出每一行的高度并且算出总高，总高就是tableview的高度

  -(void)setTitle:(NSString *)title 
 { 
      //根据数据算出每行cell的实际高度 
      _title = title; 
      CGFloat title_H = [title boundingRectWithSize:CGSizeMake(ZFVoteTableViewMax_W - percentLable_W - thumbUpView_WH - 85, 100) 
      options:NSStringDrawingUsesFontLeading|NSStringDrawingUsesLineFragmentOrigin 
      attributes:@{NSFontAttributeName:[UIFont systemFontOfSize:15.0]} 
      context:nil].size.height; 
      self.voteCell_H = title_H + 30; 
 } 
 

* 设置cell的内边距离及x值，利用setFrame：方法改变原来父类算好的frame实现cell有内边距离，达到实现相邻两条cell不连接在一起的效果

  -(void)setFrame:(CGRect)frame{ 
      if  (frame.size.width == ZFVoteTableViewMax_W) { //初始化就设置cell的内边距 
          frame = UIEdgeInsetsInsetRect(frame, 
          UIEdgeInsetsMake(ZFVoteCellTopBottomInset, 
          ZFVoteCellLeftRightInset, 
          ZFVoteCellTopBottomInset, 
          ZFVoteCellLeftRightInset)); 
      } else { //重复利用的时候改变它的x值 
          frame.origin.x += ZFVoteCellLeftRightInset; 
      } 
      [ super  setFrame:frame]; 
 } 
 

* 创建投票主控件并添加到cell上，投票主控件就是所有要展示动画效果的控件集合，有cell了为什么还需要它，其实说白了它就是打酱油的，只是为了呈现动画的一种载体，在看下面一条就了解了

  -(void)initSubviews{ 
      ZFPercentBar *bar = [[ZFPercentBar alloc]initWithFrame:self.bounds]; 
      self.bar = bar; 
      [self addSubview:bar]; 
      UIImageView *thumbUpView = [[UIImageView alloc]init]; 
      self.thumbUpView = thumbUpView; 
      [self addSubview:thumbUpView]; 
      UILabel *percentLable = [UILabel labelWithFont:[UIFont systemFontOfSize:13.0] 
      textColor:[UIColor lightGrayColor] 
      textAlignment:NSTextAlignmentRight 
      numberOfLines:1]; 
      self.percentLable = percentLable; 
      [self addSubview:percentLable]; 
      UILabel *voteLabel = [UILabel labelWithFont:[UIFont systemFontOfSize:15.0] 
      textColor:[UIColor blackColor] 
      textAlignment:NSTextAlignmentLeft 
      numberOfLines:0]; 
      self.voteLabel = voteLabel; 
      [self addSubview:voteLabel]; 
 } 
 

* 每次点击选择一个cell的时候创建个投票主控件，然后隐藏被选择的cell，改变主控件的形变添加阴影效果使它看起来有浮动效果，改变主控件坐标到当前tableView的第一行cell的位置，在利用tableview本身自带的功能交换行实现的方法就完成了cell之间的交换效果

  ZFVoteView *voteView = [[ZFVoteView alloc]initWithFrame:selectedCell.frame 
 voteView:voteModel]; 
 voteView.layer.masksToBounds = NO; 
 [self.tableView addSubview:voteView]; 
 self.tableView.userInteractionEnabled = NO; 
 [UIView animateWithDuration:0.4 
 animations:^{ 
      voteView.transform = CGAffineTransformMakeScale(1.05, 1.05); 
 } 
 completion:^(BOOL finished)  
 { 
          [UIView animateWithDuration:0.7 
          animations:^{ 
              [self.list removeObject:voteModel]; 
              [self.list insertObject:voteModel atIndex:0]; 
              [self.tableView moveRowAtIndexPath:indexPath 
              toIndexPath:[NSIndexPath indexPathForRow:0 inSection:0]]; 
              voteView.centerY = selectedCell.centerY; 
              voteView.centerX = selectedCell.centerX; 
          }completion:^(BOOL finished) { 
              [UIView animateWithDuration:0.4 
          animations:^{ 
              voteView.transform = CGAffineTransformIdentity; 
          }completion:^(BOOL finished) { 
              [voteView removeFromSuperview]; 
              self.tableView.userInteractionEnabled = YES; 
          }]; 
      }]; 
 }]; 
 