🖼 ImageSlideshow

可定制的 Swift 图片轮播,带有循环滚动、定时器和全屏查看器

Build Status Version Carthage Compatible License Platform

📱 示例

要运行示例项目,请克隆仓库,并在 Example 目录下运行 pod install

🔧 安装

CocoaPods

ImageSlideshow 可通过 CocoaPods 获取。要安装它,只需将以下行添加到您的 Podfile

pod 'ImageSlideshow', '~> 1.9.0'

Carthage

要使用 Carthage 将 ImageSlideshow 集成到您的 Xcode 项目中,请在您的 Cartfile 中指定它

github "zvonicek/ImageSlideshow" ~> 1.9.0

Carthage 不包含外部提供者的 InputSources(因为依赖于这些提供者),因此您需要从 ImageSlideshow/Classes/InputSources 手动获取您需要的那个。

手动

一种可能性是从 releases page 下载已构建的框架 (ImageSlideshow.framework.zip) 并将其与您的项目链接(在目标中的 Linked Frameworks and Libraries 下)。然而,这目前存在问题,因为 Swift 发展迅速 -- 该框架是为单个 Swift 版本构建的,可能无法在以前/未来的版本上工作。

或者,您也可以抓取整个 ImageSlideshow 目录并将其复制到您的项目中。请务必删除您不需要的外部 Input Sources。

关于 Swift 2.3、Swift 3 和 Swift 4 支持的说明

1.4 版本支持 Swift 4。从 1.0 版本开始支持 Swift 3,对于 Swift 2.2 和 Swift 2.3 兼容的代码,请使用 0.6 版本或 swift-2.3 分支。

🔨 如何使用

将 ImageSlideshow 视图添加到您的视图层级结构中,可以在 Interface Builder 中或代码中进行。

加载图片

通过在 ImageSlideshow 实例上使用 setImageInputs 方法和 InputSource 数组来设置图片。默认情况下,您可以使用 ImageSource,它接受 UIImage 或其他一些用于最流行的网络库的 InputSource。您还可以通过实现 InputSource 协议来创建自己的输入源。

InputSource 名称 Pod
AlamofireImage AlamofireSource pod "ImageSlideshow/Alamofire"
AFNetworking AFURLSource pod "ImageSlideshow/AFURL"
SDWebImage SDWebImageSource pod "ImageSlideshow/SDWebImage"
Kingfisher KingfisherSource pod "ImageSlideshow/Kingfisher"
Parse ParseSource pod "ImageSlideshow/Parse"
slideshow.setImageInputs([
  ImageSource(image: UIImage(named: "myImage"))!,
  ImageSource(image: UIImage(named: "myImage2"))!,
  AlamofireSource(urlString: "https://images.unsplash.com/photo-1432679963831-2dab49187847?w=1080"),
  KingfisherSource(urlString: "https://images.unsplash.com/photo-1432679963831-2dab49187847?w=1080"),
  ParseSource(file: PFFile(name:"image.jpg", data:data))
])

配置

行为可通过以下属性配置

页面指示器

可以使用 ImageSlideshow 上的 pageIndicator 属性自定义页面指示器。默认情况下,使用普通的 UIPageControl。如果需要,可以自定义页面控件

let pageIndicator = UIPageControl()
pageIndicator.currentPageIndicatorTintColor = UIColor.lightGray
pageIndicator.pageIndicatorTintColor = UIColor.black
slideshow.pageIndicator = pageIndicator

此外,还提供了一个简单的标签页面指示器,以 "5/21" 样式(第二十一个页面中的第五页)显示页面

slideshow.pageIndicator = LabelPageIndicator()

您还可以通过采用 PageIndicatorView 协议来使用自己的页面指示器。

页面指示器的位置可以通过将 PageIndicatorPosition 值分配给 ImageSlideshow 上的 pageIndicatorPosition 属性来配置。您可以分别指定水平和垂直定位。

水平定位选项有:.left(padding: Int).center.right(padding: Int)

垂直定位选项有:.top.bottom.undercustomTop(padding: Int)customBottom(padding: Int)customUnder(padding: Int)

示例

slideshow.pageIndicatorPosition = PageIndicatorPosition(horizontal: .left(padding: 20), vertical: .bottom)

活动指示器

默认情况下,活动指示器不显示,但您可以通过将 DefaultActivityIndicator 实例设置为 ImageSlideshow 来启用它

slideshow.activityIndicator = DefaultActivityIndicator()

您可以自定义指示器的样式和颜色

slideshow.activityIndicator = DefaultActivityIndicator(style: .white, color: nil)

还可以选择使用您自己的活动指示器。您只需要实现 ActivityIndicatorViewActivityIndicatorFactory 协议。有关更多信息,请参阅 ActivityIndicator.swift

全屏视图

还可以使用附加的 FullScreenSlideshowViewController 打开全屏图像视图。最简单的方法是调用

override func viewDidLoad() {
  let gestureRecognizer = UITapGestureRecognizer(target: self, action: #selector(ViewController.didTap))
  slideshow.addGestureRecognizer(gestureRecognizer)
}

func didTap() {
  slideshow.presentFullScreenController(from: self)
}

如果需要更高级的行为,也可以手动实例化和配置 FullScreenSlideshowViewController

👤 作者

Petr Zvoníček

📄 许可证

ImageSlideshow 在 MIT 许可证下可用。有关更多信息,请参阅 LICENSE 文件。

👀 参考

灵感来自项目