MediaBrowser 网格视图实战：快速实现照片墙与视频缩略图浏览

MediaBrowser 网格视图实战：快速实现照片墙与视频缩略图浏览

【免费下载链接】MediaBrowser🏞 A simple iOS photo and video browser with optional grid view, captions and selections written in Swift5.0项目地址: https://gitcode.com/gh_mirrors/me/MediaBrowser

MediaBrowser 是一款用 Swift 编写的 iOS 照片和视频浏览器，它最大的亮点就是开箱即用的**网格视图（照片墙）**能力：只需几行配置，就能把几十张照片和视频以缩略图网格的形式铺满屏幕，点击任意一张即可进入全屏大图浏览。本文将带你从零开始，快速在 Xcode 项目中集成 MediaBrowser，实现照片墙展示、视频缩略图预览与多选交互，全程附上可照抄的配置步骤，新手也能一次跑通。

MediaBrowser 是什么？为什么适合做照片墙

MediaBrowser 是一个开源的 iOS 媒体浏览框架，支持 Swift 6.0、iOS 13.0+，同时兼容 Swift Package Manager、CocoaPods 和 Carthage 三种主流集成方式。它不仅能展示本地图片（UIImage、PHAsset），还能直接加载网络图片地址（URL）和本地视频文件，网络图片的下载与缓存由 SDWebImage 自动处理，开发者无需关心内存压力。

用它来做照片墙，你几乎不用写任何复杂的UICollectionView布局代码——网格视图（MediaGridViewController）已经内置好，你只需要告诉它"要展示哪些媒体"即可。

核心特性一览：

• 🖼 单图 / 多图 / 视频混合浏览，支持横竖屏旋转
• 🔍 全屏大图支持双指缩放、拖动平移
• 🎞 视频自动播放、网格缩略图封面
• ✅ 网格模式与全屏模式下的多选（勾选）功能
• 🌐 网络图片自动下载与缓存，支持加载进度提示

最快的安装方法：两种方式任选其一

方式一：CocoaPods（适合已有 Podfile 的项目）

在 Podfile 中加入一行并执行pod install：

pod 'MediaBrowser'

方式二：Swift Package Manager（Xcode 原生支持）

打开 Xcode，选择File ▸ Add Package Dependencies…，输入仓库地址即可自动集成：

https://gitcode.com/gh_mirrors/me/MediaBrowser

提示：项目根目录还提供了 Package.swift、MediaBrowser.podspec 和 Cartfile，三种集成方式都有官方支持。

快速搭建照片墙：两个关键开关一开就生效

MediaBrowser 的网格视图默认就是开启的，你只需要关心两个属性，它们定义在 MediaBrowser.swift：

• enableGrid：是否允许显示网格视图（照片墙）
• startOnGrid：进入浏览器时是否直接以网格模式打开

完整的最小示例代码如下：

let browser = MediaBrowser(delegate: self) browser.enableGrid = true // 开启照片墙 browser.startOnGrid = true // 打开即显示网格缩略图 navigationController?.pushViewController(browser, animated: true)

就这样，一个可上下滑动、自动分栏的照片墙就出现了！网格的列数是根据屏幕宽度自动计算的（见 MediaGridViewController.swift），横竖屏切换时也会自动重新布局。

照片墙的数据从哪来？两个代理方法搞定

照片墙本身不保存数据，它通过MediaBrowserDelegate向你"要"内容，核心就两个方法（定义在 MediaBrowserDelegate.swift）：

func numberOfMedia(in mediaBrowser: MediaBrowser) -> Int { return mediaArray.count } func media(for mediaBrowser: MediaBrowser, at index: Int) -> Media { return mediaArray[index] }

其中Media对象（见 Media.swift）支持多种构造方式：

• Media(image: UIImage)：直接传图片
• Media(url: URL)：传网络或本地图片地址
• Media(asset:targetSize:)：传系统相册的 PHAsset
• Media(videoURL:previewImageURL:)：传视频地址 + 封面图

Demo 项目里的 DemoData.swift 就演示了如何快速生成一组本地图片填充照片墙，是很好的参考模板。

视频缩略图浏览：让视频在照片墙中也有封面

照片墙里混入视频时，MediaBrowser 会自动在缩略图右上角叠加播放图标。要展示视频，用Media(videoURL:previewImageURL:)即可：

let media = Media( videoURL: URL(string: "https://example.com/video.mp4")!, previewImageURL: URL(string: "https://example.com/poster.jpg")! )

如果视频来自系统相册，甚至不需要手动指定封面，MediaBrowser 会通过PHImageManager自动提取视频首帧作为缩略图（对应逻辑在 Media.swift）。

另外，网格缩略图还可以通过可选的代理方法thumbnail(for:at:)单独指定小尺寸封面，让照片墙滚动更省内存：

func thumbnail(for mediaBrowser: MediaBrowser, at index: Int) -> Media { return thumbArray[index] // 推荐使用小尺寸缩略图 }

进阶技巧：让照片墙浏览更丝滑的 4 个小配置

1. 开启预缓存，减少滑动卡顿：设置preCachingEnabled = true并配合setCurrentIndex(at:)，浏览器会提前加载当前页附近的图片，避免快速滑动时的白屏（相关实现见 MediaBrowser.swift）。
2. 设置占位图，提升加载体验：placeholderImage = (image: yourImage, isAppliedForAll: true)，网络图片加载前会先显示占位图。
3. 照片墙支持多选：开启displaySelectionButtons = true，网格缩略图和全屏大图都能勾选，配合mediaDid(selected:at:in:)代理方法即可拿到选择结果，非常适合做"多选图片"类功能。
4. 大图自适应：zoomPhotosToFill = true让全屏大图自动填满屏幕，支持双指缩放查看细节。

总结

MediaBrowser 把照片墙、视频缩略图、全屏大图浏览、多选交互这些常见需求封装得足够简单，核心思路就三步：创建MediaBrowser→ 实现两个数据代理方法 → 打开enableGrid/startOnGrid。如果遇到配置上的疑问，可以直接参考 Demo 工程 ViewController.swift 里 9 种不同场景的完整用法，照着改就能快速落地到自己的项目里。

【免费下载链接】MediaBrowser🏞 A simple iOS photo and video browser with optional grid view, captions and selections written in Swift5.0项目地址: https://gitcode.com/gh_mirrors/me/MediaBrowser