简单的PhotoBrowser/Viewer灵感来自Facebook,Twitter照片浏览器由Swift编写

SKPhoto浏览器

[![所有贡献者](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors-)

简单的PhotoBrowser/Viewer灵感来自Facebook,Twitter照片浏览器由Swift编写

雨燕5 构建状态 平台 贡献

特征

  • 通过提供对象或 URL 数组字符串来显示一个或多个图像。UIImage
  • 照片可以缩放和平移,并且可以显示可选标题
  • 简约的类似Facebook的界面,向上/向下滑动以关闭
  • 能够自定义控制。(隐藏/显示控件的工具栏,/滑动控件)
  • 处理和缓存来自 Web 的照片
  • 景观处理
  • 删除照片支持(通过关闭再见)。通过设置displayDelete=true在状态栏中显示删除图标,可以从委托功能获取已删除的索引
表/集合视图示例 按钮点击示例 动图示例
样本 样本 样本

Requirements

    - iOS 9.0+
    - Swift 2.0+
    - ARC

Version vs Swift version.

    Below is a table that shows which version of SKPhotoBrowser you should use for your Swift version.
Swift version SKPhotoBrowser version
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

Installation

CocoaPods

available on CocoaPods. Just add the following to your project Podfile:

pod 'SKPhotoBrowser'
use_frameworks!

Carthage

To integrate into your Xcode project using Carthage, specify it in your Cartfile:

github "suzuki-0000/SKPhotoBrowser"
Ogdl

Info.plist

If you want to use share image feature, it includes save image into galery, so you should specify a permission into your Info.plist (if you haven't done it yet).

<key>NSPhotoLibraryAddUsageDescription</key>
<string>Used to save images into your galery</string>

Swift Package Manager

Available in Swift Package Manager. Use the repository URL in Xcode

Usage

See the code snippet below for an example of how to implement, or see the example project.

from 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: {})
Swift

from 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: {})
Swift

from local files:

// 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: {})
Swift

If you want to use zooming effect from an existing view, use another initializer:

// 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: {})
}
Swift

Custom

Toolbar

You can customize Toolbar via 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)
Swift

Colors

You can customize text, icon and background colors via SKPhotoBrowserOptions or 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'
Swift

Images

You can customize the padding of displayed images via SKPhotoBrowserOptions

SKPhotoBrowserOptions.imagePaddingX = 50                                   // image padding left and right will be 25
SKPhotoBrowserOptions.imagePaddingY = 50                                   // image padding top and bottom will be 25
Swift

Statusbar

You can customize the visibility of the Statusbar in browser view via SKPhotoBrowserOptions

SKPhotoBrowserOptions.displayStatusbar = false                             // status bar will be hidden
Swift

Close And Delete Buttons

That how you can customize close and delete buttons

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

Custom Cache From Web URL

You can use SKCacheable protocol if others are adaptable. (SKImageCacheable or 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()
Swift

CustomButton Image

Close, Delete buttons are able to change image and frame.

browser.updateCloseButton(UIImage())
browser.updateUpdateButton(UIImage())
Swift

Delete Photo

You can delete your photo for your own handling. detect button tap from delegate function.removePhoto

Photo Captions

Photo captions can be displayed simply bottom of PhotoBrowser. by setting the property on specific photos:caption

let photo = SKPhoto.photoWithImage(UIImage())
photo.caption = "Lorem Ipsum is simply dummy text of the printing and typesetting industry."
Swift

SwipeGesture

vertical swipe can enable/disable:

SKPhotoBrowserOptions.disableVerticalSwipe = true
Swift

Delegate

There's some trigger point you can handle using delegate. those are optional.
See SKPhotoBrowserDelegate for more details.

  • 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
}

Swift

Options

You can access via , which can use for browser control.
See SKPhotoBrowserOptions for more details.
SKPhotoBrowserOptions

  • single tap handling, dismiss/noaction
  • blackArea handling which is appearing outside of photo
  • bounce animation when appearing/dismissing
  • text color, font, or more
SKPhotoBrowserOptions.enableZoomBlackArea    = true  // default true
SKPhotoBrowserOptions.enableSingleTapDismiss = true  // default false
Swift

Photos from

License

available under the MIT license. See the LICENSE file for more info.

Contributors

Thanks goes to these wonderful people (emoji key):


Oreo Chen

?

Alexander Khitev

?

K Rummler

?

Mads Bjerre

?

Meng Ye

?

_ant_one

?

Tim Roesner

?

胥冥

?

Kevin Wolkober

?

PJ Gray

?

ghysrc

?

Josef Doležal

?

Mark Goody

?

Philippe Riegert

?

Bryan Irace

?

dirtmelon

?

Heberti Almeida

?

Felix Weiss

?

.Some

?

Onur Var

?

Andrew Barba

?

This project follows the all-contributors specification. Contributions of any kind welcome!

GitHub

https://github.com/suzuki-0000/SKPhotoBrowser