zoukankan      html  css  js  c++  java
  • iOS开发-UITableView滑动视差

    视差滚动是指让多层背景以不同的速度移动,形成立体的运动效果,在Web上应用的比较多,App中倒是见的相对比较少,主要在UITableView中的应用的比较多,尤其是当整个UITableViewCell的背景是图片的时候,描述内容较少,滑动视差可以增强视觉效果,可以考虑使用,先来简单的看一下效果:

    实现起来也比较简单,UITableView定义:

    #pragma mark - UITablViewDataSource
    -(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{
        return 1;
    }
    
    -(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
        return [self.dataSource count];
    }
    
    -(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
        MainTableViewCell *mainCell=[tableView dequeueReusableCellWithIdentifier:CELLIDENTIFIER forIndexPath:indexPath];
        NSString *desc=[NSString stringWithFormat:@"FlyElephant-%ld",indexPath.row];
        [mainCell setBackImage:self.dataSource[indexPath.row] description:desc];
        return mainCell;
    }
    #pragma mark - UITableViewDelegate
    -(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
        return 150;
    }
    

    滑动的时候修改单元格偏移量:

    #pragma mark - UIScrollViewDelegate
    -(void)scrollViewDidScroll:(UIScrollView *)scrollView{
        CGPoint offset=self.tableView.contentOffset;
        for (MainTableViewCell *cell in self.tableView.visibleCells) {
            //方式1
    //        [cell setImagOffset:offset tableView:self.tableView];
            //方式2
            [cell setAdjustOffset:(cell.frame.origin.y-offset.y)];
        }
    }
    

     MainTableViewCell定义:

    @interface MainTableViewCell : UITableViewCell
    
    -(void)setBackImage:(NSString *)imageName description:(NSString *)desc;
    
    //视差滑动方式1
    -(void)setImagOffset:(CGPoint)contentOffset tableView:(UITableView *)tablView;
    
    //视差滑动方式2
    -(void)setAdjustOffset:(CGFloat)offset;
    
    @end
    

    滑动视差调用方式:

    -(void)setImagOffset:(CGPoint)contentOffset tableView:(UITableView *)tablView{
        //偏移量
        CGFloat cellOffset = self.frame.origin.y - contentOffset.y;
        // 偏移量+单元格高度/tableview高度+单元格高度
        CGFloat percent = (cellOffset+self.frame.size.height)/(tablView.frame.size.height+self.frame.size.height);
        //偏移比例(0-1)
        CGFloat extraHeight = self.frame.size.height*OFFSET_RATE;
    
        CGRect frame=self.backImageView.frame;
        frame.origin.y=extraHeight*percent;
        self.backImageView.frame=frame;
    }
    
    -(void)setAdjustOffset:(CGFloat)offset{
        CGRect frame = self.backImageView.frame;
        frame.origin.y = (offset / 15.0);
        self.backImageView.frame = frame;
    }
    

    实现起来比较简单,网上有各种各样的版本,这两种的方式算是最简单的实现~

  • 相关阅读:
    vue数据传递--我有特殊的实现技巧
    解决Vue引入百度地图JSSDK:BMap is undefined 问题
    vue-quill-editor-upload : 实现vue-quill-editor上传图片到服务器
    vue.js的<slot>
    实例化vue发生了什么?(详解vue生命周期)
    vue2实现自定义样式radio单选框
    vue-lazyload插件
    Axios 使用时遇到的问题
    Vue组件开发 -- Markdown
    Javascript系列——对象元素的数组去重实现
  • 原文地址:https://www.cnblogs.com/xiaofeixiang/p/5152828.html
Copyright © 2011-2022 走看看