最近负责公司项目个人中心的项目模块研发,首页是一个头部图片可以拉伸放大缩小效果的tableViewHeader,今天这个demo和教程我增加了模糊效果和头像缩小效果。具体效果如图:

  如果这个效果是想要学习的可以去这里下载我的demo:http://pan.baidu.com/s/1qXeFR0g

  开发这类效果的TableViewHeader一般是通过监听scrollViewDidScroll:代理方法知道contenOffset值的变化,从而通过这个值的变化调整头部背景图的大小或者其他图片的大小(如本例子的头像视图)。

  重点代码如下:

- (void)updateSubViewsWithScrollOffset:(CGPoint)newOffset {
    CGFloat destinaOffset = -;
    CGFloat startChangeOffset = -self.scrollView.contentInset.top;
    newOffset = CGPointMake(newOffset.x, newOffset.y < startChangeOffset ? startChangeOffset : (newOffset.y > destinaOffset ? destinaOffset : newOffset.y));

    CGFloat subviewOffset = self.frame.size.height-; // 子视图的偏移量
    CGFloat newY = -newOffset.y-self.scrollView.contentInset.top;
    CGFloat d = destinaOffset-startChangeOffset;
    CGFloat alpha = -(newOffset.y-startChangeOffset)/d;
    CGFloat imageReduce = -(newOffset.y-startChangeOffset)/(d*);
    self.subTitleLabel.alpha = alpha;
    self.titleLabel.alpha = alpha;
    self.frame = CGRectMake(, newY, self.frame.size.width, self.frame.size.height);
    self.backImageView.frame = CGRectMake(, -)*(-alpha), self.backImageView.frame.size.width, self.backImageView.frame.size.height);

    CGAffineTransform t = CGAffineTransformMakeTranslation(,(subviewOffset--alpha));
    _headerImageView.transform = CGAffineTransformScale(t,
                                                        imageReduce, imageReduce);

    self.titleLabel.frame = CGRectMake(, -alpha), self.frame.size.width, self.frame.size.height*0.2);
    self.subTitleLabel.frame = CGRectMake(, -alpha), self.frame.size.width, self.frame.size.height*0.1);

}

  在我这个demo中我没有通过代理方法scrollViewDidScroll:获取contenOffset的值,而是用kvo观察contenOffset值的变化然后调用上面这个方法达到效果,效果和通过scrollViewDidScroll:代理方法是一样的。

- (void)willMoveToSuperview:(UIView *)newSuperview {
    [self.scrollView addObserver:self forKeyPath:@"contentOffset" options:(NSKeyValueObservingOptionNew) context:Nil];
    self.scrollView.contentInset = UIEdgeInsetsMake(self.frame.size.height, , , );
    self.scrollView.scrollIndicatorInsets = self.scrollView.contentInset;//滚动条的位置
}

- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSString *,id> *)change context:(void *)context {
    if ([keyPath isEqualToString:@"contentOffset"]) {

        CGPoint newOffset = [change[@"new"] CGPointValue];
        [self updateSubViewsWithScrollOffset:newOffset];
    }
}

  

制作一个顶部图片可以拉伸放大缩小效果的tableViewHeader的更多相关文章

  1. ios学习-制作一个浏览图片的Demo

    一.项目要求:制作一个浏览图片的Demo,要求包含夜间模式,以及改变图片大小,能够显示不同的图片描述 二.开发步骤: 1.在storyboard上添加一个空白的View,然后添加”设置“按钮,添加im ...

  2. iOS开发-UITableView顶部图片下拉放大

    关于顶部图片下拉放大,在用户展示的个人中心显示用户个人头像信息,设置UITableView的headerView实现,UITableView继承自UIScrollView,同样的设置UIScrollV ...

  3. Android 自定义View可拖动移动位置及边缘拉伸放大缩小

    一.首先说一下定义这样一个View有什么用?在一些app中,需要设置头像,而用户选择的图片可能是使用摄像头拍摄,也可能是选择的相册里面的图片,总之,这样的图片大小不一,就比如在使用某个聊天软件的时候, ...

  4. 自定义ImageView实现图片手势滑动,多点触摸放大缩小效果

    首先呢,还是一贯作风,我们先来看看众多应用中的示例:(这种效果是很常见的,可以说应用的必须品.)                搜狐客户端                               ...

  5. jQuery效果之封装一个文章图片弹出放大效果

    首先先搭写一个基本的格式: $.fn.popImg = function() { //your code goes here } 然后用自调用匿名函数包裹你的代码,将系统变量以变量形式传递到插件内部, ...

  6. html 图片在一个div中放大缩小效果

    <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> &l ...

  7. 手动实现图片预览-放大缩小全屏支持IE9以上

    #{extends '/Index/index.html' /} #{set title:'意见反馈' /} <script src="/public/mgr/javascripts/ ...

  8. 【VUE】图片预览放大缩小插件

    From: https://www.jianshu.com/p/e3350aa1b0d0 在看项目时,突然看到预览图片的弹窗,感觉好僵硬,不能放大,不能切换,于是便在网上找下关于图片预览的插件,有找到 ...

  9. 一起学HTML基础-利用CSS和JavaScript制作一个切换图片的网页

    由于个人原因,不详细写步骤 思路: 一.布局 二.制作图片区和按钮区的div及颜色.边框.背景属性等 三.用PS将四张图片剪切到同一个尺寸,重叠放置在图片切换区,透明度设置为0 四.点击对应按钮时,将 ...

随机推荐

  1. JavaWeb应用开发架构浅谈

    本文就我所经历和使用过的技术和框架, 讨论 Java / Javascript 技术组合构成的Web 应用架构. 一. 概述 Web 应用架构可以划分为两大子系统:前端子系统和后台子系统. 前端子系统 ...

  2. getopt解析命令行参数一例:汇集多个服务器的日志

    高效工作的一个诀窍就是尽可能自动化, 简便化. 比如, 公司里, 要搜索多个集群下的应用日志来排查问题, 需要使用 pssh: pssh -i -h api_hangzhou.iplist " ...

  3. dr.wondr博士随笔之三星某古董智能机GTXXXX 的取证恢复一例

    大家好!欢迎来到我dr.wonde博士的微博! 这是dr.wonde的第一篇微博,不足之处,还请见谅. 今天dr.wonde给你们带来不可能的数据恢复任务之三星非智能机古董机GT-E1088C 的恢复 ...

  4. Win10系统Start Menu上的图标莫名消失

    今天在工作过程中,突然有测试的同事给我报来一个问题.她是这么描述的“执行完XXX工具之后,在Start Menu找不到图标了.” 针对问题本身: 1,是执行完XXXX工具之后? 2,Start Men ...

  5. logstash filter grok 用法

    在elk+filebeat都安装好,且明白了基本流程后,主要的就是写logstash的filter了,以此来解析特定格式的日志 logstash的filter是用插件实现的,grok是其中一个,用来解 ...

  6. SQL Server T-SQL高级查询

    name like 'ja%'; select * from student where name not like '%[j,n]%'; select * from student where na ...

  7. 深入理解CSS网页布局-理论篇

    在CSS网页开发布局中,需要对浮动和定位有深刻的理解才能在开发中游刃有余. 基于此,在博客园中做了本篇总结,这些总结来自实践经验和阅读一些书籍后的理解总结,主要内容为浮动,清除浮动,定位. (可点击屏 ...

  8. Codeforces 720A. Closing ceremony

    A. Closing ceremony time limit per test 2 seconds memory limit per test 256 megabytes The closing ce ...

  9. java高薪之路__010_设计模式

    设计模式只是一个在构建大型工程时,为了方便更改,添加,查询和管理的一种代码工具,没有必要单独为了设计模式而使用设计模式,使简单的事情复杂化. 总体来说设计模式分为三大类: 1. 创建型模式,共五种 - ...

  10. 协程 & 用户级(内核级)线程 & 切换开销 & 协程与异步回调的差异

    今天先是看到多线程级别的内容,然后又看到协程的内容. 基本的领会是,协程是对异步回调方式的一种变换,同样是在一个线程内,协程通过主动放弃时间片交由其他协程执行来协作,故名协程. 而协程很早就有了,那时 ...