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

格瓦拉目前来说动画效果确实做的还比较好,虽然不是说很炫但做到精致,这次就模仿了它投票的模块。其实想到要实现它还是有很多方法,不过这次我还是采用了苹果自带控件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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值