首页 > 代码库 > UITableView实现格瓦拉飞天投票模块-b
UITableView实现格瓦拉飞天投票模块-b
格瓦拉目前来说动画效果确实做的还比较好,虽然不是说很炫但做到精致,这次就模仿了它投票的模块。其实想到要实现它还是有很多方法,不过这次我还是采用了苹果自带控件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.framevoteView:voteModel];voteView.layer.masksToBounds = NO;[self.tableView addSubview:voteView];self.tableView.userInteractionEnabled = NO;[UIView animateWithDuration:0.4animations:^{ 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
UITableView实现格瓦拉飞天投票模块-b
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。