SnapSliderFilters 2.0

SnapSliderFilters 2.0

×

测试已测试✗
语言语言 SwiftSwift
许可证 MIT
发布最新发布2016年10月
SwiftSwift 版本3.0
SPM支持 SPM✗

由 Paul Jeannot 维护。

SnapSliderFilters 2.0

  • 作者：
  • Paul Jeannot

SnapSliderFilters

SnapSliderFilters 允许您轻松创建类似 SnapChat 的图片与滤镜之间的导航。您可以在幻灯片上方添加贴纸，在屏幕上轻触添加消息并将其放置在想要的位置，就像您在 SnapChat 上的日常操作一样！

Gif example 1 Gif example 2 Gif example 3

示例

要运行示例项目，请先从仓库中克隆，然后从 Example 目录中运行 pod install。此演示使您可以从相册导入自己的图片并保存最终编辑的图片。

要求

平台

  • Swift 2
  • Xcode 7
  • iOS 9

支持的设备

iPhone 4s, 5, 5s, 5c, 6, 6 Plus, 6s, 6s Plus，所有搭载了 iOS 9 的 iPad。

用法

滑块

要在您的 ViewController 中插入滑块，您需要创建滑块，加载数据并显示它。

滑块必须全屏显示。 SNUtils 允许您轻松地完成这个操作。

var slider = SNSlider(frame: CGRect(origin: CGPointZero, size: SNUtils.screenSize))

然后，您可以使用 Core Image Filter 从原始图片生成滤镜。 SNFilter.filterNameList 是一些可用于快速演示的滤镜。

// Create your original filter
var originalPicture = SNFilter(frame: slider.frame, withImage: UIImage(named: "yourPicture")!)
// Generate differents filters by passing in argument the original picture and an array of filter's name
var data  = SNFilter.generateFilters(originalPicture, filters: SNFilter.filterNameList)

您可以通过创建 SNSticker 并将其添加到适当的滤镜来在您的滤镜上方添加一些贴纸。

var sticker = SNSticker(frame: CGRect(x: 20, y: 0, width: 140, height: 140), image: UIImage(named: "sticker1")!)
// In case of overlapping, you can provide a zPosition (the default one is 0)
var sticker2 = SNSticker(frame: CGRect(x: 30, y: 0, width: 140, height: 140), image: UIImage(named: "sticker2")!, atZPosition: 2))

// 2 stickers will be added to the filter at index 1
self.data[1].addSticker(sticker)
self.data[1].addSticker(sticker2)

您的 ViewController 必须遵守 SNSliderDataSource 协议。它允许滑块使用您自己的数据填充。

extension ViewController: SNSliderDataSource {

  // The number of SNFilters that you want in the slider
  func numberOfSlides(slider: SNSlider) -> Int {
    return data.count
  }

  // For a given index, you return the corresponding SNFilter
  func slider(slider: SNSlider, slideAtIndex index: Int) -> SNFilter {
    return data[index]
  }

  // The starting index of the slider
  func startAtIndex(slider: SNSlider) -> Int {
    return 0
  }
}

最终，您可以显示滑块。

slider.dataSource = self
slider.userInteractionEnabled = true
view.addSubview(slider)
slider.reloadData()

文本框

如果您想在滑块上方添加类似 SnapChat 的文本框，您也可以轻松完成。首先，创建 SNTextField：您需要传递文本框的 y 起始点，屏幕的宽度和高度（再次提醒，SNUtils 可以帮助您）。

var textfield = SNTextField(y: SNUtils.screenSize.height/2, width: SNUtils.screenSize.width, heightOfScreen: SNUtils.screenSize.height)

确保在初始化之后将其添加到所有视图上方，然后显示它

textField.layer.zPosition = 100
self.view.addSubview(textField)

以下是一些示例代码，用于创建键盘行为观察器和检测点击手势

var tapGesture:UITapGestureRecognizer = UITapGestureRecognizer(target: self, action: #selector(handleTap))
tapGesture.delegate = self
slider.addGestureRecognizer(tapGesture)

NSNotificationCenter.defaultCenter().addObserver(self.textField, selector: #selector(SNTextField.keyboardWillShow(_:)), name: UIKeyboardWillShowNotification, object: nil)
NSNotificationCenter.defaultCenter().addObserver(self.textField, selector: #selector(SNTextField.keyboardWillHide(_:)), name: UIKeyboardWillHideNotification, object: nil)
NSNotificationCenter.defaultCenter().addObserver(self.textField, selector: #selector(SNTextField.keyboardTypeChanged(_:)), name: UIKeyboardDidShowNotification, object: nil)

您的ViewController必须遵守UIGestureRecognizerDelegate协议。请在文件末尾添加此扩展

extension ViewController: UIGestureRecognizerDelegate {
  func handleTap() {
    self.textField.handleTap()
  }
}

最后，不要忘记移除观察器

override func viewWillDisappear(animated: Bool) {
  NSNotificationCenter.defaultCenter().removeObserver(textField)
}

按钮

您还可以添加一些类似于Snap的按钮，使用非常简单的target-action方法

private let button = SNButton(frame: CGRect(x: 20, y: SNUtils.screenSize.height - 35, width: 33, height: 30), withImageNamed: "saveButton")

button.setAction {
  [weak weakSelf = self] in
  // To do when the button is pressed
}

view.addSubview(button)

获取最终编辑后的图像

let picture = SNUtils.screenShot(self.view)

如果您想从最终图像中去除屏幕上不需要的内容（例如按钮），可以创建另一个UIView，将其所有希望包含在图片中的内容作为子视图添加，然后对这一个视图执行截屏

您可以在示例项目中找到一个此方法的示例（请参见screenView）。

作者

Paul Jeannot，居住于法国孔皮埃涅科技大学的计算机科学与工程学生。联系方式为[email protected]

许可证

由Icons8提供的免费图标

SnapSliderFilters遵循MIT许可证。有关更多信息，请参阅LICENSE文件。