Tag: 集合视图

使用集合视图自定义布局的可伸缩标题动画

最近,我们开始使用新的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 […]