SKPhotoBrowser
由 Swift 编写的简单 PhotoBrowser/Viewer,受到 Facebook 和 Twitter 图片浏览器的启发
功能
- 通过提供
UIImage
对象或 URL 数组的字符串,显示一个或多个图像。 - 照片可以缩放和拖动,并可以显示可选的标题
- 极简 Facebook 风格的界面,上下滑动以关闭
- 可以自定义控制。 (隐藏/显示控制栏,左右滑动控制)
- 处理和缓存来自网络的图片
- 支持横向操作
- 支持删除图片功能(通过 offbye)。通过设置 displayDelete=true 在状态栏显示删除图标,可以从代理函数 didDeleted 获取已删除的下标。
表格/集合视图示例 | 按钮点击示例 |
---|---|
![]() |
![]() |
需求
- iOS 8.0+
- Swift 2.0+
- ARC
版本与Swift版本比较。
以下是表格,显示了您应该使用哪个SKPhotoBrowser版本与您的Swift版本搭配。
Swift版本 | SKPhotoBrowser版本 |
---|---|
5.0 | >= 6.1.0 |
4.2 | >= 6.0.0 |
4.1 | >= 5.0.0 |
3.2 | >= 4.0.0 |
2.3 | 2.0.4 - 3.1.4 |
2.2 | <= 2.0.3 |
安装
CocoaPods
可在CocoaPods上使用。只需将以下内容添加到项目的Podfile中
pod 'SKPhotoBrowser'
use_frameworks!
Carthage
要使用Carthage将SKPhotoBrowser集成到Xcode项目中,请在Cartfile中指定它
github "suzuki-0000/SKPhotoBrowser"
使用方法
请参考以下代码示例了解如何实现,或查看示例项目。
从UIImages
// 1. create SKPhoto Array from UIImage
var images = [SKPhoto]()
let photo = SKPhoto.photoWithImage(UIImage())// add some UIImage
images.append(photo)
// 2. create PhotoBrowser Instance, and present from your viewController.
let browser = SKPhotoBrowser(photos: images)
browser.initializePageIndex(0)
present(browser, animated: true, completion: {})
从URLs
// 1. create URL Array
var images = [SKPhoto]()
let photo = SKPhoto.photoWithImageURL("https://placehold.jp/150x150.png")
photo.shouldCachePhotoURLImage = false // you can use image cache by true(NSCache)
images.append(photo)
// 2. create PhotoBrowser Instance, and present.
let browser = SKPhotoBrowser(photos: images)
browser.initializePageIndex(0)
present(browser, animated: true, completion: {})
从本地文件
// 1. create images from local files
var images = [SKLocalPhoto]()
let photo = SKLocalPhoto.photoWithImageURL("..some_local_path/150x150.png")
images.append(photo)
// 2. create PhotoBrowser Instance, and present.
let browser = SKPhotoBrowser(photos: images)
browser.initializePageIndex(0)
present(browser, animated: true, completion: {})
如果您想使用现有视图的缩放效果,请使用另一个初始化器
// e.g.: some tableView or collectionView.
func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) {
let cell = collectionView.cellForItemAtIndexPath(indexPath)
let originImage = cell.exampleImageView.image // some image for baseImage
let browser = SKPhotoBrowser(originImage: originImage ?? UIImage(), photos: images, animatedFromView: cell)
browser.initializePageIndex(indexPath.row)
present(browser, animated: true, completion: {})
}
自定义
工具栏
您可以通过SKPhotoBrowserOptions自定义工具栏。
SKPhotoBrowserOptions.displayToolbar = false // all tool bar will be hidden
SKPhotoBrowserOptions.displayCounterLabel = false // counter label will be hidden
SKPhotoBrowserOptions.displayBackAndForwardButton = false // back / forward button will be hidden
SKPhotoBrowserOptions.displayAction = false // action button will be hidden
SKPhotoBrowserOptions.displayHorizontalScrollIndicator = false // horizontal scroll bar will be hidden
SKPhotoBrowserOptions.displayVerticalScrollIndicator = false // vertical scroll bar will be hidden
let browser = SKPhotoBrowser(originImage: originImage, photos: images, animatedFromView: cell)
颜色
您可以通过SKPhotoBrowserOptions或SKToolbarOptions自定义文本、图标和背景颜色。
SKPhotoBrowserOptions.backgroundColor = UIColor.whiteColor() // browser view will be white
SKPhotoBrowserOptions.textAndIconColor = UIColor.blackColor() // text and icons will be black
SKToolbarOptions.textShadowColor = UIColor.clearColor() // shadow of toolbar text will be removed
SKToolbarOptions.font = UIFont(name: "Futura", size: 16.0) // font of toolbar will be 'Futura'
图片
您可以通过SKPhotoBrowserOptions自定义显示图片的填充。
SKPhotoBrowserOptions.imagePaddingX = 50 // image padding left and right will be 25
SKPhotoBrowserOptions.imagePaddingY = 50 // image padding top and bottom will be 25
状态栏
您可以通过SKPhotoBrowserOptions自定义浏览器视图中状态栏的可见性。
SKPhotoBrowserOptions.displayStatusbar = false // status bar will be hidden
关闭和删除按钮
这就是您如何自定义关闭和删除按钮的方法。
SKPhotoBrowserOptions.displayDeleteButton = true // delete button will be shown
SKPhotoBrowserOptions.swapCloseAndDeleteButtons = true // now close button located on right side of screen and delete button is on left side
SKPhotoBrowserOptions.closeAndDeleteButtonPadding = 20 // set offset from top and from nearest screen edge of close button and delete button
自定义从Web URL缓存
如果其他可适应,可以使用SKCacheable协议。(SKImageCacheable或SKRequestResponseCacheable)
e.g. SDWebImage
// 1. create custom cache, implement in accordance with the protocol
class CustomImageCache: SKImageCacheable { var cache: SDImageCache }
// 2. replace SKCache instance with custom cache
SKCache.sharedCache.imageCache = CustomImageCache()
自定义按钮图片
关闭、删除按钮可更改图片和边框。
browser.updateCloseButton(UIImage())
browser.updateUpdateButton(UIImage())
删除照片
你可以删除自己的照片自行处理。通过从 removePhoto
代理函数检测按钮点击。
照片标题
可以在PhotoBrowser底部简单显示照片标题。通过在特定照片上设置caption
属性。
let photo = SKPhoto.photoWithImage(UIImage())
photo.caption = "Lorem Ipsum is simply dummy text of the printing and typesetting industry."
滑动手势
垂直滑动可启用/禁用。
SKPhotoBrowserOptions.disableVerticalSwipe = true
代理
有一些触发点可以通过代理来处理,这些都是可选的。更多信息请参阅 SKPhotoBrowserDelegate。
- didShowPhotoAtIndex(_ index:Int)
- willDismissAtPageIndex(_ index:Int)
- willShowActionSheet(_ photoIndex: Int)
- didDismissAtPageIndex(_ index:Int)
- didDismissActionSheetWithButtonIndex(_ buttonIndex: Int, photoIndex: Int)
- didScrollToIndex(_ index: Int)
- removePhoto(_ browser: SKPhotoBrowser, index: Int, reload: (() -> Void))
- viewForPhoto(_ browser: SKPhotoBrowser, index: Int) -> UIView?
- controlsVisibilityToggled(_ browser: SKPhotoBrowser, hidden: Bool)
let browser = SKPhotoBrowser(originImage: originImage, photos: images, animatedFromView: cell)
browser.delegate = self
// MARK: - SKPhotoBrowserDelegate
func didShowPhotoAtIndex(_ index: Int) {
// when photo will be shown
}
func willDismissAtPageIndex(_ index: Int) {
// when PhotoBrowser will be dismissed
}
func didDismissAtPageIndex(_ index: Int) {
// when PhotoBrowser did dismissed
}
选项
可以通过 SKPhotoBrowserOptions
访问,用于浏览器控制。更多详情请参阅 SKPhotoBrowserOptions。
- 单次点击处理,消失/无操作
- 处理出现在照片外的黑色区域
- 出现/消失时的弹跳动画
- 文本颜色、字体等
SKPhotoBrowserOptions.enableZoomBlackArea = true // default true
SKPhotoBrowserOptions.enableSingleTapDismiss = true // default false
来自
许可证
可在MIT许可证下使用。更多信息请参阅LICENSE文件。
贡献者
感谢以下这些优秀的人们(emoji key)
此项目遵循 all-contributors 规范。欢迎任何类型的贡献!