iOS UITableView滚动头图拉伸放大效果 (头部弹性效果) 增加iOS11支持附有demo

缺乏、安全感 2021-12-16 18:35 459阅读 0赞

今天修改日期为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上给我点个星星最好 ✨

**链接：[PullHeaderViewDemo][]**

========华丽分割线========

历史：

接着上一篇来讲 头图在向下的滚动拉伸时候有一个放大的效果, 这里就讲讲具体的实现过程.

理解起来也很简单,肯定就是监听了滚动过程,然后 判断滚动位移的相对位置是否满足,满足则需要拉伸处理.

这里的拉伸 一般都是相对图片的等比拉伸,不能让图片比例失调.

监听方法就是

\- (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

效果:

![494253-20160112174341944-1469821667.gif][]

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

[PullHeaderViewDemo]: https://github.com/Li-Qun/PullHeaderViewDemo
[494253-20160112174341944-1469821667.gif]: /images/20211216/5ccbc09465c4497ba2de70c3b0f97c86.png