Parallax:视差视图

最近用tableView写了一个有视差滚动效果的小demo,在这儿给大家分享一下,希望对大家有帮助。

在tableView的自定义cell上加了一个scrollView,,在scrollView上面加了一个imageView,实现视差滚动(parallax)效果。

首先, 打开xcode,创建一个Single View Application的工程。

在工程里创建一个tableViewCell类,命名为ImageTableViewCell。

之后导入图片资源。

接下来就是写代码了。 ViewController.m

() <UITableViewDataSource, UITableViewDelegate>@property (nonatomic, retain) UITableView *tableView;@property (nonatomic, retain) NSMutableArray *tableArray;- (void)viewDidLoad {[super viewDidLoad];self.tableArray = [NSMutableArray array];[self getDataFromLocal];[self createVCTableView];}#pragma mark – tableView 代理方法- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{ImageTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@”imageCell”];NSString *imageName = self.tableArray[indexPath.row];[cell takeDataForCell:imageName];return cell;}- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{;}- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{return SCREEN_HEIGHT/3;}- (void)scrollViewDidScroll:(UIScrollView *)scrollView{; i++) {NSIndexPath *index = [NSIndexPath indexPathForRow:i inSection:0];ImageTableViewCell *imageCell = (ImageTableViewCell *)[self.tableView cellForRowAtIndexPath:index];> 0) {if (i > 3) {[imageCell.scrollView setContentOffset:CGPointMake(0, (scrollView.contentOffset.y -SCREEN_HEIGHT/3*(i-3))/ 2.2)];}else{[imageCell.scrollView setContentOffset:CGPointMake(0, scrollView.contentOffset.y / 2.5)];}}}}#pragma mark – 创建方法/// 创建TableView- (void)createVCTableView{, ) style:UITableViewStylePlain];= self;= self;= NO;= NO;[self.tableView registerClass:[ImageTableViewCell class] forCellReuseIdentifier:@”imageCell”];[self.view addSubview:_tableView];}/// 准备数据- (void)getDataFromLocal{for (int i = 0; i < 18; i++) {NSString *imageName = [NSString stringWithFormat:@”%d.jpg”, i];[self.tableArray addObject:imageName];}[self.tableView reloadData];}- (void)didReceiveMemoryWarning {[super didReceiveMemoryWarning];// Dispose of any resources that can be recreated.}

ImageTableViewCell.h的代码:

(nonatomic, retain) UIScrollView *scrollView;- (void)takeDataForCell:(NSString *)imageName;@end

ImageTableViewCell.m的代码:

(nonatomic, retain) UIImageView *cellImageView;- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier{if (self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]) {[self createSomeThingInCell];}return self;}/// 初始化视图- (void)createSomeThingInCell{self.cellImageView = [[UIImageView alloc] init];self.scrollView = [[UIScrollView alloc] init];[];= CGSizeMake();= NO;[];}/// 给视图赋值- (void)takeDataForCell:(NSString *)imageName{UIImage *image = [UIImage imageNamed:imageName];[self.cellImageView setImage:image];}- (void)layoutSubviews{[super layoutSubviews];_cellImageView, [UIScreen mainScreen]);_scrollView, [UIScreen mainScreen]/3);}- (void)awakeFromNib {// Initialization code}- (void)setSelected:(BOOL)selected animated:(BOOL)animated {[super setSelected:selected animated:animated];// Configure the view for the selected state}

到这里就结束啦~写的不是很完善,有好的建议可以告诉我哦~

图片资源链接地址:

年轻是我们唯一拥有权利去编织梦想的时光

Parallax:视差视图

相关文章:

你感兴趣的文章:

标签云: