美文网首页iOS功能实现
ios中表格下拉实现区头缩放效果

ios中表格下拉实现区头缩放效果

作者: 叶小合 | 来源:发表于2018-01-19 18:32 被阅读15次
    拖拽表格.gif

    其实这个效果非常效果,简单介绍下步骤:

    • 创建UITableView
    • 创建表格区头,并在HeadView上添加一张UIImageView
    • 实现滑动视图的滑动代理方法,根据scrollView.contentOffset,判断是否为向下拖拽,改变UIImageView的frame
    1. 创建UITableView,设置代理,遵守协议,并且实现对应代理方法。
        UITableView * tb = [[UITableView alloc]initWithFrame:CGRectMake(0, 0, KScreenWidth, KScreenHeight) style:UITableViewStylePlain];
        tb.delegate = self;
        tb.dataSource = self;
        [self.view addSubview:tb];
    
    

    实现代理方法

    - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section;
    {
        return 10;
    }
    
    - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath;
    {
        UITableViewCell * cell = [tableView dequeueReusableCellWithIdentifier:@"cell"];
        if (!cell) {
            cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"cell"];
        }
        cell.textLabel.text = [NSString stringWithFormat:@"第%ld行",(long)indexPath.row];
        return cell;
        
    }
    

    2.创建headView,并添加UIImageView

     // 创建区头view
        UIView * headView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, KScreenHeight, KHeight)];
        headView.backgroundColor = [UIColor whiteColor];
        
        //在headView上,添加图片视图
        self.myImageView = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, KScreenWidth, KHeight)];
        self.myImageView.image = [UIImage imageNamed:@"girl"];
        [headView addSubview:self.myImageView];
        
        // 把创建的headView赋值给tableHeaderView
        tb.tableHeaderView = headView;
    

    3.实现缩放效果

    - (void)scrollViewDidScroll:(UIScrollView *)scrollView
    {
        CGFloat offset = scrollView.contentOffset.y;
        if (offset<0) {//表格回到正常状态下,继续往下拽
            //        ABS(offsetY) 绝对值
            CGFloat totalFloat = KHeight + ABS(offset);
            CGFloat f = totalFloat/KHeight;
            //-(KScreenWidth*f-KScreenWidth)/2 不除以2感觉像是单方向缩放
    
            self.myImageView.frame = CGRectMake(-(f*KScreenWidth - KScreenWidth)/2, offset, f*KScreenWidth, totalFloat);
        }
    }
    

    代码简单,还是提供下git地址:
    表格下拉实现区头缩放效果

    相关文章

      网友评论

        本文标题:ios中表格下拉实现区头缩放效果

        本文链接:https://www.haomeiwen.com/subject/sqraoxtx.html