使用集合视图自定义布局的可伸缩标题动画
最近，我们开始使用新的UX设计进行应用程序外观设计。 任何电子商务应用程序的“产品详细信息页面”都包含类似的信息，并且格式完全相同：
- 产品形象居首
- 产品特点
- 用户评分，相似的推荐产品，上次查看的产品等位于底部
让我们关注当用户拉下集合视图时产品的伸缩图像动画，图像将以某种视觉效果增长，如下所示：
实现方式：
让我们讨论每个步骤：
步骤A：集合视图设置
- 分配自定义布局CustomPDPLayout而不是默认的UICollectionViewFlowLayout。 我们将在稍后讨论有关该课程的更多信息。
2.注册单元格和标题视图
collectionView.register（AttributeCell.self，forCellWithReuseIdentifier：cellId）
collectionView.register（PDPHeaderView.self，forSupplementaryViewOfKind：UICollectionView.elementKindSectionHeader，withReuseIdentifier：headerId）
AttributeCell （ 单元格 ）包含一个文本标签， PDPHeaderView （ Header视图 ）包含一个图像。
3.使用UICollectionViewDelegateFlowLayout设置单元格大小和Header大小
私人租用填充：CGFloat = 16
//像元大小
func collectionView（_ collectionView：UICollectionView，layout collectionViewLayout：UICollectionViewLayout，sizeForItemAt indexPath：IndexPath）-> CGSize {
返回CGSize（width：collectionView.frame.width-2 * padding，height：50）
}
//标头大小
func collectionView（_ collectionView：UICollectionView，layout collectionViewLayout：UICollectionViewLayout，referenceSizeForHeaderInSection部分：Int）-> CGSize {
返回CGSize（width：collectionView.frame.width，height：250）
}
4.从collectionViewLayout配置minimumInteritemSpacing，minimumLineSpacing，sectionInset等（您仍然可以使用UICollectionViewDelegateFlowLayout ）
如果让layout = collectionViewLayout为？ CustomPDPLayout {
layout.minimumLineSpacing = 8 // 2个像元之间的间距
layout.sectionInset = UIEdgeInsets（top：padding，left：padding，bottom：padding，right：padding）//将inset添加到该部分
}
其余的收集视图配置，您可以在此处检查源代码：
ashislaha / StretchyHeaderAnimation
让我们在“产品详细信息”页面上创建酷炫的动画效果。 当用户向下滚动时，标题将随着… github.com而变大。
步骤B：配置集合视图的自定义布局：
- 有几个layoutAttributes方法可以重写以获取单元格，修饰视图，页眉视图/页脚视图（补充视图）等的自定义效果。
在这里，我们使用的是最通用的一种
覆盖func layoutAttributesForElements （在CGRect中）-> [UICollectionViewLayoutAttributes]？
2.从super中提取布局属性
让layoutAttributes = super.layoutAttributesForElements（in：rect）
3.遍历每个属性，并确定要修改的属性。 对于我们的情况，我们想要修改Section Header （进行额外的检查，您可以使用indexPath来确定是否要在第1节Header上伸缩或其他）。
layoutAttributes？.forEach（{（attribute）in
if attribute.representedElementKind == UICollectionView。 elementKindSectionHeader {...}
}）
4.确定滚动方向，当用户下拉时拉伸
守护让collectionView = collectionView else {return}
让contentOffsetY = collectionView.contentOffset.y
如果contentOffsetY <0 {...}
5.根据contentOffset设置属性的新框架
让width = collectionView.frame.width
//当contentOffsetY为-ve时，高度将基于contentOffsetY
让高度= attribute.frame.height-contentOffsetY
attribute.frame = CGRect（x：0，y：contentOffsetY，width：width，height：height）
并最后返回layoutAttributes。
6.使布局失去新边界，以便重新绘制布局
覆写func shouldInvalidateLayout（forBoundsChange newBounds：CGRect）-> Bool {
返回真
}
就是这样来扩展标题。
步骤C：在下拉集合的同时做一些Header的视觉效果
这是最后一步，我们将在页眉上添加模糊的视觉效果视图，并使用UIViewPropertyAnimator进行一些动画处理 。
1.在Header View中添加一个UIViewPropertyAnimator属性（该类可对视图进行动画处理并允许对这些动画进行动态修改）以对其进行动画处理。
动画师= UIViewPropertyAnimator（持续时间：4.0，曲线：.easeInOut，动画：{...}）
2.将模糊视觉效果视图添加到“标题视图”。
让blurEffect = UIBlurEffect（style：.regular）
让visulaEffectView = UIVisualEffectView（effect：blurEffect）
3.在Controller中捕获Header视图以修改动画设计器属性。
私人var headerView：PDPHeaderView？
覆盖func collectionView（_ collectionView：UICollectionView，viewForSupplementaryElementOfKind种类：String，at indexPath：IndexPath）-> UICollectionReusableView {
...
//创建标头后，更新实例变量
headerView =标头
...
}
4.使用fractionComplete属性设置标题视图的动画 滚动视图的contentOffset （向下/向上）的UIViewPropertyAnimator的设置
覆盖func scrollViewDidScroll（_ scrollView：UIScrollView）{
让contentOffsetY = scrollView.contentOffset.y
如果contentOffsetY <0 {//下拉
headerView？.animator？.fractionComplete = abs（contentOffsetY）/ 200
} else {//拉起
headerView？.animator？.fractionComplete = 0.0 //完全可见
}
}
那就是所有的人🙂
源代码：
ashislaha / StretchyHeaderAnimation
让我们在“产品详细信息”页面上创建酷炫的动画效果。 当用户向下滚动时，标题将随着… github.com而变大。
即使没有人看，也要做正确的事。 这称为“完整性”。 谢谢。
如果您想查看我的更多作品，请在此处检查：
ashislaha –概述
我是一名软件开发工程师，主要从事iOS开发，机器学习，模式识别，图像… github.com