zoukankan      html  css  js  c++  java
  • 第六十七篇、OC_UITableView head下拉图片放大的效果

    (一) 布置UITableview

    我们首先要通过设置UITableview的内容偏移 self.tableView.contentInset

    来为图片视图留出位置,这里我们的图片高度暂定为280

    const CGFloat contentInset = 280;
    
    @interface ViewController ()<UITableViewDelegate,UITableViewDataSource>
    
    @property (nonatomic, strong) UITableView *tableView;
    
    @property (nonatomic, strong) UIImageView *imageView;
    
    @end

    简单地创建一个tableView

        self.tableView = [[UITableView alloc] initWithFrame:self.view.bounds];
    
        _tableView.delegate = self;
    
        _tableView.dataSource = self;
    
        [self.view addSubview:_tableView];
    
        self.tableView.contentInset = UIEdgeInsetsMake(contentInset , 0, 0, 0);

    (二) 布置图片

       self.imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, - contentInset, self.view.bounds.size.width, contentInset)];
    
        _imageView.image = [UIImage imageNamed:@"image01.jpg"];
    
        [self.tableView addSubview:_imageView];
    
        _imageView.contentMode = UIViewContentModeScaleAspectFill;
    
        _imageView.clipsToBounds = YES;

    (三) 拖动事件的处理

    我们都知道,UITableview属于可以滑动的控件,所以它的父类是UIScrollView,所以我们就可以在滑动事件中做出一些处理。
    在滑动的时候,一旦判定是下拉状态,那么我们就要动态的改变图片的纵向位置和图片的高度(由于设置了contentMode,所以宽度自己会变化),最终实现所需要的效果。
    代码如下

    - (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    
        CGPoint point = scrollView.contentOffset;
    
        if (point.y < - contentInset) {
    
            CGRect rect  = self.imageView.frame;
    
            rect.origin.y = point.y;
    
            rect.size.height = - point.y;
    
            self.imageView.frame = rect;
        }
    
    }

    由于contentInset预设置的大小不同,可能会出现图片先下拉再放大和立即放大的两种效果.

  • 相关阅读:
    一键复制文本框内容代码、
    改掉这些坏习惯,你不再是菜鸟
    使用cookie保存页面登录信息
    二维数组转换成一维数组
    jQuery选择器总结
    cookie 和session 的区别详解
    PHP扫雷(转载)。
    PHP简易计算器方法2
    PHP简易计算器方法1
    业务逻辑的存储过程(添加学生的案例)(自动编号)
  • 原文地址:https://www.cnblogs.com/HJQ2016/p/6005932.html
Copyright © 2011-2022 走看看