Introducción a iOS 7

  • Artículo

En este artículo se tratan las nuevas API principales introducidas en iOS 7, incluidas las transiciones del controlador de vista, las mejoras en las animaciones UIView, UIKit Dynamics y Text Kit. También trata algunos de los cambios en la interfaz de usuario y las nuevas funcionalidades multitarea con varias tareas.

iOS 7 es una actualización principal de iOS. Presenta un diseño de interfaz de usuario completamente nuevo que pone el foco en el contenido en lugar de en el cromo de la aplicación. Junto con los cambios visuales, iOS 7 agrega una gran cantidad de nuevas API para crear interacciones y experiencias más enriquecidas. Este documento analiza las nuevas tecnologías introducidas con iOS 7 y sirve como punto de partida para una exploración posterior.

Mejoras de animación UIView

iOS 7 aumenta la compatibilidad de animación en UIKit, lo que permite a las aplicaciones hacer cosas que antes requerían colocar directamente en el marco de animación principal. Por ejemplo, UIView ahora pueden realizar animaciones de muelle así como animaciones de fotograma clave, que anteriormente CAKeyframeAnimation aplicaba a CALayer.

Animaciones de muelle

UIView ahora admite la animación de cambios de propiedad con un efecto de muelle. Para agregar esto, llame al método AnimateNotify o AnimateNotifyAsync, pasando valores para la relación de amortiguación de muelles y la velocidad de muelle inicial, como se describe a continuación:

  • springWithDampingRatio: valor entre 0 y 1, donde la oscilación aumenta para un valor menor.
  • initialSpringVelocity: velocidad de muelle inicial como porcentaje de la distancia total de animación por segundo.

El código siguiente genera un efecto de muelle cuando cambia el centro de la vista de imagen:

void AnimateWithSpring ()
{
    float springDampingRatio = 0.25f;
    float initialSpringVelocity = 1.0f;

    UIView.AnimateNotify (3.0, 0.0, springDampingRatio, initialSpringVelocity, 0, () => {

        imageView.Center = new CGPoint (imageView.Center.X, 400);

    }, null);
}

Este efecto de muelle hace que la vista de imagen aparezca rebotando a medida que completa su animación a una nueva ubicación central, como se muestra a continuación:

Este efecto de muelle hace que la vista de imagen aparezca rebotando a medida que completa su animación a una nueva ubicación central

Animación de fotogramas clave

La clase UIView ahora incluye el método AnimateWithKeyframes para crear animaciones de fotograma clave en un UIView. Este método es similar a otros métodos UIView de animación, salvo que se pasa un elemento NSAction adicional como parámetro para incluir los fotogramas clave. En NSAction, se agregan fotogramas clave llamando a UIView.AddKeyframeWithRelativeStartTime.

Por ejemplo, el siguiente fragmento de código crea una animación de fotograma clave para animar el centro de una vista, así como para girar la vista:

void AnimateViewWithKeyframes ()
{
    var initialTransform = imageView.Transform;
    var initialCeneter = imageView.Center;

    // can now use keyframes directly on UIView without needing to drop directly into Core Animation

    UIView.AnimateKeyframes (2.0, 0, UIViewKeyframeAnimationOptions.Autoreverse, () => {
        UIView.AddKeyframeWithRelativeStartTime (0.0, 0.5, () => {
            imageView.Center = new CGPoint (200, 200);
        });

        UIView.AddKeyframeWithRelativeStartTime (0.5, 0.5, () => {
            imageView.Transform = CGAffineTransform.MakeRotation ((float)Math.PI / 2);
        });
    }, (finished) => {
        imageView.Center = initialCeneter;
        imageView.Transform = initialTransform;

        AnimateWithSpring ();
    });
}

Los dos primeros parámetros para el método AddKeyframeWithRelativeStartTime especifican el tiempo de inicio y la duración del fotograma clave, respectivamente, como un porcentaje de la longitud general de la animación. El ejemplo anterior da como resultado la animación de la vista de imagen a su nuevo centro sobre el primer segundo, seguido de girar 90 grados en el segundo siguiente. Dado que la animación especifica UIViewKeyframeAnimationOptions.Autoreverse como opción, ambos fotogramas clave también se animan a la inversa. Por último, los valores finales se establecen en el estado inicial del controlador de finalización.

En las capturas de pantalla siguientes se muestra la animación combinada a través de los fotogramas clave:

En la captura de pantalla se muestra la animación combinada a través de los fotogramas clave

UIKit Dynamics

UIKit Dynamics es un nuevo conjunto de API en UIKit que permiten a las aplicaciones crear interacciones animadas basadas en la física. UIKit Dynamics encapsula un motor de física 2D para que esto sea posible.

La API es declarativa por naturaleza. Declara cómo se comportan las interacciones físicas mediante la creación de objetos (denominados comportamientos) para expresar conceptos de física como la gravedad, las colisiones, los muelles, etc. A continuación, adjunta los comportamientos a otro objeto, denominado animador dinámico, que encapsula una vista. El animador dinámico se encarga de aplicar los comportamientos de física declarados a elementos dinámicos: elementos que implementan IUIDynamicItem, como un UIView.

Hay varios comportamientos primitivos diferentes disponibles para desencadenar interacciones complejas, entre los que se incluyen:

  • UIAttachmentBehavior: asocia dos elementos dinámicos de forma que se mueven juntos o adjuntan un elemento dinámico a un punto de datos adjuntos.
  • UICollisionBehavior: permite que los elementos dinámicos participen en colisiones.
  • UIDynamicItemBehavior: especifica un conjunto general de propiedades que se aplicarán a elementos dinámicos, como elasticidad, densidad y fricción.
  • UIGravityBehavior: aplica la gravedad a un elemento dinámico, lo que hace que los elementos se aceleren en la dirección horizontal.
  • UIPushBehavior: aplica fuerza a un elemento dinámico.
  • UISnapBehavior: permite que un elemento dinámico se ajuste a una posición con un efecto de resorte.

Aunque hay muchos primitivos, el proceso general para agregar interacciones basadas en física a una vista mediante UIKit Dynamics es coherente en todos los comportamientos:

  1. Cree un animador dinámico.
  2. Cree comportamientos.
  3. Agregue comportamientos al animador dinámico.

Ejemplo de dinámicas

Echemos un vistazo a un ejemplo que agrega gravedad y un límite de colisión a UIView.

UIGravityBehavior

Agregar gravedad a una vista de imagen sigue los 3 pasos descritos anteriormente.

Trabajaremos en el método ViewDidLoad para este ejemplo. En primer lugar, agregue una instancia UIImageView de la siguiente manera:

image = UIImage.FromFile ("monkeys.jpg");

imageView = new UIImageView (new CGRect (new CGPoint (View.Center.X - image.Size.Width / 2, 0), image.Size)) {
                    Image =  image
                }

View.AddSubview (imageView);

Esto crea una vista de imagen centrada en el borde superior de la pantalla. Para que la imagen se "caiga" con gravedad, cree una instancia de UIDynamicAnimator:

dynAnimator = new UIDynamicAnimator (this.View);

UIDynamicAnimator toma una instancia de una referencia UIView o UICollectionViewLayout, que contiene los elementos que se animarán según los comportamientos adjuntos.

A continuación, cree una instancia UIGravityBehavior. Puede pasar uno o varios objetos que implementan el IUIDynamicItem, como un UIView:

var gravity = new UIGravityBehavior (dynItems);

El comportamiento se pasa a una matriz de IUIDynamicItem, que en este caso contiene la instancia única UIImageView que estamos animando.

Por último, agregue el comportamiento al animador dinámico:

dynAnimator.AddBehavior (gravity);

Esto da como resultado la animación de la imagen hacia abajo con gravedad, como se muestra a continuación:

Ubicación inicial de la imagenUbicación final de la imagen

Puesto que no hay nada que restrinja los límites de la pantalla, la vista de imagen simplemente cae fuera de la parte inferior. Para restringir la vista para que la imagen choque con los bordes de la pantalla, podemos agregar un UICollisionBehavior. Trataremos esto en la sección siguiente.

UICollisionBehavior

Comenzaremos creando un elemento UICollisionBehavior y agregándolo al animador dinámico, como hicimos para UIGravityBehavior.

Modifique el código para incluir: UICollisionBehavior

using (image = UIImage.FromFile ("monkeys.jpg")) {

    imageView = new UIImageView (new CGRect (new CGPoint (View.Center.X - image.Size.Width / 2, 0), image.Size)) {
        Image =  image
    };

    View.AddSubview (imageView);

    // 1. create the dynamic animator
    dynAnimator = new UIDynamicAnimator (this.View);

    // 2. create behavior(s)
    var gravity = new UIGravityBehavior (imageView);
    var collision = new UICollisionBehavior (imageView) {
        TranslatesReferenceBoundsIntoBoundary = true
    };

    // 3. add behaviors(s) to the dynamic animator
    dynAnimator.AddBehaviors (gravity, collision);
}

UICollisionBehavior tiene una propiedad denominada TranslatesReferenceBoundsIntoBoundry. Establecer esto en true hace que los límites de la vista de referencia se usen como límites de colisión.

Ahora, cuando la imagen se anima hacia abajo con gravedad, rebota ligeramente fuera de la parte inferior de la pantalla antes de detenerse para descansar allí.

UIDynamicItemBehavior

Podemos controlar aún más el comportamiento de la vista de imagen en caída con comportamientos adicionales. Por ejemplo, podríamos agregar un UIDynamicItemBehavior para aumentar la elasticidad, lo que hace que la vista de imagen rebote más cuando choca con la parte inferior de la pantalla.

Agregar un UIDynamicItemBehavior sigue los mismos pasos que con los demás comportamientos. En primer lugar, cree el comportamiento:

var dynBehavior = new UIDynamicItemBehavior (dynItems) {
    Elasticity = 0.7f
};

A continuación, agregue el comportamiento al animador dinámico:

dynAnimator.AddBehavior (dynBehavior);

Con este comportamiento establecido, la vista de imagen rebota más cuando colisiona con el límite.

Cambios generales de la interfaz de usuario

Además de las nuevas API de UIKit, como UIKit Dynamics, transiciones de controlador y animaciones UIView mejoradas descritas anteriormente, iOS 7 presenta una variedad de cambios visuales en la interfaz de usuario y cambios de API relacionados para varias vistas y controles. Para obtener más información, consulte Información general sobre la interfaz de usuario de iOS 7.

Text Kit

Text Kit es una nueva API que ofrece características eficaces de representación y diseño de texto. Se basa en el marco de texto básico de bajo nivel, pero es mucho más fácil de usar que Core Text.

Para obtener más información, consulte nuestro TextKit

Multitarea

iOS 7 cambia cuándo y cómo se realiza el trabajo en segundo plano. La finalización de tareas en iOS 7 ya no mantiene activas las aplicaciones cuando las tareas se ejecutan en segundo plano y las aplicaciones se reactivan para el procesamiento en segundo plano de forma no contigua. iOS 7 también agrega tres nuevas API para actualizar aplicaciones con nuevo contenido en segundo plano:

  • Captura en segundo plano: permite a las aplicaciones actualizar contenido en segundo plano a intervalos regulares.
  • Notificaciones remotas: permite a las aplicaciones actualizar contenido al recibir una notificación push. Las notificaciones pueden ser silenciosas o pueden mostrar un banner en la pantalla de bloqueo.
  • Servicio de transferencia en segundo plano: permite cargar y descargar datos, como archivos grandes, sin un límite de tiempo fijo.

Para obtener más información sobre las nuevas funcionalidades de multitarea, consulte las secciones de iOS de la guía de segundo plano de Xamarin.

Resumen

En este artículo se tratan varias adiciones nuevas importantes a iOS. En primer lugar, se muestra cómo agregar transiciones personalizadas a controladores de vista. A continuación, muestra cómo usar transiciones en vistas de colección, tanto desde dentro de un controlador de navegación, como de forma interactiva entre las vistas de colección. A continuación, presenta varias mejoras realizadas en animaciones UIView, en las que se muestra cómo las aplicaciones usan UIKit para cosas que antes requerían programación directamente en la animación principal. Por último, la nueva API de Dynamics UIKit, que aporta un motor de física a UIKit, se presenta junto con la compatibilidad con texto enriquecido que ahora está disponible en el marco del kit de texto.