ios客户端学习－cell特效

最新推荐文章于 2022-05-10 22:50:52 发布

遛马

最新推荐文章于 2022-05-10 22:50:52 发布

阅读量288

点赞数

分类专栏： iOS初学习文章标签： cell滑动 iOS uitableviewcell uitableview

iOS初学习专栏收录该内容

79 篇文章 0 订阅

订阅专栏

转载自：http://www.tuicool.com/articles/mmEjYj6

"今天在CocoaChina上看到一个非常好的效果，作者:juvham 代码实力强劲，用了很多高效的方法，但是注释太少。。所以我在他的基础上分离出了我最喜欢的一个效果，改了一部分代码，加上注释，希望大家能喜欢。。先上我分离出来的效果图:"

##这个效果是如何实现的 - 首先你需要创建一个UITableView

- 然后自定义一个UITableViewCell,例:myCell.h

- 在myCell.h中创建几个成员变量:

/**
*  图片imgView
*/
@property (nonatomic, strong) UIImageView * pictureView;

/**
*  标题label
*/
@property (nonatomic, strong) UILabel * titleLabel;

/**
*  内容Label
*/
@property (nonatomic, strong) UILabel * littleLabel;

实现它们

- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
    if ([super initWithStyle:style reuseIdentifier:reuseIdentifier]) {


        //取消选中效果
        self.selectionStyle = UITableViewCellSeparatorStyleNone;

        //裁剪看不到的
        self.clipsToBounds = YES;

        //pictureView的Y往上加一半cellHeight 高度为2 * cellHeight，这样上下多出一半的cellHeight
        _pictureView = ({
            UIImageView * picture = [[UIImageView alloc]initWithFrame:CGRectMake(0, -cellHeight/2, kWidth, cellHeight * 2)];

            picture.contentMode = UIViewContentModeScaleAspectFill;

            picture;
        });
        [self.contentView  addSubview:_pictureView];

        _titleLabel = ({
            UILabel * titleLabel = [[UILabel alloc]initWithFrame:CGRectMake(0, cellHeight / 2 - 30, kWidth, 30)];

            titleLabel.font = [UIFont boldSystemFontOfSize:16];

            titleLabel.textAlignment = NSTextAlignmentCenter;

            titleLabel.textColor = [UIColor whiteColor];

            titleLabel.text = @"标题";

            titleLabel;
        });
        [self.contentView addSubview:_titleLabel];

        _littleLabel = ({
            UILabel * littleLabel = [[UILabel alloc]initWithFrame:CGRectMake(0, cellHeight / 2 + 30, kWidth, 30)];

            littleLabel.font = [UIFont systemFontOfSize:14];

            littleLabel.textAlignment = NSTextAlignmentCenter;

            littleLabel.textColor = [UIColor whiteColor];

            littleLabel.text = @"xxxxxxxxxxx";

            littleLabel;

        });
        [self.contentView addSubview:_littleLabel];



    }
    return self;

}

然后我们需要一个方法，让cell上的_pictureView得到image

- (void)setImg:(UIImage *)img
{
    self.pictureView.image = img;
}

- 在willDisplayCell方法中处理数据，能优化滑动性能

- (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath
{
    MyCell * myCell = (MyCell *)cell;

    [myCell setImg:_dataArray[indexPath.row]];

    [myCell cellOffset];
}

这里出现的[myCell cellOffset]是后面再讲的cell位移方法，这里先当作没看到。。

数据都处理完了，现在来讲重点的滑动方法

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    // visibleCells 获取界面上能显示出来了cell
    NSArray<MyCell *> *array = [self.tableView visibleCells];

    //enumerateObjectsUsingBlock 类似于for，但是比for更快
    [array enumerateObjectsUsingBlock:^(MyCell * _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {

        [obj cellOffset];

    }]; 
}

这里的方法很有用，可以记一下，而enumerateObjectsUsingBlock有人测试过，会比for快4ms左右，要是你对它有更好的理解，欢迎评论告诉我。

现在来讲cellOffset方法

- (CGFloat)cellOffset
{
    /*
    - (CGRect)convertRect:(CGRect)rect toView:(nullable UIView *)view;
    将rect由rect所在视图转换到目标视图view中，返回在目标视图view中的rect
    这里用来获取self在window上的位置
    */
    CGRect toWindow = [self convertRect:self.bounds toView:self.window];

    //获取父视图的中心
    CGPoint windowCenter = self.superview.center;

    //cell在y轴上的位移  CGRectGetMidY之前讲过,获取中心Y值
    CGFloat cellOffsetY = CGRectGetMidY(toWindow) - windowCenter.y;

    //位移比例
    CGFloat offsetDig = 2 * cellOffsetY / self.superview.frame.size.height ;

    //要补偿的位移
    CGFloat offset =  -offsetDig * cellHeight/2;

    //让pictureViewY轴方向位移offset
    CGAffineTransform transY = CGAffineTransformMakeTranslation(0,offset);
    self.pictureView.transform = transY;

    return offset;
}