uitableview 弹性_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
}
效果:
uitableview 弹性_iOS UITableView滚动头图 拉伸放大效果 (头部弹性效果) 增加iOS11支持 附有demo...相关推荐
- uitableview 弹性_iOS UITableView/UICollectionView的嵌套和悬停的解决方案
应用情景 情景一: 情景一 说明:是不是和tableView的Plain类型一样,其实这个是由两个列表实现的 情景二: 情况二 说明:此时,就可以发现和普通的列表有些不一样了 情景三: 情景三 说明: ...
- 导航栏透明度渐变; 下拉头视图拉伸效果;勾号动画; 一段文字中点击部分可响应不同事件...
之前通过设置navigationBar的barTintColor设置导航栏颜色,然后拿到self.navigationController.navigationBar.subviews.firstOb ...
- ios 横向滚轮效果_iOS列表滚动视差效果
效果:UITableView滚动的时候会有动画加视差效果 一个未处理的列表.png 当cell出现的时候 -(void)tableView:(UITableView *)tableView willD ...
- UI设计师注意,网站头图的10个黄金法则
在ui设计中,网站的头图是很重要的,因为他是用户第一时间看的,也大部分的因素决定着用户的去留.当用户登录你的主页时,在页面打开后的瞬间,你可以通过设计将更多的页面让他们看到.然而大多数网站都错失了这个 ...
- 深入玩转K8S之智能化的业务弹性伸缩和滚动更新操作
在上篇我们讲到了较为傻瓜初级的弹性伸缩和滚动更新,那么接下来我们来看看较为高级的智能的滚动更新.本节的知识点呢是K8S的liveness和readiness探测,也就是说利用健康检查来做更为智能化的弹 ...
- Android启动页白屏背景图拉伸的解决方案
Android启动页白屏&背景图拉伸的解决方案 1.前言 2.问题点 3.代码及说明 4.注意点 1.前言 新项目的闪屏页面用到一张大图,UI那边要求那张图片填充全屏,而且不能压缩或拉伸. 然 ...
- iphone7plus启动时icon被拉伸放大的原因
今天做7plus和6plus真机调试时,遇到了这样一个坑.7plus启动会出现icon被拉伸放大的现象,6plus启动时不icon不会被拉伸放大,但是不显示启动图.找了半天原因,最后发现是尺寸为124 ...
- css3弹性盒模型兼容性,彻底弄懂css3的flex弹性盒模型
由于在日常工作中使用css或者bootstrap的栅格系统已经能很好的满足业务需求,所以一直以来对css3的弹性布局不是很感冒. 近日有幸在一篇文章中领略了flex的魅力--简洁优雅.随试之. /*容 ...
- 可拖拽,拉伸的盒子(类似我们的桌面应用框,可以拉伸放大,可以拖拽移动)
类似我们的桌面应用框,可以拉伸放大,可以拖拽移动 基于上一篇,我们至于要加上另外两边和另外三个角 只是剩下的拉伸,不仅仅要改变盒子的宽,还要改变left/top了 原本以为很简单的加个left就好了, ...
最新文章
- C++ 第五课:C/C++ 数据类型
- python之 启动一个子进程并等待其结束
- 【go网络编程】-RPC编程
- (MSDN)VB.NET的强大和C#语言的比较【转载】
- class文件的产生过程
- SpringBoot_日志-slf4j使用原理
- 地大武汉的计算机网络工程师,2021年中国地质大学(武汉)电子信息(085400)计算机网络与信息安全技术及应用_考研专业目录_考试科目_考试范围 - 学途吧...
- 2017最新顺口溜出炉(超级经典)!
- java内部类选择题_java内部类详解(附相关面试题)
- JavaScript——文档对象模型
- java绑定click时间_JAVA面试之vue.js(一)
- 临时关闭七八十家店!茶颜悦色:我们还撑得住
- 卢伟冰暗示Redmi K40轻奢版:搭载联发科天玑1100
- JDK1.8 LinkedHashMap源码
- 从城市到矿山!成都睿铂与Microdrones 海外三维建模案例
- mvn compile遇到的问题:-source1.3 中不支持注释
- ps手机计算机图标教程,手绘设计精美手机APP软件图标的PS教程
- C++ 工厂模式 总结分析
- oracle获取本月天数,Oracle查询日期所属月份的天数
- Word去除多余的页眉
热门文章
- Qt creator5.7 OpenCV249之均值滤波(含源码下载)
- 广告roi怎么计算公式_二类电商信息流广告投放注意这几方面
- 文字 竖排居中_学会了这几招,瞬间就搞定PPT文字排版问题!
- python 问题自动匹配解决方案_最好的 Python IDE,你们推荐使用哪一个?
- android P监听SD卡热插拔执行symlink软链接的实现
- Linux动态库的导出控制
- sqlmap --os-shell反制小思路
- Windows系统自带WMI应用的查询使用
- Error installing bundler:bundler requires Ruby version >= 2.3.0.
- golang 指针总结(与C/C++区别不大,就是不可以p+1偏移)