iOS功能实现

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

2018-01-19  本文已影响15人  叶小合
拖拽表格.gif

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

  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地址:
表格下拉实现区头缩放效果

上一篇下一篇

猜你喜欢

热点阅读