iOS导航条自由缩放实现

来源：互联网发布：纪录中国app mac 编辑：程序博客网时间：2024/06/07 13:51

今天正好有时间教大家很常见的一个效果。这也是笔者第一次写博客，后面会不定期的更新内容。好了，话不多说，进入正题吧。

其实实现此此效果很简单。只需要几行代码就可以搞定。

在很多的App中，其实都有这样的需求，上下滚动时候，要其头像也跟着发生相应的变化（用户头像是在系统的导航条）。以前有朋友问过我，可能有的朋友会尝试自定义导航view。其实是没有必要的，之间使用系统自带的导航即可！

通过此片学习，您将学习一下知识点：

1.如何分析实现原理

2.如何实现缩放效果

3.如何讲计算缩放系数

效果图

在开始讲解之前，还是先上传效果图，有图有真相，如下图所示。

实现原理

首先给给导航条添加view和创建tableView

- (void)configUI{    _tableView = [[UITableView alloc]initWithFrame:self.view.bounds style:UITableViewStylePlain];    _tableView.dataSource = self;    _tableView.delegate = self;    [_tableView registerClass:[UITableViewCell class] forCellReuseIdentifier:@"UITableViewCell"];    [self.view addSubview:_tableView];       UIView *titleView = [[UIView alloc] init];    self.navigationItem.titleView = titleView;    _headerImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"header.jpg"]];    _headerImageView.frame = CGRectMake(0, 0, 70, 70);    _headerImageView.layer.masksToBounds = YES;    _headerImageView.layer.cornerRadius = 35;    _headerImageView.center = CGPointMake(titleView.center.x, 0);    [titleView addSubview:_headerImageView];}

这里主要是创建表格和titleView，估计你们也看到了我为什么不把imageView直接作为titleVIew，而是我自定义一个view，这样做的好处就是因为titleView会自动被系统设置大小的，而正常情况下，我们的头像是有自己的大小。

接下来就是最关键的地方了，直接上代码

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {    if ([scrollView isEqual:self.tableView]) {        CGFloat offsetY = self.tableView.contentOffset.y + self.tableView.contentInset.top;        CGFloat scale = 1.0;        if (offsetY < 0) {// 放大            // 允许下拉放大的最大距离为250            scale = MIN(1.5, 1 - offsetY / 250);        } else if (offsetY > 0) { // 缩小            // 允许向上超过导航条缩小的最大距离为250            scale = MAX(0.4, 1 - offsetY / 250);        }        self.headerImageView.transform = CGAffineTransformMakeScale(scale, scale);    }}

估计大家看到这里，都明白了，那我就不多说了

小结

阅读完本篇文章，笔者相信大家都可以熟练掌握了，其实就几行代码的事情呀，是不是很简单呢？

源代码

本篇文章对应的源代码下载地址：https://github.com/WSmalan/WSScaleHeaderImage

1 0