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

Cocoa开发者社区 · 公众号 · ios · 2016-08-24 08:49

正文

▲点击上方“CocoaChina”关注即可免费学习 iOS 开发

daizeng3344投稿

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

Github地址：https://github.com/ZFbaby/ZFVoteViewDemo

接着先上效果：

实现步骤：

数据回来的时候就要根据数据算出每一行的高度并且算出总高，总高就是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;
}];
}];
}];

说到这核心的东西也是差不多了，当然很有很多细节在里边，也还有很多需要完善的地方。

以上只是个人的对该模块按自己的想法和思路实现，最后还要感谢GraphKit作者，demo中部分绘图动画功能引用至它的方法及进行了小部分修改。

Github地址：https://github.com/ZFbaby/ZFVoteViewDemo

END

▼

小编推荐：[掘金]是一个高质量的技术社区，从 Swift 到 React Native，性能优化到动效源码，让你不错过 iOS 开发的每一个技术干货。长按图片二维码识别或者各大应用市场搜索「掘金」，技术干货尽在掌握中。

微信号：CocoaChinabbs

▲长按二维码“识别”关注即可免费学习 iOS 开发

月薪十万、出任CEO、赢娶白富美、走上人生巅峰不是梦

--------------------------------------

商务合作QQ：2408167315

投稿邮箱：[email protected]