iOS UITableView滚动头图 拉伸放大效果 (头部弹性效果) 增加iOS11支持 附有demo
今天修改日期为2017年11月25日
两个月前做了iOS11的bug修复,才对博客进行更新,见谅。
在iOS11上需要注意两个问题
1.使用UIScrollview,UITableView,UIWebView等滚动UI控件的页面造成的页面错位,会上面空白20像素(不用iPhoneX做适配情况下)
解决:
//防止顶端留出状态栏高度空白
if (@available(iOS 11.0, *)) {
_tableView.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNever;
} else {
self.automaticallyAdjustsScrollViewInsets = NO;
}
(2)滚动的头部内部self.iconImageView 部分 要赋值指定的大小,不能使用约束。
在iOS11上使用约束再来回拉伸头图表现水土不服的bug(具体可以描述为 拉伸过程会出现到某个位置卡顿,或者 或者整体拉伸位置错位,或者还是会出现白条)。当然你没有这个问题最好
解决:
#pragma mark - private - (void)configSubViews
{
[self addSubview:self.iconImageView];
self.iconImageView.frame = self.frame;//这里不使用约束 iOS11以后有 拉伸时候适配bug
// [self.iconImageView mas_makeConstraints:^(MASConstraintMaker *make) {
// make.edges.equalTo(self);
// }];
}
献上demo,可以在github上给我点个星星最好 ✨
========华丽分割线========
历史:
接着上一篇来讲 头图在向下的滚动拉伸时候有一个放大的效果, 这里就讲讲具体的实现过程.
理解起来也很简单,肯定就是监听了滚动过程,然后 判断滚动位移的相对位置是否满足,满足则需要拉伸处理.
这里的拉伸 一般都是相对图片的等比拉伸,不能让图片比例失调.
监听方法就是
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
首先
这个头图headerView 和 self.tableView的关系
1 可以是 addSubView的关系
2 可以是 setTableViewHead 的关系
区别 不大 1 适合 设计复杂 已经有了setTableViewHeaderView 2 适合经典设计 "headerView + tableView"
(1)设置 这个headerView 高度为 ImageViewHeight 为常亮 比如 200
(2)如果是 关系1
设置 self.tableView.contentInset = UIEdgeInsetsMake(ImageViewHeight, 0, 0, 0); 当 addSubView时候 正好headView在位置从0开始 高度为 ImageViewHeight 的位置.
如果是 关系2
直接设置 [self.tableView setTableHeaderView:headerView];
(3)需要设置 headerImageView.contentMode = UIViewContentModeScaleAspectFill; //会保证图片比例不变,但是是填充整个ImageView的
(4)监听处理
/**
* 做伸缩处理
*
* @param scrollView
*/
#pragma mark - ScrollViewDelegate
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
//HF_TITLE_NAV_HEIGHT 64 是状态栏 + 导航栏的高度
CGFloat yOffset = scrollView.contentOffset.y + HF_TITLE_NAV_HEIGHT;
//拉伸处理start
if (yOffset < 0 ){
float originHeight = ImageViewHeight;
float resizeScale = - (scrollView.contentOffset.y + HF_TITLE_NAV_HEIGHT)/originHeight;
float offset = - scrollView.contentOffset.y - HF_TITLE_NAV_HEIGHT;
CGRect frame = CGRectMake(0 - (SCREEN_WIDTH * resizeScale / 2),
- offset,
round(SCREEN_WIDTH + SCREEN_WIDTH * resizeScale),
round(originHeight + originHeight * resizeScale));
self.headImageView.frame = frame; //这个 UIImageView是headerView的子视图,这样拉伸时候才不会顶部出现位移空白
headerView.frame = CGRectMake(0, 0, SCREEN_WIDTH, frame.size.height);
}
//end
}
效果:
最新文章
- Git和Code Review流程
- ASP.Net请求处理机制初步探索之旅 - Part 4 WebForm页面生命周期
- Nmap参数详解
- React Native 中 CSS 的使用
- .NET开源项目
- 一步一步安装hive
- 实现Web验证码图片-原理
- 【读书笔记】iOS网络-HTTP-URL百分号编码
- HAVING用法详解
- node-mongo-native1.3.19连接mongo的最优方法
- JavaWeb项目开发案例精粹-第2章投票系统-004action层
- 基于局部敏感哈希的协同过滤算法之simHash算法
- ExtJS4 动态生成grid出口excel(纯粹的接待)
- Hibernate 系列教程12-继承-Join策略
- android 在代码中使用 #ffffff 模式 设置背景色
- iOS面试题及答案
- 隐藏Easy UI 中parent.$.modalDialog 的button
- 玩转Spring Cloud之API网关(zuul)
- codesmith生成的结果页不显示,问题在于第一行的文件头
- mybatis-servlet.xml配置SpringMVC样板
热门文章
- 安卓使用Socket发送中文,C语言服务端接收乱码问题解决方式
- 51单片机 | 实现SMC1602液晶屏显示实例
- Catch That Cow(广度优先搜索_bfs)
- myeclipse svn安装
- nightwatch-js -- test group
- OpenCV for Python 学习笔记 三
- 【转】【FTP】之windows8.1上搭建FTP服务器方法
- Mysql----MySQL的mysql_insert_id和LAST_INSERT_ID(转)
- Spring整合JMS(消息中间件)
- java多线程实现复制大文件