ATGMediaBrowser
ATGMediaBrowser 是一个支持多种预定义切换样式的图片幻灯片查看器,同时允许客户端定义新的切换样式。它支持水平和垂直手势来控制切换,添加新的切换样式既有趣又简单。以下是一些切换样式示例:
垂直缩放进退
水平滑动进入
水平滑动退出
水平移动进退
它支持通常预期的功能,如捏合缩放、双击缩放、交互式关闭切换、从放大状态关闭到目标框架等。您可以选择线性或轮播风格进行媒体浏览。
安装
Carthage
ATGMediaBrowser
可以通过 Carthage 安装。要做到这一点,只需将以下行添加到您的 Cartfile
中即可;
github "altayer-digital/ATGMediaBrowser" ~> 1.0.0
Cocoapods
要在 Cocoapods 中使用 ATGMediaBrowser
,请将以下行添加到 Podfile
中;
pod 'ATGMediaBrowser', '~> 1.0'
使用方法
媒体浏览器可按以下方式使用:
let mediaBrowser = MediaBrowserViewController(dataSource: self)
present(mediaBrowser, animated: true, completion: nil)
self
需要遵循MediaBrowserViewControllerDataSource
协议,并实现以下方法:
func numberOfItems(in mediaBrowser: MediaBrowserViewController) -> Int {
// return number of images to be shown
}
func mediaBrowser(_ mediaBrowser: MediaBrowserViewController, imageAt index: Int, completion: @escaping MediaBrowserViewControllerDataSource.CompletionBlock) {
// Fetch the required image here. Pass it to the completion
// block along with the index, zoom scale, and error if any.
completion(index, image, ZoomScale.default, nil)
}
为什么选择这个方法?
您可能会问,为什么我们不接受图像作为图像数组或URL数组?原因是我们想要坚持单一职责原则。
对于少量的图像,在内存中保存图像数组可能是微不足道的,但如果我们保存的图像数量足够多,以至于造成大量内存占用,我们就需要在媒体浏览器内部进行缓存,而这并不是媒体浏览器应该做的事情。
接受URL将要求媒体浏览器执行网络请求,下载和缓存图像,然后再显示它们。这将打破单一职责原则。
因此,媒体浏览器将避免所有它不该做的角色,并坚持它擅长的事情。另外,您可以选择如何下载和缓存图像,以及使用哪个库来执行同样的任务,实际上可以完全控制内容。
过渡效果
ATGMediaBrowser提供了8种内置过渡效果。在此基础上,任何人都可以轻松地使用ContentTransformer
闭包创建新的过渡效果。更多细节可以在自定义过渡效果部分找到。
内置过渡效果
ATGMediaBrowser提供了8种内置过渡效果。它们是;
- horizontalMoveInOut
- verticalMoveInOut
- horizontalSlideOut
- verticalSlideOut
- horizontalSlideIn
- verticalSlideIn
- horizontalZoomInOut
- verticalZoomInOut
为了使过渡效果按预期工作,每种过渡类型都必须在媒体浏览器中设置相关属性。例如,horizontalZoomInOut
需要horizontal
手势方向和previousToNext
绘制顺序。
mediaBrowser.contentTransformer = DefaultContentTransformers.horizontalZoomInOut
mediaBrowser.gestureDirection = .horizontal
mediaBrowser.drawOrder = .previousToNext
TADA!只需3行代码,你就已经更改了媒体浏览器的过渡样式。
自定义过渡
使用ATGMediaBrowser创建自定义过渡非常简单且有趣。ATGMediaBrowser过渡的基本概念是,内存中将始终有3个视图,即使要显示的图片总数为1或10,000,这一点也不会改变。过渡闭包将通过传递给它的位置更新这三个视图的转换。例如,过渡进度、视图重用、放大、缩小等疯狂 stuff 已经由ATGMediaBrowser处理。因此,为了创建自定义过渡,你的职责将是更新与相应位置相对应的每个内容视图的外观。
创建自定义过渡需要做三件事;
1. 选择手势方向
可以是horizontal
或vertical
。不一定要在水平过渡中按水平手势操作。方向仅定义手势将被检测的轴,过渡可以是在相反的轴上,如果需要的话。
2. 选择绘制顺序
可以是previousToNext
或nextToPrevious
。
previousToNext
意味着先绘制左/上内容视图,然后是中间视图,最后是右/下视图。nextToPrevious
意味着先绘制右/下内容视图,然后是中间视图,最后是左/上视图。
3. 实现ContentTransformer功能
ContentTransformer
是一个闭包,应根据位置更新内容视图的外观。当一个内容视图位于位置0
时,视图应完全充满屏幕可见给用户。当位置为-1
时,视图应具有上一个(通常是顶部/左边)项目的位置和外观。当位置为1
时,视图必须位于下一个(通常是底部/右边)项目的位置。
以下是horizontalMoveInOut
过渡的示例;
public static let horizontalMoveInOut: ContentTransformer = { contentView, position in
let widthIncludingGap = contentView.bounds.size.width + MediaContentView.interItemSpacing
contentView.transform = CGAffineTransform(translationX: widthIncludingGap * position, y: 0.0)
}
就这么简单。!
更多用法
浏览器样式
您可以设置浏览器样式为线性或轮播。轮播意味着您可以以环形方式滚动媒体项目,而线性意味着则不能。默认为carousel
。
mediaBrowser.browserStyle = .linear
媒体视图间隔
默认间隔为50.0点。
mediaBrowser.gapBetweenMediaViews = 64.0
如果您正在实现自定义内容转换器,您可以使用MediaContentView.interItemSpacing
来访问这个值。
显示页面控制
默认为true。您可以使用以下代码来隐藏页面控制;
mediaBrowser.shouldShowPageControl = false
隐藏控件
“控件”既包括页面控制也包括关闭按钮。您可以使用autoHideControls
设置为自动隐藏,或者使用hideControls
手动显示或隐藏它们。
mediaBrowser.autoHideControls = false
mediaBrowser.hideControls = false
交互式消失
默认交互式消失是启用的。交互式消失使用与gestureDirection
垂直方向的手势。您可以按照下面的示例禁用交互:
mediaBrowser.enableInteractiveDismissal = false
项索引
您可以使用变量 currentItemIndex
在媒体浏览器中访问当前项的索引。
自定义关闭按钮
您可以使用数据源回调函数 func mediaBrowser(_ mediaBrowser: MediaBrowserViewController, updateCloseButton button: UIButton)
来自定义关闭按钮。您将在此处获得一个 UIButton
实例,可以自定义外观、使用自动布局约束定位它,甚至添加目标以获取触摸事件。
如果您未对按钮添加任何约束,媒体浏览器将自动添加所需约束以确保其位于屏幕右上角。
将媒体浏览器丢弃到目标框架
如果您实现方法 func targetFrameForDismissal(_ mediaBrowser: MediaBrowserViewController) -> CGRect?
,媒体浏览器在关闭时会将当前显示的图片过渡到提供的目标框架。
版权和许可
ATGMediaBrowser 在 MIT 许可下可用。有关更多信息,请参见 LICENSE.md
。