(一) 布置UITableview

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

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

const CGFloat contentInset = ;

@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 , , , );

(二) 布置图片

   self.imageView = [[UIImageView alloc] initWithFrame:CGRectMake(, - 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预设置的大小不同,可能会出现图片先下拉再放大和立即放大的两种效果.

第六十七篇、OC_UITableView head下拉图片放大的效果的更多相关文章

  1. iOS----实现scrollView或者scrollView的子类下拉图片放大的效果

    代码是通过Tableview来说明的,用在其他情况下同样适用 - (void)viewDidLoad { [super viewDidLoad]; _imageview = [[UIImageView ...

  2. iOS tableView下拉图片放大

    事实上这个效果,本质上就是在你tableView下拉 造成offset时候. 保持你顶部图片的y坐标点还停留在下拉时屏幕的顶点(offset), 而图片的长度变为原始的height长度-(offset ...

  3. iOSUITableView头部带有图片并且下拉图片放大效果

    最近感觉UITableview头部带有图片,并且下拉时图片放大这种效果非常炫酷,所以动手实现了一下,效果如下图: 1.gif 实现原理很简单,就是在UITableview上边添加一个图片子视图,在ta ...

  4. iOS下拉图片放大

    效果图 开始简单的代码过程 其实思路很简单 就是 让tableView偏移 一图片的高度,然后在把图片添加到tableView中,然后再监听didScrollView,在里面改变图片的frame - ...

  5. jQuery下拉友情链接美化效果代码分享

    这篇文章主要介绍了jQuery下拉友情链接美化效果,很实用的代码,推荐给大家,有需要的小伙伴可以参考下. 文实例讲述了jQuery下拉友情链接美化效果,jQuery下拉友情链接美化代码是一款基于jQu ...

  6. 通过html和css做出下拉导航栏的效果

    通过观察了百度的首页,对于更多产品一栏,觉得可以不涉及JS便可写出下拉导航栏的效果 1.先设计出大体的框架 <div class="nav"> <ul> & ...

  7. jQuery超酷下拉插件6种效果演示

    原始的下拉框很丑啦, 给大家一款jQuery超酷下拉插件6种效果 效果预览 下载地址 实例代码 <div class="container"> <section ...

  8. 使用 CSS overscroll-behavior 控制滚动行为:自定义下拉刷新和溢出效果

    CSS 的新属性 overscroll-behavior 允许开发者覆盖默认的浏览器滚动行为,一般用在滚动到顶部或者底部. 背景 滚动边界和滚动链接(boundary & chaining) ...

  9. 高仿IOS下拉刷新的粘虫效果

    最近看需要做一款下拉刷新的效果,由于需要和Ios界面保持一致,所以这用安卓的方式实现了ios下的下拉刷新的粘虫效果. 最新的安卓手机版本的QQ也有这种类似的效果,就是拖动未读信息的那个红色圆圈,拖动近 ...

随机推荐

  1. HDU 5583 Kingdom of Black and White 水题

    Kingdom of Black and White Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showpr ...

  2. hdu4085 Peach Blossom Spring 斯坦纳树,状态dp

    (1)集合中元素表示(1<<i), i从0开始 (2)注意dp[i][ss] = min(dp[i][ss], dp[i][rr | s[i]] + dp[i][(ss ^ rr) | s ...

  3. C++ CopyFile

    复制文件 关键点 CopyFile The CopyFile function copies an existing file to a new file. The CopyFileEx functi ...

  4. 怎样用JS来添加CSS样式

    方法: document.getElementById("xx").style.xxx中的全部属性是什么 盒子标签和属性对比 CSS语法(不区分大写和小写) JavaScript语 ...

  5. Golang学习 - strings 包

    ------------------------------------------------------------ strings 包与 bytes 包中的函数用法基本一样,不再赘述. 只对 R ...

  6. The Kernel Newbie Corner: Kernel Debugging with proc "Sequence" Files--Part 3

    转载:https://www.linux.com/learn/linux-career-center/44184-the-kernel-newbie-corner-kernel-debugging-w ...

  7. sharepreferce支持boolean,string类型

    public class SharePrefersUtils { private static final String name="cogi"; public static bo ...

  8. Timed Code

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat=&qu ...

  9. cplusplus系列>algorithm>std::for_each

    http://www.cplusplus.com/reference/algorithm/for_each/ 对一个序列应用函数.可以是函数指针,或者是functor. // for_each exa ...

  10. ReactNative学习-webView

    在软件内部打开一个网页--不喜欢它没有办法返回,还需要再添加返回按钮== import React from 'react'; import { AppRegistry, Component, Scr ...