文档章节

tableView视差滚动

quntion
 quntion
发布于 2016/01/29 22:37
字数 508
阅读 16
收藏 0

code:

//
//  SHParallaxCell.m
//  tableView视差滚动
//
//  Created by 邵瑞波 on 16/1/28.
//  Copyright © 2016年 邵瑞波. All rights reserved.
//

#import "SHParallaxCell.h"
#import "Masonry.h"

/*
    简化版中,scrollView 不是必须的。
 */

@interface SHParallaxCell()
@property (nonatomic, strong) UIScrollView *scrollView;  // 视差容器视图
@property (nonatomic, strong) UIImageView *imgView;      // 视图`图片展示`视图
@property (nonatomic, weak) UITableView *tableView;      // 父视图 tableView
@end

@implementation SHParallaxCell

- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {
    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
    
    if (self) {
        [self setupUI];
    }
    
    return self;
}

- (void)awakeFromNib {
    // Initialization code
    
    [self setupUI];
}

- (void)setSelected:(BOOL)selected animated:(BOOL)animated {
    [super setSelected:selected animated:animated];

    // Configure the view for the selected state
}

- (void)layoutSubviews {
    [super layoutSubviews];
    
    // 约束
}

// 记录 父视图 tableView
- (void)willMoveToSuperview:(UIView *)newSuperview {
    
    //NSLog(@"newSuperview=[%@]", newSuperview);
    
    UIView *view = newSuperview;
    
    // 查找 tableView
    while (view) {
        if ([view isKindOfClass:[UITableView class]]) {
            self.tableView = (UITableView *)view;
            // 添加 kvo 监听
            [self.tableView addObserver:self
                             forKeyPath:@"contentOffset"
                                options:NSKeyValueObservingOptionNew
                                context:nil];
            break;
        } else {
            view = view.superview;
        }
    }
}

- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSString *,id> *)change context:(void *)context {
//    NSLog(@"object=[%@]", object);
//    NSLog(@"cell.frame=[%@], change[@\"new\"]=[%@]", NSStringFromCGRect(self.frame) , change[@"new"]);
    
    CGPoint offSet = [change[@"new"] CGPointValue];
    CGFloat height = self.scrollView.bounds.size.height;
    
    offSet.y += height;
    CGFloat detal = offSet.y - self.frame.origin.y;
    CGFloat a = detal / height * 20.0;
    
    // 如果性能不行,这里可以考虑 `主线程异步`
    [self.imgView updateConstraints:^(MASConstraintMaker *make) {
        make.centerY.equalTo(self.scrollView.centerY).offset(a);
    }];
    
//    dispatch_async(dispatch_get_main_queue(), ^{
//        // 如果性能不行,这里可以考虑 `主线程异步`
//        [self.imgView updateConstraints:^(MASConstraintMaker *make) {
//            make.centerY.equalTo(self.scrollView.centerY).offset(a);
//        }];
//    });
}

// 设置 image
- (void)setImage:(UIImage *)image {
    if (!(self.imgView.image == image)) {
        self.imgView.image = image;
    }
}

#pragma mark - 初始化设置

- (void)setupUI {
    self.selectionStyle = UITableViewCellSelectionStyleNone;
    [self.contentView addSubview:self.scrollView];
    
    // 约束
    [self.contentView makeConstraints:^(MASConstraintMaker *make) {
        make.width.equalTo(self);
        make.height.equalTo(200);
    }];
    
    [self.scrollView makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(self.contentView).offset(8);
        make.left.equalTo(self.contentView).offset(8);
        make.right.equalTo(self.contentView).offset(-8);
        make.bottom.equalTo(self.contentView).offset(-8);
    }];
    
    [self.imgView makeConstraints:^(MASConstraintMaker *make) {
//        make.center.equalTo(self.scrollView);
        make.centerX.equalTo(self.scrollView.centerX);
        make.centerY.equalTo(self.scrollView.centerY);
        make.width.equalTo(self.scrollView);
        make.height.equalTo(240);
        
        self.scrollView.contentSize = CGSizeMake(0, 240);
    }];
    
    /*
        内容视图大小的size的高度为 200、image的高度为240、
        计算: 
            上下方的滚动范围均为 20
     */
}

#pragma mark - 懒加载控件

- (UIScrollView *)scrollView {
    if (!_scrollView) {
        _scrollView = [[UIScrollView alloc] init];
        
        _scrollView.userInteractionEnabled = NO;
        _scrollView.showsVerticalScrollIndicator = NO;
        _scrollView.showsHorizontalScrollIndicator = NO;
        _scrollView.bounces = NO;
        _scrollView.backgroundColor = [UIColor whiteColor];
        _scrollView.layer.cornerRadius = 8;
        _scrollView.clipsToBounds = YES;
        
        [_scrollView addSubview:self.imgView];
    }
    return _scrollView;
}

- (UIImageView *)imgView {
    if (!_imgView) {
        _imgView = [[UIImageView alloc] init];
        _imgView.contentMode = UIViewContentModeScaleAspectFill;  // 填充模式
//        _imgView.backgroundColor = [UIColor cyanColor];
    }
    return _imgView;
}

#pragma mark - 销毁 kvo 监听,否则会崩溃

- (void)dealloc {
    [self.tableView removeObserver:self forKeyPath:@"contentOffset"];
}

@end


© 著作权归作者所有

quntion
粉丝 4
博文 13
码字总数 5430
作品 0
海淀
私信 提问
ParallaxTableViewHeader

ParallaxTableViewHeader 是当 tableView 滚动时的时候 UITableView 头部视图的视差滚动视图。

叶秀兰
2014/12/05
381
0
渴切发布视差滚动解决方案"镨" pa.js

渴切开源发布视差滚动解决方案"镨" pa.js。代码简约,快速上手。pa.js 取自视差滚动(parallax scrolling)视差英文单词的前两个字母。是一款简约视差滚动js解决方案,采用了灵活的html属性来...

tyshymy
2013/10/07
3.7K
20
来自Nike Better World的视差滚动(Parallax Scrolling)特效 - 分享一些教程和灵感

日期:2011/11/03 来源:Queness 编译:GBin1.com 介绍 视差滚动特效(parallax scrolling)是web开发目前比较火的一个小技巧,我们需要特别感谢Nike Better World带给我们的这个超酷的设计。 ...

gbin1
2011/11/03
296
0
来自Nike Better World的视差滚动(Parallax Scrolling)特效 ...

日期:2011/11/03 来源:Queness 编译:GBin1.com 介绍 视差滚动特效(parallax scrolling)是web开发目前比较火的一个小技巧,我们需要特别感谢Nike Better World带给我们的这个超酷的设计。 ...

gbin1
2011/11/03
0
0
分享14个超酷的视差滚动效果网站

日期:2012-3-31 来源:GBin1.com Javascript视差滚动特效最早出现的时候使用多个不同的透明PNG背景图片叠放来实现,如果我们移动鼠标,将会以不同的速度移动不同层次上 的图片,产生层次感效...

gbin1
2012/03/31
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Spring Cloud中Hystrix 线程隔离导致ThreadLocal数据丢失

在Spring Cloud中我们用Hystrix来实现断路器,Zuul中默认是用信号量(Hystrix默认是线程)来进行隔离的,我们可以通过配置使用线程方式隔离。 在使用线程隔离的时候,有个问题是必须要解决的...

xiaomin0322
51分钟前
2
0
使用 Jenkins + Ansible 实现 Spring Boot 自动化部署101

本文首发于:Jenkins 中文社区 本文要点: 设计一条 Spring Boot 最基本的流水线:包括构建、制品上传、部署。 使用 Docker 容器运行构建逻辑。 自动化整个实验环境:包括 Jenkins 的配置,J...

Jenkins中文社区
56分钟前
4
0
springcloud配置中心和消息总线,学习,记录其中的问题

改造配置中心的客户端,接入消息总线 1.增加pom文件的引用 <?xml version="1.0" encoding="UTF-8"?><project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20......

夜中孤影
今天
3
0
gzip压缩

tar -zcvf gz包路径 被压缩的路径 tar -zcvf /home/xxx/test.tar.gz hello gz包的路径可以是 完整的也可以相对 , 被压缩的路径 不要全路径 不然压缩包里也会有全路径...

shzwork
今天
3
0
rancher-1

部署rancher 官方快速部署 https://www.cnrancher.com/quick-start/ 部署命令 mkdir /data/rancher -p# 建立存放rancher数据的目录sudo docker run -d --restart=unless-stopped -v /dat......

以谁为师
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部