SlideKit
SlideKit 是一种充满灵魂的 slidey UINavigationController 过渡。
基于简单的 UINavigationController 语法,快速轻松地创建具有背景图像或透明顶底栏的 onboarding 流程。
开始使用
SlideKit 提供了多种方式来实现滑动推送和弹出过渡,应用于 UINavigationController
。本节提供了将这些框架添加到项目中以及使用 Interface Builder 或代码的方式入门的说明。
将 SlideKit 添加到您的 iOS 项目中
您可以使用 CocoaPods 或 Carthage 来安装 SlideKit。
CocoaPods
pod 'SlideKit'
Carthage
github "Kjens93/SlideKit"
使用 SlideKit
SlideKit 可以通过 Interface Builder、代码或两者的组合来使用。
在使用 Interface Builder 中使用 SlideKit
为了给你的导航流程添加滑动过渡效果,只需将你的 UINavigationController
修改为 SlideNavigationController
的实例即可。
无需编写任何代码,你的导航流程就会开始使用滑动过渡效果。你还可以通过与你的导航流程中任何视图控制器的 navigationController
进行交互,在代码中进一步自定义过渡效果。例如,你可以在视图控制器的 viewWillAppear(animated:)
方法中添加以下代码来改变推送过渡的弹簧阻尼系数:
import SlideKit
class ViewController: UIViewController {
override func viewWillAppear(animated: Bool) {
super.viewWillAppear(animated: animated)
let slideNavigationController = self.navigationController as? SlideNavigationController
slideNavigationController?.pushTransition.springDampingRatio = 0.75
}
}
作为替代,你可以在 SlideNavigationController
的子类上进行操作,并在子类的 viewDidLoad()
方法中进行自定义。
在代码中使用 SlideKit
import SlideKit
class CustomNavigationController: SlideNavigationController {
override func viewDidLoad() {
super.viewDidLoad()
//Customize push and pop transition animation timings
pushTransition.delay = 0.15
pushTransition.duration = 0.45
popTransition.springDampingRatio = 0.75
popTransition.animationOptions = [.curveEaseInOut]
popTransition.backgroundColor = .clear
//etc...
//Add a background image to navigation stack for onboarding experience
let imageView = UIImageView(image: UIImage(named: "BackgroundImage"))
imageView.contentMode = .scaleAspectFill
imageView.clipsToBounds = true
imageView.frame = view.bounds
imageView.autoResizingMask = [.flexibleWidth, .flexibleHeight]
view.insertSubview(imageView, at: 0)
view.layoutIfNeeded()
//etc...
//Make the navigation bar transparent for a cleaner onboarding experience
navigationBar.backgroundColor = .clear
navigationBar.shadowImage = UIImage()
navigationBar.setBackgroundImage(UIImage(), for: .default)
}
}