我想知道如何创建 iOS 照片应用布局。我怎样才能让它看起来像放大到一个集合，同时导航栏显示一个后退按钮？
它是被推送到 UINavigationController 上的新 View Controller 吗？如果是这样，他们究竟是如何在扩展时设法匹配瓷砖的。
是否有第三方库可以让我轻松地重新创建这样的布局？
希望您能帮助我理解其工作原理。
最佳答案
要回答您的第一个问题，“它是一个被推送到 UINavigationController 上的新 View Controller 吗？”。是的，它是一个新的 View Controller 。 Apple 在这里使用的是 UIViewControllerTransitioningDelegate，它允许您呈现关于如何呈现和关闭 View Controller 的自定义动画。
现在关于第二个问题，“希望你能帮助我理解它是如何工作的概念。”没有简单的方法来表达它，因为涉及的内容很多。我已经重新创建了我将在下面展示的效果，但首先我需要解释一些核心原则。
来自 Apple 的文档，
When implementing your transitioning delegate object, you can return different animator objects depending on whether a view controller is being presented or dismissed. All transitions use a transition animator object—an object that conforms to the UIViewControllerAnimatedTransitioning protocol—to implement the basic animations. A transition animator object performs a set of animations over a finite period of time.
换句话说，UIViewControllerTransitioningDelegate 需要一个你创建的动画对象，它描述了 View Controller 应该如何呈现以及它应该如何消失。这些委托(delegate)方法中只有两个与您想要实现的目标相关，它们是:
func animationController(forPresented presented: UIViewController, presenting: UIViewController, source: UIViewController) -> UIViewControllerAnimatedTransitioning? {
let animator = PresentAnimator()
return animator
}
这会要求您的委托(delegate)提供在呈现 View Controller 时要使用的过渡动画对象。
func animationController(forDismissed dismissed: UIViewController) -> UIViewControllerAnimatedTransitioning? {
let animator = DismissAnimator()
return animator
}
这会要求您的委托(delegate)提供在关闭 View Controller 时要使用的过渡动画对象。
PresentAnimator 和 DismissAnimator 对象都符合 UIViewControllerAnimatedTransitioning。来自 Apple 的文档:
In your animator object, implement the transitionDuration(using:) method to specify the duration of your transition and implement the animateTransition(using:) method to create the animations themselves. Information about the objects involved in the transition is passed to your animateTransition(using:) method in the form of a context object. Use the information provided by that object to move the target view controller’s view on or off screen over the specified duration.
基本上，每个动画对象都会描述 View Controller 动画的持续时间以及动画的方式。
现在这里是所有这些的演示。这就是我们要实现的目标:
在 Storyboard中创建两个 View Controller 。我的第一个 View Controller 称为 ViewController，它包含一个 Collection View 和一个带有标识符“MediaCell”的 Collection View 单元格以及一个填充该 Collection View 单元格的图像。 Collection View 单元格有一个名为 ImageCollectionViewCell 的类，只有这个:
class ImageCollectionViewCell: UICollectionViewCell {
@IBOutlet weak var image: UIImageView! //links to the collection view cell's image
}
我的第二个 View Controller 称为 ImageRevealViewController，它只有一个 ImageView 和顶部的灰色 View ，我用它来模拟导航栏和自定义后退按钮(我已经用普通的 UINavigationController 导航栏尝试了所有这些但是 dismiss 动画师无法工作。虽然我的只是为了演示，但制作看起来和行为都像导航栏的东西并没有什么可耻的)。
相册
这将是您的 ViewController 的代码。基本上，这将是用户找到照片集的地方，就像相册一样。如您所见，我为我使用了两个测试图像。
import UIKit
class ViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {
@IBOutlet weak var collectionView: UICollectionView!
var selectedCell = UICollectionViewCell() //the selected cell, important for the animator
var media: [UIImage] = [UIImage]() //the photo album's images
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
media.append(UIImage(named: "testimage1")!)
media.append(UIImage(named: "testimage2")!)
collectionView.delegate = self
collectionView.dataSource = self
}
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
selectedCell = collectionView.cellForItem(at: indexPath)!
let selectedCellImage = selectedCell as! ImageCollectionViewCell
let mainStoryboard = UIStoryboard(name: "Main", bundle: nil)
let imageRevealVC = mainStoryboard.instantiateViewController(withIdentifier: "ImageRevealVC") as! ImageRevealViewController
imageRevealVC.transitioningDelegate = self
imageRevealVC.imageToReveal = selectedCellImage.image.image
/*
This is where I tried using the nav controller but things did not work out for the dismiss animator. I have commented it out.
*/
//let navController = UINavigationController(rootViewController: imageRevealVC)
//navController.transitioningDelegate = self
//navigationController?.pushViewController(imageRevealVC, animated: true)
present(imageRevealVC, animated: true, completion: nil)
}
func numberOfSections(in collectionView: UICollectionView) -> Int {
return 1
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return media.count
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "MediaCell", for: indexPath) as! ImageCollectionViewCell
cell.image.image = media[indexPath.row]
cell.image.contentMode = .scaleAspectFill
return cell
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
let itemsPerRow:CGFloat = 3
let hardCodedPadding:CGFloat = 2
let itemWidth = (collectionView.bounds.width / itemsPerRow) - hardCodedPadding
let itemHeight = itemWidth
return CGSize(width: itemWidth, height: itemHeight)
}
}
extension ViewController: UIViewControllerTransitioningDelegate {
func animationController(forPresented presented: UIViewController, presenting: UIViewController, source: UIViewController) -> UIViewControllerAnimatedTransitioning? {
let animator = PresentAnimator()
animator.originFrame = selectedCell.frame //the selected cell gives us the frame origin for the reveal animation
return animator
}
func animationController(forDismissed dismissed: UIViewController) -> UIViewControllerAnimatedTransitioning? {
let animator = DismissAnimator()
return animator
}
}
UIViewControllerTransitioningDelegate 在我谈到的动画对象旁边。请注意，在 Collection View 的 didSelect 中，我实例化了新的 View Controller 并使其转换委托(delegate)等于自身。
动画师
制作动画师总是需要三个步骤。
现在是现在的动画师。创建一个名为 PresentAnimator 的新 Swift 类并添加以下内容:
import Foundation
import UIKit
class PresentAnimator: NSObject, UIViewControllerAnimatedTransitioning {
let duration = 0.5
var originFrame = CGRect.zero
func transitionDuration(using transitionContext: UIViewControllerContextTransitioning?) -> TimeInterval {
return duration
}
func animateTransition(using transitionContext: UIViewControllerContextTransitioning) {
let containerView = transitionContext.containerView
let toView = transitionContext.view(forKey: UITransitionContextViewKey.to)!
//2) create animation
let finalFrame = toView.frame
let xScaleFactor = originFrame.width / finalFrame.width
let yScaleFactor = originFrame.height / finalFrame.height
let scaleTransform = CGAffineTransform(scaleX: xScaleFactor, y: yScaleFactor)
toView.transform = scaleTransform
toView.center = CGPoint(
x: originFrame.midX,
y: originFrame.midY
)
toView.clipsToBounds = true
containerView.addSubview(toView)
UIView.animate(withDuration: duration, delay: 0.0,
options: [], animations: {
toView.transform = CGAffineTransform.identity
toView.center = CGPoint(
x: finalFrame.midX,
y: finalFrame.midY
)
}, completion: {_ in
//3 complete the transition
transitionContext.completeTransition(
!transitionContext.transitionWasCancelled
)
})
}
}
现在是 Dismiss Animator。创建一个名为 DismissAnimator 的新类并添加以下内容:
import Foundation
import UIKit
class DismissAnimator: NSObject, UIViewControllerAnimatedTransitioning {
let duration = 0.5
func transitionDuration(using transitionContext: UIViewControllerContextTransitioning?) -> TimeInterval {
return duration
}
func animateTransition(using transitionContext: UIViewControllerContextTransitioning) {
//1) setup the transition
let containerView = transitionContext.containerView
let fromView = transitionContext.view(forKey: UITransitionContextViewKey.from)!
let toView = transitionContext.view(forKey: UITransitionContextViewKey.to)!
containerView.insertSubview(toView, belowSubview: fromView)
//2) animations!
UIView.animate(withDuration: duration, delay: 0.0, options: [], animations: {
fromView.transform = CGAffineTransform(scaleX: 0.1, y: 0.1)
}, completion: {_ in
//3) complete the transition
transitionContext.completeTransition(
!transitionContext.transitionWasCancelled
)
})
}
}
图像显示
现在是最后一步，显示图像的 View Controller 。在您的 ImageRevealController 中添加:
import UIKit
class ImageRevealViewController: UIViewController {
var imageToReveal: UIImage!
@IBOutlet weak var imageRevealed: UIImageView!
override func viewDidLoad() {
super.viewDidLoad()
imageRevealed.image = imageToReveal
}
@IBAction func backButton(_ sender: Any) {
dismiss(animated: true, completion: nil)
}
}
backButton 连接到我添加到 View 中的按钮，其作用类似于导航栏。您可以添加自己的后退指示器以使其更真实。
有关 UIViewControllerTransitioningDelegate 的更多信息，这里有一个部分 "From View Controller" disappears using UIViewControllerContextTransitioning ，您可以查看我提供的答案。
关于iOS swift : How to recreate a Photos App UICollectionView Layout，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44357103/