源码

首页 » 归档 » 源码 » UITableView实现格瓦拉飞天投票模块-ios学习从入门到精通尽在姬长信

UITableView实现格瓦拉飞天投票模块-ios学习从入门到精通尽在姬长信

分享最热门的ios资讯

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

Github地址:https://github.com/ZFbaby/ZFVoteViewDemo(欢迎star~谢谢)

接着先上效果:

1471874745265739.gif

1471874747303152.gif

实现步骤:

* 数据回来的时候就要凭据数据算出每一行的高度而且算出总高,总高就是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

觉得好麻烦给个星star谢谢~

用意志战胜身体的惰性!

(0)

本文由 姬長信 创作,文章地址:https://blog.isoyu.com/archives/1072.html
采用知识共享署名4.0 国际许可协议进行许可。除注明转载/出处外,均为本站原创或翻译,转载前请务必署名。最后编辑时间为:8 月 23, 2016 at 11:59 上午

关键词:

热评文章

发表回复

[必填]

我是人?

提交后请等待三秒以免造成未提交成功和重复