制作一个顶部图片可以拉伸放大缩小效果的tableViewHeader
最近负责公司项目个人中心的项目模块研发,首页是一个头部图片可以拉伸放大缩小效果的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的更多相关文章
- ios学习-制作一个浏览图片的Demo
一.项目要求:制作一个浏览图片的Demo,要求包含夜间模式,以及改变图片大小,能够显示不同的图片描述 二.开发步骤: 1.在storyboard上添加一个空白的View,然后添加”设置“按钮,添加im ...
- iOS开发-UITableView顶部图片下拉放大
关于顶部图片下拉放大,在用户展示的个人中心显示用户个人头像信息,设置UITableView的headerView实现,UITableView继承自UIScrollView,同样的设置UIScrollV ...
- Android 自定义View可拖动移动位置及边缘拉伸放大缩小
一.首先说一下定义这样一个View有什么用?在一些app中,需要设置头像,而用户选择的图片可能是使用摄像头拍摄,也可能是选择的相册里面的图片,总之,这样的图片大小不一,就比如在使用某个聊天软件的时候, ...
- 自定义ImageView实现图片手势滑动,多点触摸放大缩小效果
首先呢,还是一贯作风,我们先来看看众多应用中的示例:(这种效果是很常见的,可以说应用的必须品.) 搜狐客户端 ...
- jQuery效果之封装一个文章图片弹出放大效果
首先先搭写一个基本的格式: $.fn.popImg = function() { //your code goes here } 然后用自调用匿名函数包裹你的代码,将系统变量以变量形式传递到插件内部, ...
- html 图片在一个div中放大缩小效果
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> &l ...
- 手动实现图片预览-放大缩小全屏支持IE9以上
#{extends '/Index/index.html' /} #{set title:'意见反馈' /} <script src="/public/mgr/javascripts/ ...
- 【VUE】图片预览放大缩小插件
From: https://www.jianshu.com/p/e3350aa1b0d0 在看项目时,突然看到预览图片的弹窗,感觉好僵硬,不能放大,不能切换,于是便在网上找下关于图片预览的插件,有找到 ...
- 一起学HTML基础-利用CSS和JavaScript制作一个切换图片的网页
由于个人原因,不详细写步骤 思路: 一.布局 二.制作图片区和按钮区的div及颜色.边框.背景属性等 三.用PS将四张图片剪切到同一个尺寸,重叠放置在图片切换区,透明度设置为0 四.点击对应按钮时,将 ...
随机推荐
- shell调试
sh -x set -x 中间是要调试的代码 set +x
- JS逗号运算符的用法详解
逗号运算符的用法详解 注意: 一.由于目前正在功读JavaScript技术,所以这里拿JavaScript为例.你可以自己在PHP中试试. 二.JavaScript语法比较复杂,因此拿JavaScri ...
- CI框架多个表前缀,如何使用框架语句querybuilder
最近用CI框架遇到一个问题.2个前提条件: 1.数据库设计不规范,有的有表前缀(如:ck_table1),有的没有(如:table2)或者表前缀不一样: 2.数据库操作又想使用数据库操作语句query ...
- 利用javascript实现课程选择
最终实现的效果如下图所示: 代码如下所示: HTML代码部分: <body> <div class="page" style="overflow: hi ...
- caffe ubuntu16安装报错和程序总结
我最近安装安装了老版本的caffe,安装过程真是两个字"想死",所以我的错误一般都是比较经典的. 我是使用cuda的版本,所以可能会出现undefined refference t ...
- [问题2014S10] 解答
[问题2014S10] 解答 先证明一个简单的引理. 引理 设 \(\lambda_0\) 是 \(n\) 阶方阵 \(A\) 的特征值, 则对任意的正整数 \(k\), Jordan 块 \(J ...
- 没有技术说明文档的开源都是耍流氓:微软Roslyn编译即服务在CIIP中具体应用(上)
前段时间我发布了 github开源:企业级应用快速开发框架CIIP WEB+WIN+移动端,很多园友们都表示支持并与我探讨相关技术问题,上篇中我也承诺会写相关的技术文章,本篇就来介绍一下建模模块中使用 ...
- Spring Boot Admin 的使用 2
http://blog.csdn.net/kinginblue/article/details/52132113 ******************************************* ...
- zabbix3.0.4 部署之五 (LNMP > nginx1.9.9)
1 wget http://nginx.org/download/nginx-1.9.9.tar.gz cd /opt/pcre-8.35 autoreconf -ivf Installing sha ...
- sqlplus无密码登录TNS协议适配器错误
登录到sqlplus使用无密码登录用户时出现:TNS协议适配器错误 检查自己是否有多个数据库,可能默认登录的数据库服务没有启动,启动即可. 查看当前数据库名 select name from v$d ...