博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
iOS UITableView滚动头图 拉伸放大效果 (头部弹性效果) 增加iOS11支持 附有demo
阅读量:6787 次
发布时间:2019-06-26

本文共 2422 字,大约阅读时间需要 8 分钟。

今天修改日期为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

}

效果:

 

转载于:https://www.cnblogs.com/someonelikeyou/p/5124742.html

你可能感兴趣的文章
loadrunner参数化
查看>>
dom树改变监听
查看>>
【后缀数组】poj3581 Sequence
查看>>
【kd-tree】bzoj1176 [Balkan2007]Mokia
查看>>
CodeBlocks中使用中文字符问题
查看>>
SQL plus连接远程Oralce数据库
查看>>
C#泛型详解
查看>>
PDMS RvmTranslator
查看>>
第一天使用博客园 ----与肝胆人共事,于无字句处读书
查看>>
20172318 2018-2019-1 《程序设计与数据结构》第4周学习总结
查看>>
【python3的学习之路十二】面向对象高级编程
查看>>
js——BOM
查看>>
常用的加密与解密类
查看>>
hrbeu 哈工程 Eular Graph
查看>>
web crawling(plus6) pic mining
查看>>
sintimental analysis
查看>>
打印沙漏
查看>>
visual studio 2005没有找到MSVCR80D.dll问题
查看>>
获取鼠标的当前位置
查看>>
django_models_一对一关系
查看>>