framework - ¿Existe una API pública para la interfaz de usuario de visualización de tarjeta que se puede ver en iOS 10?

que es uikit ios

Question

La aplicación de música en iOS 10 adopta una nueva apariencia de tarjeta: la pantalla Reproduciendo ahora se desliza hacia arriba, mientras que la vista de abajo en la jerarquía se aleja, sobresaliendo ligeramente en la parte superior de la pantalla.

Aquí está el ejemplo de la ventana de redacción de Mail:

Esta metáfora también se puede ver en Overcast, el popular reproductor de podcast:

¿Hay una función en UIKit para lograr esta apariencia de tarjeta?

Answer 1

Ok, intentaré darle una solución compacta con un mínimo de código.

Solución rápida. modalPresentationStyle presentar un controlador de manera modal con modalPresentationStyle - property establecida en .overCurrentContext . Puede establecer el valor antes de preset(controller:...) -method get call o en prepare(for:...) -one si se trata de una transición segue. Para deslizar hacia arriba use modalTransitionStyle establecido en .coverVertical .

Para "alejar" la vista de origen, simplemente actualice sus límites en la viewWill(Diss)appear métodos viewWill(Diss)appear . En la mayoría de los casos esto funcionará.

No olvide configurar la vista de fondo de su controlador modal de forma transparente para que la vista subyacente siga siendo visible.

Deslizándose hacia arriba / abajo suavemente. Es necesario configurar una transition entre los controladores de una manera adecuada. Si te fijas más en la aplicación de música de Apple, verás una forma de ocultar el controlador superior con un gesto deslizante hacia abajo. Puede personalizar su vista (des) apariencia también. Echa un vistazo a este artículo . Utiliza UIKit métodos UIKit . Desafortunadamente, esta forma requiere mucho código, pero puede usar bibliotecas de terceros para configurar las transiciones. Como este

Answer 2

Actualización: la parte interactiva de esta demostración no funciona en iOS 11 por alguna razón. Apple muestra una técnica diferente en WWDC 2017 Sesión 230: Animaciones avanzadas con UIKit donde utilizan UIViewPropertyAnimator

Tengo una demostración básica de esta técnica aquí: https://github.com/peteog/CardUI

Este tipo de interfaz de usuario se puede crear utilizando transiciones UIViewController personalizadas , UIPresentationController y UIViewPropertyAnimator .

Aplicación de ejemplo: https://github.com/peteog/CardUIExample

Primero crea una subclase UIPresentationController . Esta voluntad:

• Añadir una vista de atenuación
• Transforme el controlador de vista de presentación para insertarlo desde la barra de estado
• Establece el marco de la vista presentada para hacer el efecto de la carta.

Código:

import UIKit

class PresentationController: UIPresentationController {
    private let dimmingView: UIView = {
        let dimmingView = UIView()
        dimmingView.backgroundColor = UIColor(white: 0, alpha: 0.5)
        dimmingView.alpha = 0
        return dimmingView
    }()

    // MARK: UIPresentationController

    override func presentationTransitionWillBegin() {
        guard let containerView = containerView,
            let presentedView = presentedView else { return }

        dimmingView.frame = containerView.bounds
        containerView.addSubview(dimmingView)
        containerView.addSubview(presentedView)

        guard let transitionCoordinator = presentingViewController.transitionCoordinator else { return }

        transitionCoordinator.animateAlongsideTransition(in: presentingViewController.view, animation: { _ in
            self.presentingViewController.view.transform = CGAffineTransform(scaleX: 0.94, y: 0.94)
            if !transitionCoordinator.isInteractive {
                (self.presentingViewController as? ViewController)?.statusBarStyle = .lightContent
            }
        })

        transitionCoordinator.animate(alongsideTransition: { _ in
            self.dimmingView.alpha = 1.0
        })
    }

    override func presentationTransitionDidEnd(_ completed: Bool) {
        if !completed {
            dimmingView.removeFromSuperview()
        }

        if completed {
            (presentingViewController as? ViewController)?.statusBarStyle = .lightContent
        }
    }

    override func dismissalTransitionWillBegin() {
        guard let transitionCoordinator = presentingViewController.transitionCoordinator else { return }
        transitionCoordinator.animate(alongsideTransition: { _ in
            self.dimmingView.alpha = 0
        })

        transitionCoordinator.animateAlongsideTransition(in: presentingViewController.view, animation: { _ in
            self.presentingViewController.view.transform = CGAffineTransform.identity
            if !transitionCoordinator.isInteractive {
                (self.presentingViewController as? ViewController)?.statusBarStyle = .default
            }
        })
    }

    override func dismissalTransitionDidEnd(_ completed: Bool) {
        guard let transitionCoordinator = presentingViewController.transitionCoordinator else { return }
        if transitionCoordinator.isCancelled {
            return
        }

        if completed {
            dimmingView.removeFromSuperview()
            (presentingViewController as? ViewController)?.statusBarStyle = .default
        }
    }

    override var frameOfPresentedViewInContainerView: CGRect {
        guard let containerView = containerView else { return .zero }
        var frame = containerView.bounds
        frame.size.height -= 40
        frame.origin.y += 40
        return frame
    }

    // MARK: UIViewController

    override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) {
        super.viewWillTransition(to: size, with: coordinator)

        guard let containerView = containerView else { return }
        coordinator.animate(alongsideTransition: { _ in
            self.dimmingView.frame = containerView.bounds
        })
    }
}

A continuación necesitamos un objeto que hará la animación entre las dos pantallas:

import UIKit

class AnimationController: NSObject, UIViewControllerAnimatedTransitioning {
    enum Direction {
        case present
        case dismiss
    }

    private let direction: Direction

    init(direction: Direction) {
        self.direction = direction
        super.init()
    }

    func transitionDuration(using transitionContext: UIViewControllerContextTransitioning?) -> TimeInterval {
        return 0.3
    }

    func animateTransition(using transitionContext: UIViewControllerContextTransitioning) {
        let animator = interruptibleAnimator(using: transitionContext)
        animator.startAnimation()
    }

    func interruptibleAnimator(using transitionContext: UIViewControllerContextTransitioning) -> UIViewImplicitlyAnimating {
        let duration = transitionDuration(using: transitionContext)
        let animator = UIViewPropertyAnimator(duration: duration, curve: .linear)
        let containerView = transitionContext.containerView
        let containerFrame = containerView.frame

        switch direction {
        case .present:
            guard let toViewController = transitionContext.viewController(forKey: .to),
                let toView = transitionContext.view(forKey: .to)
                else { fatalError() }

            var toViewStartFrame = transitionContext.initialFrame(for: toViewController)
            let toViewFinalFrame = transitionContext.finalFrame(for: toViewController)
            toViewStartFrame = toViewFinalFrame
            toViewStartFrame.origin.y = containerFrame.size.height - 44
            toView.frame = toViewStartFrame
            animator.addAnimations {
                toView.frame = toViewFinalFrame
            }
        case .dismiss:
            guard let fromViewController = transitionContext.viewController(forKey: .from),
                let fromView = transitionContext.view(forKey: .from)
                else { fatalError() }

            var fromViewFinalFrame = transitionContext.finalFrame(for: fromViewController)
            fromViewFinalFrame.origin.y = containerFrame.size.height - 44
            animator.addAnimations {
                fromView.frame = fromViewFinalFrame
            }
        }

        animator.addCompletion { finish in
            if finish == .end {
                transitionContext.finishInteractiveTransition()
                transitionContext.completeTransition(true)
            } else {
                transitionContext.cancelInteractiveTransition()
                transitionContext.completeTransition(false)
            }
        }

        return animator
    }
}

Finalmente, enganche todo junto en el controlador de vista, agregando reconocedores de gestos para controlar la transición interactiva.

import UIKit

class ViewController: UIViewController, UIViewControllerTransitioningDelegate {
    var statusBarStyle: UIStatusBarStyle = .default {
        didSet {
            setNeedsStatusBarAppearanceUpdate()
        }
    }

    override var preferredStatusBarStyle: UIStatusBarStyle {
        return statusBarStyle
    }

    private var interactionController: UIPercentDrivenInteractiveTransition?

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white

        let cardView = UIView(frame: .zero)
        cardView.translatesAutoresizingMaskIntoConstraints = false
        cardView.backgroundColor = UIColor(red:0.976, green:0.976, blue:0.976, alpha:1)
        view.addSubview(cardView)

        let borderView = UIView(frame: .zero)
        borderView.translatesAutoresizingMaskIntoConstraints = false
        borderView.backgroundColor = UIColor(red:0.697, green:0.698, blue:0.697, alpha:1)
        view.addSubview(borderView)

        let cardViewTextLabel = UILabel(frame: .zero)
        cardViewTextLabel.translatesAutoresizingMaskIntoConstraints = false
        cardViewTextLabel.text = "Tap or drag"
        cardViewTextLabel.font = UIFont.boldSystemFont(ofSize: 16)
        view.addSubview(cardViewTextLabel)

        let cardViewConstraints = [
            cardView.heightAnchor.constraint(equalToConstant: 44),
            cardView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            cardView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            cardView.bottomAnchor.constraint(equalTo: view.bottomAnchor),
            borderView.heightAnchor.constraint(equalToConstant: 0.5),
            borderView.topAnchor.constraint(equalTo: cardView.topAnchor),
            borderView.leadingAnchor.constraint(equalTo: cardView.leadingAnchor),
            borderView.trailingAnchor.constraint(equalTo: cardView.trailingAnchor),
            cardViewTextLabel.centerXAnchor.constraint(equalTo: cardView.centerXAnchor),
            cardViewTextLabel.centerYAnchor.constraint(equalTo: cardView.centerYAnchor)
        ]
        NSLayoutConstraint.activate(cardViewConstraints)

        let tapGestureRecognizer = UITapGestureRecognizer(target: self, action: #selector(handlePresentTapGesture(gestureRecognizer:)))
        cardView.addGestureRecognizer(tapGestureRecognizer)

        let panGestureRecognizer = UIPanGestureRecognizer(target: self, action: #selector(handlePresentPanGesture(gestureRecognizer:)))
        cardView.addGestureRecognizer(panGestureRecognizer)
    }

    // MARK: Actions

    @objc private func handlePresentTapGesture(gestureRecognizer: UITapGestureRecognizer) {
        let viewController = createViewController()
        present(viewController, animated: true, completion: nil)
    }

    @objc private func handlePresentPanGesture(gestureRecognizer: UIPanGestureRecognizer) {
        let translation = gestureRecognizer.translation(in: gestureRecognizer.view?.superview)
        let height = (gestureRecognizer.view?.superview?.bounds.height)! - 40
        let percentage = abs(translation.y / height)
        switch gestureRecognizer.state {
        case .began:
            interactionController = UIPercentDrivenInteractiveTransition()
            let viewController = createViewController()
            present(viewController, animated: true, completion: nil)
        case .changed:
            interactionController?.update(percentage)
        case .ended:
            if percentage < 0.5 {
                interactionController?.cancel()
            } else {
                interactionController?.finish()
            }
            interactionController = nil
        default: break
        }
    }

    @objc private func handleDismissTapGesture(gestureRecognizer: UITapGestureRecognizer) {
        dismiss(animated: true, completion: nil)
    }

    @objc private func handleDismissPanGesture(gestureRecognizer: UIPanGestureRecognizer) {
        let translation = gestureRecognizer.translation(in: gestureRecognizer.view)
        let height = (gestureRecognizer.view?.bounds.height)!
        let percentage = (translation.y / height)
        switch gestureRecognizer.state {
        case .began:
            interactionController = UIPercentDrivenInteractiveTransition()
            dismiss(animated: true, completion: nil)
        case .changed:
            interactionController?.update(percentage)
        case .ended:
            if percentage < 0.5 {
                interactionController?.cancel()
            } else {
                interactionController?.finish()
            }
            interactionController = nil
        default: break
        }
    }

    // MARK: UIViewControllerTransitioningDelegate

    func presentationController(forPresented presented: UIViewController, presenting: UIViewController?, source: UIViewController) -> UIPresentationController? {
        return PresentationController(presentedViewController: presented, presenting: presenting)
    }

    func animationController(forPresented presented: UIViewController, presenting: UIViewController, source: UIViewController) -> UIViewControllerAnimatedTransitioning? {
        // Get UIKit to animate if it''s not an interative animation
        return interactionController != nil ? AnimationController(direction: .present) : nil
    }

    func animationController(forDismissed dismissed: UIViewController) -> UIViewControllerAnimatedTransitioning? {
        // Get UIKit to animate if it''s not an interative animation
        return interactionController != nil ? AnimationController(direction: .dismiss) : nil
    }

    func interactionControllerForPresentation(using animator: UIViewControllerAnimatedTransitioning) -> UIViewControllerInteractiveTransitioning? {
        return interactionController
    }

    func interactionControllerForDismissal(using animator: UIViewControllerAnimatedTransitioning) -> UIViewControllerInteractiveTransitioning? {
        return interactionController
    }

    // MARK: Private

    func createViewController() -> UIViewController {
        let viewController = UIViewController(nibName: nil, bundle: nil)
        viewController.title = "Tap or drag"
        viewController.view.backgroundColor = .white
        let navigationController = UINavigationController(rootViewController: viewController)
        navigationController.transitioningDelegate = self
        navigationController.modalPresentationStyle = .custom
        UINavigationBar.appearance().titleTextAttributes = [NSFontAttributeName: UIFont.boldSystemFont(ofSize: 16)]

        let tapGestureRecognizer = UITapGestureRecognizer(target: self, action: #selector(handleDismissTapGesture(gestureRecognizer:)))
        navigationController.view.addGestureRecognizer(tapGestureRecognizer)

        let panGestureRecognizer = UIPanGestureRecognizer(target: self, action: #selector(handleDismissPanGesture(gestureRecognizer:)))
        navigationController.view.addGestureRecognizer(panGestureRecognizer)

        return navigationController
    }
}

Answer 3

Puedes construir el segue en el constructor de interfaces. Seleccionando el modo modal de ViewController a CardViewController .

Para su CardViewController :

import UIKit

class CardViewController: UIViewController {

  required init?(coder aDecoder: NSCoder) {
    super.init(coder: aDecoder)
    self.commonInit()
  }

  override init(nibName nibNameOrNil: String!, bundle nibBundleOrNil: Bundle!)  {
    super.init(nibName: nibNameOrNil, bundle: nibBundleOrNil)

    self.commonInit()
  }

  func commonInit() {
    self.modalPresentationStyle = .custom
    self.transitioningDelegate = self
  }

  override func viewDidLoad() {
    super.viewDidLoad()

    roundViews()
  }

  func roundViews() {
    view.layer.cornerRadius = 8
    view.clipsToBounds = true
  }

}

a continuación, agregue esta extensión:

extension CardViewController: UIViewControllerTransitioningDelegate {

  func presentationController(forPresented presented: UIViewController, presenting: UIViewController?, source: UIViewController) -> UIPresentationController? {
    if presented == self {
      return CardPresentationController(presentedViewController: presented, presenting: presenting)
    }
    return nil
  }

  func animationController(forPresented presented: UIViewController, presenting: UIViewController, source: UIViewController) -> UIViewControllerAnimatedTransitioning? {
    if presented == self {
      return CardAnimationController(isPresenting: true)
    } else {
      return nil
    }
  }

  func animationController(forDismissed dismissed: UIViewController) -> UIViewControllerAnimatedTransitioning? {
    if dismissed == self {
      return CardAnimationController(isPresenting: false)
    } else {
      return nil
    }
  }

}

Finalmente, necesitarás 2 clases más:

import UIKit

class CardPresentationController: UIPresentationController {

  lazy var dimmingView :UIView = {
    let view = UIView(frame: self.containerView!.bounds)
    view.backgroundColor = UIColor(red: 0.0, green: 0.0, blue: 0.0, alpha: 0.3)
    view.layer.cornerRadius = 8
    view.clipsToBounds = true
    return view
  }()

  override func presentationTransitionWillBegin() {

    guard
      let containerView = containerView,
      let presentedView = presentedView
      else {
        return
    }

    // Add the dimming view and the presented view to the heirarchy
    dimmingView.frame = containerView.bounds
    containerView.addSubview(dimmingView)
    containerView.addSubview(presentedView)

    // Fade in the dimming view alongside the transition
    if let transitionCoordinator = self.presentingViewController.transitionCoordinator {
      transitionCoordinator.animate(alongsideTransition: {(context: UIViewControllerTransitionCoordinatorContext!) -> Void in
        self.dimmingView.alpha = 1.0
      }, completion:nil)
    }
  }

  override func presentationTransitionDidEnd(_ completed: Bool)  {
    // If the presentation didn''t complete, remove the dimming view
    if !completed {
      self.dimmingView.removeFromSuperview()
    }
  }

  override func dismissalTransitionWillBegin()  {
    // Fade out the dimming view alongside the transition
    if let transitionCoordinator = self.presentingViewController.transitionCoordinator {
      transitionCoordinator.animate(alongsideTransition: {(context: UIViewControllerTransitionCoordinatorContext!) -> Void in
        self.dimmingView.alpha  = 0.0
      }, completion:nil)
    }
  }

  override func dismissalTransitionDidEnd(_ completed: Bool) {
    // If the dismissal completed, remove the dimming view
    if completed {
      self.dimmingView.removeFromSuperview()
    }
  }

  override var frameOfPresentedViewInContainerView : CGRect {

    // We don''t want the presented view to fill the whole container view, so inset it''s frame
    let frame = self.containerView!.bounds;
    var presentedViewFrame = CGRect.zero
    presentedViewFrame.size = CGSize(width: frame.size.width, height: frame.size.height - 40)
    presentedViewFrame.origin = CGPoint(x: 0, y: 40)

    return presentedViewFrame
  }

  override func viewWillTransition(to size: CGSize, with transitionCoordinator: UIViewControllerTransitionCoordinator) {
    super.viewWillTransition(to: size, with: transitionCoordinator)

    guard
      let containerView = containerView
      else {
        return
    }

    transitionCoordinator.animate(alongsideTransition: {(context: UIViewControllerTransitionCoordinatorContext!) -> Void in
      self.dimmingView.frame = containerView.bounds
    }, completion:nil)
  }

}

y:

import UIKit


class CardAnimationController: NSObject {

  let isPresenting :Bool
  let duration :TimeInterval = 0.5

  init(isPresenting: Bool) {
    self.isPresenting = isPresenting

    super.init()
  }
}

// MARK: - UIViewControllerAnimatedTransitioning

extension CardAnimationController: UIViewControllerAnimatedTransitioning {

  func transitionDuration(using transitionContext: UIViewControllerContextTransitioning?) -> TimeInterval {
    return self.duration
  }

  func animateTransition(using transitionContext: UIViewControllerContextTransitioning)  {
    let fromVC = transitionContext.viewController(forKey: UITransitionContextViewControllerKey.from)
    let fromView = fromVC?.view
    let toVC = transitionContext.viewController(forKey: UITransitionContextViewControllerKey.to)
    let toView = toVC?.view

    let containerView = transitionContext.containerView

    if isPresenting {
      containerView.addSubview(toView!)
    }

    let bottomVC = isPresenting ? fromVC : toVC
    let bottomPresentingView = bottomVC?.view

    let topVC = isPresenting ? toVC : fromVC
    let topPresentedView = topVC?.view
    var topPresentedFrame = transitionContext.finalFrame(for: topVC!)
    let topDismissedFrame = topPresentedFrame
    topPresentedFrame.origin.y -= topDismissedFrame.size.height
    let topInitialFrame = topDismissedFrame
    let topFinalFrame = isPresenting ? topPresentedFrame : topDismissedFrame
    topPresentedView?.frame = topInitialFrame

    UIView.animate(withDuration: self.transitionDuration(using: transitionContext),
                   delay: 0,
                   usingSpringWithDamping: 300.0,
                   initialSpringVelocity: 5.0,
                   options: [.allowUserInteraction, .beginFromCurrentState], //[.Alert, .Badge]
      animations: {
        topPresentedView?.frame = topFinalFrame
        let scalingFactor : CGFloat = self.isPresenting ? 0.92 : 1.0
        bottomPresentingView?.transform = CGAffineTransform.identity.scaledBy(x: scalingFactor, y: scalingFactor)

    }, completion: {
      (value: Bool) in
      if !self.isPresenting {
        fromView?.removeFromSuperview()
      }
    })


    if isPresenting {
      animatePresentationWithTransitionContext(transitionContext)
    } else {
      animateDismissalWithTransitionContext(transitionContext)
    }
  }

  func animatePresentationWithTransitionContext(_ transitionContext: UIViewControllerContextTransitioning) {

    let containerView = transitionContext.containerView
    guard
      let presentedController = transitionContext.viewController(forKey: UITransitionContextViewControllerKey.to),
      let presentedControllerView = transitionContext.view(forKey: UITransitionContextViewKey.to)
      else {
        return
    }

    // Position the presented view off the top of the container view
    presentedControllerView.frame = transitionContext.finalFrame(for: presentedController)
    presentedControllerView.center.y += containerView.bounds.size.height

    containerView.addSubview(presentedControllerView)

    // Animate the presented view to it''s final position
    UIView.animate(withDuration: self.duration, delay: 0.0, usingSpringWithDamping: 1.0, initialSpringVelocity: 0.0, options: .allowUserInteraction, animations: {
      presentedControllerView.center.y -= containerView.bounds.size.height
    }, completion: {(completed: Bool) -> Void in
      transitionContext.completeTransition(completed)
    })
  }

  func animateDismissalWithTransitionContext(_ transitionContext: UIViewControllerContextTransitioning) {

    let containerView = transitionContext.containerView
    guard
      let presentedControllerView = transitionContext.view(forKey: UITransitionContextViewKey.from)
      else {
        return
    }

    // Animate the presented view off the bottom of the view
    UIView.animate(withDuration: self.duration, delay: 0.0, usingSpringWithDamping: 1.0, initialSpringVelocity: 0.0, options: .allowUserInteraction, animations: {
      presentedControllerView.center.y += containerView.bounds.size.height
    }, completion: {(completed: Bool) -> Void in
      transitionContext.completeTransition(completed)
    })
  }
}

Finalmente, para animar el cierre de CardViewController , enganche su botón de cierre a FirstResponder seleccione dismiss y agregue este método a ViewController :

func dismiss(_ segue: UIStoryboardSegue) {
    self.dismiss(animated: true, completion: nil)
}