Introducción a iOS 7

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

iOS 7 es una actualización importante de iOS. Presenta un diseño de interfaz de usuario completamente nuevo que pone el foco en el contenido en lugar de en el chrome 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. En este documento se analizan las nuevas tecnologías introducidas con iOS 7 y sirve como punto de partida para una exploración más profunda.

Mejoras de animación de UIView

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

Animaciones de spring

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

• springWithDampingRatio : un valor entre 0 y 1, donde la oscilación aumenta para un valor más pequeño.
• initialSpringVelocity : velocidad inicial del spring como porcentaje de la distancia total de animación por segundo.

El código siguiente produce un efecto spring 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 spring hace que parezca que la vista de imagen se rebote mientras completa su animación en una nueva ubicación central, como se muestra a continuación:

Animaciones de fotogramas clave

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

Por ejemplo, el siguiente fragmento de código crea una animación de fotogramas 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 del método especifican la hora de inicio y la duración del fotograma clave, respectivamente, como porcentaje de AddKeyframeWithRelativeStartTime la longitud total de la animación. En el ejemplo anterior, la vista de imagen se anima a su nuevo centro durante el primer segundo, seguido de una rotación de 90 grados en el segundo siguiente. Puesto que la animación especifica UIViewKeyframeAnimationOptions.Autoreverse como una opción, ambos fotogramas clave también se animan en orden inverso. Por último, los valores finales se establecen en el estado inicial en el controlador de finalización.

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

UIKit Dynamics

UIKit Dynamics es un nuevo conjunto de API de UIKit que permite 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. Se declara cómo se comportan las interacciones físicas mediante la creación de objetos (denominados comportamientos) para expresar conceptos físicos como gravedad, colisiones, colisiones, colisiones, etc. A continuación, adjunte los comportamientos a otro objeto, denominado animadordinámico , que encapsula una vista. El animador dinámico se encarga de aplicar los comportamientos físicos declarados a elementos dinámicos: elementos que implementan , como UIView .

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

• UIAttachmentBehavior : asocia dos elementos dinámicos para que se muevan juntos o adjunte 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 gravedad a un elemento dinámico, lo que hace que los elementos se aceleren en la dirección de la gravedad.
• UIPushBehavior : aplica la fuerza a un elemento dinámico.
• UISnapBehavior : permite que un elemento dinámico se ajuste a una posición con un efecto spring.

Aunque hay muchas primitivas, 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 Dynamics

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

UIGravityBehavior

La adición de gravedad a una vista de imagen sigue los tres pasos descritos anteriormente.

Trabajaremos en el método ViewDidLoad para este ejemplo. En primer lugar, agregue UIImageView una instancia 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 "resalte" con gravedad, cree una instancia de UIDynamicAnimator :

dynAnimator = new UIDynamicAnimator (this.View);

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

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

var gravity = new UIGravityBehavior (dynItems);

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

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

dynAnimator.AddBehavior (gravity);

Como resultado, la imagen se anima hacia abajo con gravedad, como se muestra a continuación:

de la imagen

Puesto que no hay nada que restrinja los límites de la pantalla, la vista de imagen simplemente se queda fuera de la parte inferior. Para restringir la vista de modo que la imagen se intercala con los bordes de la pantalla, podemos agregar un UICollisionBehavior . Lo trataremos en la sección siguiente.

UICollisionBehavior

Comenzaremos por crear un y agregarlo al UICollisionBehavior 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);
}

tiene UICollisionBehavior una propiedad denominada TranslatesReferenceBoundsIntoBoundry . Si se establece en , los límites de la vista de referencia se true usarán como límite de colisión.

Ahora, cuando la imagen se anima hacia abajo con gravedad, salta ligeramente de la parte inferior de la pantalla antes de instalarse para que se resta.

UIDynamicItemBehavior

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

La UIDynamicItemBehavior adición de 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 en su lugar, la vista de imagen se recupera más cuando intercala con el límite.

Cambios Interfaz de usuario generales

Además de las nuevas API de UIKit, como UIKit Dynamics, transiciones de controlador y animaciones mejoradas de UIView 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, vea el artículo de información general Interfaz de usuario iOS 7.

Kit de texto

Text Kit es una nueva API que ofrece características eficaces de diseño y representación de texto. Se basa en el marco de texto principal 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 las aplicaciones en funcionamiento cuando las tareas se ejecutan en segundo plano y las aplicaciones se protegen para el procesamiento en segundo plano de forma no contigua. iOS 7 también agrega tres nuevas API para actualizar aplicaciones con contenido nuevo en segundo plano:

• Captura en segundo plano: permite a las aplicaciones actualizar el contenido en segundo plano a intervalos regulares.
• Notificaciones remotas: permite a las aplicaciones actualizar el 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 más información sobre las nuevas funcionalidades de multitarea, consulte las secciones de iOS de la guía de xamarin backgrounding.

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, se muestra cómo usar transiciones en vistas de colección, tanto desde dentro de un controlador de navegación como de forma interactiva entre vistas de colección. A continuación, presenta varias mejoras realizadas en las animaciones UIView, en las que se muestra cómo las aplicaciones usan UIKit para cosas que anteriormente requerían programación directamente en core animation. Por último, se presenta la nueva API de Dynamics de UIKit, que incorpora un motor de física a UIKit, junto con la compatibilidad con texto enriquecido ahora disponible en el marco de Text Kit.

Vínculos relacionados

• Introducción a iOS 7 (ejemplo)
• Introducción a la interfaz de usuario de iOS 7
• Procesamiento en segundo plano