FMMosaicLayout使用全解析3个Section示例项目逐行精讲【免费下载链接】FMMosaicLayoutA drop-in mosaic collection view layout with a focus on simple customizations.项目地址: https://gitcode.com/gh_mirrors/fm/FMMosaicLayoutFMMosaicLayout 是一款可直接接入drop-in的 iOS 马赛克布局组件它继承自UICollectionViewLayout能把图片自动排成一大两小相间的方形马赛克效果主打简单定制。本文结合官方示例项目中 3 个 Section 的真实代码带你快速看懂数据源、大小格混合与页眉页脚覆盖这三大核心用法。为什么用 FMMosaicLayout 做照片墙 大量媒体类 iOS 应用直接照搬UICollectionViewFlowLayout画面千篇一律。FMMosaicLayout 采用经典的最短列优先算法灵感来自 Facebook 图片墙每放一个格子就找当前最矮的列落位自然形成错落有致的马赛克瀑布。它的特点是即插即用只需给 collection view 换一行 layout无需自己算格子尺寸定制极简仅 1 个必选 delegate 方法其余全部可选大小格混排大格 一整列宽的正方形两个小格并排正好等于一个大格Header/Footer 支持可自定义高度还能覆盖在马赛克内容之上FMMosaicLayout 一键安装与接入步骤FMMosaicLayout 通过 CocoaPods 分发要求 iOS 7.0支持 ARC采用 MIT 协议详见 FMMosaicLayout.podspec。在你的 Podfile 中加一行即可pod FMMosaicLayout官方示例则以本地路径方式引入见 Podfilepod FMMosaicLayout, :path ../接入只需两步FMMosaicLayout *mosaicLayout [[FMMosaicLayout alloc] init]; self.collectionView.collectionViewLayout mosaicLayout;也可以在 Interface Builder 中直接把 collection view 的布局设为FMMosaicLayout类官方示例正是这样配置的见 Example.storyboard。示例项目结构与关键文件清单文件职责FMMosaicCollectionViewController.m示例控制器数据源 全部定制 delegate 方法FMMosaicCellView.m马赛克格子自带按压缩放动画FMHeaderView.m / FMFooterView.mSection 页眉 / 页脚视图FMMosaicLayout.h对外接口与FMMosaicLayoutDelegate协议FMMosaicLayout.m核心布局算法400 余行一天可读透Section 1 精讲三节数据源与 2 列马赛克基石示例在数据源里定义了 3 个 Section条目数分别为 66、123、31见 FMMosaicCollectionViewController.m#L66-L76- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView { return 3; }格子复用 Assets 中的 18 张风景图按下标循环取图见 FMMosaicCollectionViewController.m#L153-L177cell.imageView.image self.stockImages[indexPath.item % self.stockImages.count];唯一的必选 delegate 方法决定每节列数示例统一返回 2 列- (NSInteger)collectionView:(UICollectionView *)collectionView layout:(FMMosaicLayout *)collectionViewLayout numberOfColumnsInSection:(NSInteger)section { return kFMMosaicColumnCount; // 2 }⚠️易踩的坑FMMosaicLayout.delegate是弱引用且仅用于向后兼容——如果你不手动赋值它会自动回退到collectionView.delegate通常是视图控制器本身。所以直接把方法写在视图控制器上就能生效见 FMMosaicLayout.m#L453-L455。Section 2 精讲FMMosaicCellSize 大小格混排规则第 2 节演示了最有意思的玩法——大小马赛克格子混排- (FMMosaicCellSize)collectionView:(UICollectionView *)collectionView layout:(FMMosaicLayout *)collectionViewLayout mosaicCellSizeForItemAtIndexPath:(NSIndexPath *)indexPath { return (indexPath.item % 12 0) ? FMMosaicCellSizeBig : FMMosaicCellSizeSmall; }即每 12 个条目出现一个大格0、12、24…其余都是小格。尺寸规则很简单见 FMMosaicLayout.m#L323-L327大格边长 列宽形成醒目大正方形小格边长 列宽 − 间距÷ 2两两并排填满一大格宽度布局时算法会先缓存 2 个小格并排塞进最短列后刷新列高大格则直接落位最短列逻辑见 FMMosaicLayout.m#L77-L118。这正是错落而不杂乱的秘密。Section 3 精讲页眉页脚与覆盖马赛克内容第 3 节重点演示 Header / Footer 定制页眉显示 SECTION N页脚自动统计并显示 N ASSETS见 FMMosaicCollectionViewController.m#L88-L109页眉 / 页脚高度均为 44pt见 FMMosaicCollectionViewController.m#L133-L141返回YES让页眉页脚悬浮覆盖在马赛克格子之上不再把内容往下推- (BOOL)headerShouldOverlayContentInCollectionView:(UICollectionView *)collectionView layout:(FMMosaicLayout *)collectionViewLayout { return YES; }效果类似图片应用里常见的半透明悬浮标题对应的 XIB 素材为 FMHeaderView.xib 与 FMFooterView.xib。定制参数速查表 ️Delegate 方法必选作用默认值collectionView:layout:numberOfColumnsInSection:✅每节列数2collectionView:layout:mosaicCellSizeForItemAtIndexPath:可选每个格子大 / 小小格collectionView:layout:insetForSectionAtIndex:可选每节外边距0collectionView:layout:interitemSpacingForSectionAtIndex:可选格子间距0heightForHeaderInSection/heightForFooterInSection可选页眉 / 页脚高度0header / footerShouldOverlayContent…可选是否覆盖在内容上NO示例项目的参数组合2 列、5pt 节边距、2pt 格子间距、44pt 页眉页脚、且页眉页脚均开启覆盖。总结三步拥有马赛克照片墙FMMosaicLayout 的全部核心逻辑只集中在 FMMosaicLayout.m 一个文件里必选极少、其余可选的设计让它成为学习自定义UICollectionViewLayout的优秀范本。上手只需三步安装pod FMMosaicLayout后执行pod install想跑完整示例可执行git clone https://gitcode.com/gh_mirrors/fm/FMMosaicLayout进入Example目录pod install后打开FMMosaicLayout.xcworkspace接入将collectionViewLayout设为FMMosaicLayout定制实现numberOfColumnsInSection:再按需打开上表中的可选方法完成后你就拥有了一个支持大小格混排、分节边距与悬浮页眉页脚的精美马赛克照片墙 【免费下载链接】FMMosaicLayoutA drop-in mosaic collection view layout with a focus on simple customizations.项目地址: https://gitcode.com/gh_mirrors/fm/FMMosaicLayout创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考