iOS 轮播图(Banner)滑动时根据图片大小而改变自身高度
chenguangming9 · 21浏览量 · 发布于2020-11-13 +关注

作者MQTwist,源码AutoBanner,之前有小伙伴问我,轮播图(Banner)滑动时根据图片大小而改变自身高度,当时一想不是很难,细节拆分后也就几部分,但是就是懒,不想写。最近不是很忙,就动手撸了一遍。

第三方

  • 轮播用SDCycleScrollView

  • 想做到无侵入用Aspects

Aspects是什么?怎么用?

正文

核心细想就是,检测Banner滑动,实时计算高度。
用的UIScrollView的代理方法有:

  • - (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView;
    核心代码:

//记录当前位置
_currentOffSet = scrollView.contentOffset.x;
//改变contentSize,一定要改变height,因为有高度变化,如果一直为0或不变的话会闪
scrollView.contentSize = CGSizeMake(SCREEN_WIDTH * self.imageUrlArr.count, self.itemSize.height);
  • - (void)scrollViewDidScroll:(UIScrollView *)scrollView;
    核心代码:

CGFloat offset = scrollView.contentOffset.x;
if (offset == _currentOffSet) {
    return;
}
//偏移差,用来判断是左滑还是右滑
CGFloat offsetValue = offset - _currentOffSet;
//上一个图片的高度
NSDictionary *lastSizeDic = self.sizeArr[_lastIndex];
CGFloat lastHeight = [self getImageHWithImgW:lastSizeDic[@"width"] imgH:lastSizeDic[@"height"]];
//将要滑动到的图片的高度
NSInteger nextIndex = (offsetValue > 0) ? MIN(_lastIndex + 1, self.imageUrlArr.count - 1) : MAX(_lastIndex - 1, 0);
NSDictionary *nextSizeDic = self.sizeArr[nextIndex];
CGFloat nextHeight = [self getImageHWithImgW:nextSizeDic[@"width"] imgH:nextSizeDic[@"height"]];
//偏移量:偏移差取绝对值,用来计算实时高度
CGFloat offsetX = fabs(offsetValue);
//2图片的高度差
CGFloat value = lastHeight - nextHeight;
//单位位移下的缩放的距离
CGFloat scale = value / SCREEN_WIDTH;
self.itemSize = CGSizeMake(SCREEN_WIDTH, lastHeight - scale * offsetX);
NSLog(@">>>height %lf offsetValue:%lf", self.itemSize.height, offsetValue);
//改变contentSize,一定要改变height,因为有高度变化,如果一直为0或不变的话会闪
scrollView.contentSize = CGSizeMake(SCREEN_WIDTH * self.imageUrlArr.count, self.itemSize.height);
//可能丝滑了一点点
[UIView animateWithDuration:0 delay:0 options:UIViewAnimationOptionCurveLinear animations:^{
    self.headerView.frame = CGRectMake(0, 0, SCREEN_WIDTH, self.itemSize.height);
    self.tableView.tableHeaderView = self.headerView;
} completion:nil];
  • - (void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView;
    核心代码:

NSLog(@">>>index:%zd", index);_lastIndex = index;_currentOffSet = self.imageScrollView.contentOffset.x;

Demo地址

总结

其实没有什么复杂的点,就是一些简单的计算。

后记

总想写点什么,却又无从写起。

相关推荐

滚动视图的顶部悬浮效果

产品交流 吴振华 · 191浏览 · 2020-01-07 11:38:32
一个类似Excel轻量级的iOS表视图

产品交流 吴振华 · 234浏览 · 2019-12-25 10:22:58
iOS 嵌套滚动,分页滚动视图源码

产品交流 itnanba · 258浏览 · 2019-10-23 10:41:30
一个简单好用的图片轮播器 iOS源码

产品交流 itnanba · 275浏览 · 2019-10-17 09:45:42
仿朋友圈的iOS自定义评论展示

产品交流 itnanba · 225浏览 · 2019-10-17 09:34:26
长按即可移动cell的自定义UI滚动视图 iOS源码

产品交流 飘飘悠悠 · 225浏览 · 2019-10-12 11:21:00
iOS商品详情页面,商品属性选择功能(SKU)

产品交流 飘飘悠悠 · 330浏览 · 2019-10-10 14:39:30
加载中

0评论

评论
  • 源码信息
  • 所需 1 点数
  • 源码作者:匿名作者
  • 源码大小:4.76MB
  • 运行环境:未知
小鸟云服务器
文章月排行榜