Partilhar via

Introdução ao iOS 7

  • Artigo

Este artigo aborda as principais novas APIs introduzidas no iOS 7, incluindo transições do View Controller, aprimoramentos para animações UIView, UIKit Dynamics e Text Kit. Ele também cobre algumas das mudanças na interface do usuário e os novos recursos multitarefa incorporados.

O iOS 7 é uma grande atualização para o iOS. Ele introduz um design de interface de usuário completamente novo que coloca o foco no conteúdo em vez do cromo do aplicativo. Junto com as mudanças visuais, o iOS 7 adiciona uma infinidade de novas APIs para criar interações e experiências mais ricas. Este documento analisa as novas tecnologias introduzidas com o iOS 7 e serve como ponto de partida para uma exploração mais aprofundada.

Aprimoramentos de animação do UIView

O iOS 7 aumenta o suporte à animação no UIKit, permitindo que os aplicativos façam coisas que antes exigiam cair diretamente na estrutura Core Animation. Por exemplo, UIView agora pode executar animações de primavera, bem como animações de quadro-chave, que anteriormente CAKeyframeAnimation um aplicado a um CALayerarquivo .

Animações de Primavera

UIView agora suporta a animação de alterações de propriedade com um efeito de mola. Para adicionar isso, chame o AnimateNotify método ou AnimateNotifyAsync , passando os valores para a razão de amortecimento da mola e a velocidade inicial da mola, conforme descrito abaixo:

  • springWithDampingRatio – Um valor entre 0 e 1, onde a oscilação aumenta para um valor menor.
  • initialSpringVelocity – A velocidade inicial da mola como uma porcentagem da distância total de animação por segundo.

O código a seguir produz um efeito de mola quando o centro da exibição de imagem é alterado:

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);
}

Esse efeito de primavera faz com que a exibição de imagem pareça saltar à medida que conclui sua animação para um novo local central, conforme ilustrado abaixo:

Esse efeito de mola faz com que o modo de exibição de imagem pareça saltar à medida que conclui sua animação para um novo local central

Animações de quadro-chave

A UIView classe agora inclui o AnimateWithKeyframes método para criar animações de quadro-chave em um UIViewarquivo . Esse método é semelhante a outros UIView métodos de animação, exceto que um adicional NSAction é passado como um parâmetro para incluir os quadros-chave. Dentro do NSAction, os quadros-chave são adicionados chamando UIView.AddKeyframeWithRelativeStartTime.

Por exemplo, o trecho de código a seguir cria uma animação de quadro-chave para animar o centro de um modo de exibição, bem como para girá-lo:

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 ();
    });
}

Os dois primeiros parâmetros do AddKeyframeWithRelativeStartTime método especificam a hora de início e a duração do quadro-chave, respectivamente, como uma porcentagem do comprimento geral da animação. O exemplo acima resulta na visualização da imagem animando para seu novo centro no primeiro segundo, seguido de rotação de 90 graus no segundo seguinte. Como a animação especifica UIViewKeyframeAnimationOptions.Autoreverse como uma opção, ambos os quadros-chave também são animados ao contrário. Finalmente, os valores finais são definidos para o estado inicial no manipulador de conclusão.

As capturas de tela abaixo ilustram a animação combinada através dos quadros-chave:

Esta captura de tela ilustra a animação combinada através dos quadros-chave

Dinâmica UIKit

UIKit Dynamics é um novo conjunto de APIs no UIKit que permitem que os aplicativos criem interações animadas com base na física. O UIKit Dynamics encapsula um mecanismo de física 2D para tornar isso possível.

A API é de natureza declarativa. Você declara como as interações físicas se comportam criando objetos - chamados comportamentos - para expressar conceitos físicos como gravidade, colisões, molas, etc. Em seguida, anexe o(s) comportamento(s) a outro objeto, chamado animador dinâmico, que encapsula uma exibição. O animador dinâmico se encarrega de aplicar os comportamentos físicos declarados a itens dinâmicos - itens que implementam IUIDynamicItem, como um UIView.

Existem vários comportamentos primitivos diferentes disponíveis para desencadear interações complexas, incluindo:

  • UIAttachmentBehavior – Anexa dois itens dinâmicos de modo que eles se movam juntos, ou anexa um item dinâmico a um ponto de anexo.
  • UICollisionBehavior – Permite que itens dinâmicos participem de colisões.
  • UIDynamicItemBehavior – Especifica um conjunto geral de propriedades a serem aplicadas a itens dinâmicos, como elasticidade, densidade e atrito.
  • UIGravityBehavior - Aplica gravidade a um item dinâmico, fazendo com que os itens acelerem na direção gravitacional.
  • UIPushBehavior – Aplica força a um item dinâmico.
  • UISnapBehavior – Permite que um item dinâmico se encaixe em uma posição com um efeito de mola.

Embora existam muitas primitivas, o processo geral para adicionar interações baseadas em física a uma exibição usando o UIKit Dynamics é consistente entre os comportamentos:

  1. Crie um animador dinâmico.
  2. Criar comportamento(s).
  3. Adicione comportamentos ao animador dinâmico.

Exemplo de dinâmica

Vejamos um exemplo que adiciona gravidade e um limite de colisão a um UIViewarquivo .

UIGravityBehavior

Adicionar gravidade a uma visualização de imagem segue as 3 etapas descritas acima.

Vamos trabalhar no ViewDidLoad método para este exemplo. Primeiro, adicione uma UIImageView instância da seguinte maneira:

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);

Isso cria uma exibição de imagem centralizada na borda superior da tela. Para fazer a imagem "cair" com a gravidade, crie uma instância de um UIDynamicAnimator:

dynAnimator = new UIDynamicAnimator (this.View);

O UIDynamicAnimator toma uma instância de uma referência UIView ou um UICollectionViewLayout, que contém os itens que serão animados de acordo com o(s) comportamento(s) anexado(s).

Em seguida, crie uma UIGravityBehavior instância. Você pode passar um ou mais objetos implementando o IUIDynamicItem, como um UIView:

var gravity = new UIGravityBehavior (dynItems);

O comportamento é passado uma matriz de IUIDynamicItem, que, neste caso, contém a única UIImageView instância que estamos animando.

Finalmente, adicione o comportamento ao animador dinâmico:

dynAnimator.AddBehavior (gravity);

Isso faz com que a imagem seja animada para baixo com a gravidade, conforme ilustrado abaixo:

O local da imagem inicialO local da imagem final

Como não há nada que restrinja os limites da tela, a visualização da imagem simplesmente cai da parte inferior. Para restringir a visualização para que a imagem colida com as bordas da tela, podemos adicionar um UICollisionBehaviorarquivo . Abordaremos isso na próxima seção.

UICollisionBehavior

Começaremos criando um UICollisionBehavior e adicionando-o ao animador dinâmico, assim como fizemos para o UIGravityBehavior.

Modifique o código para incluir o 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);
}

O UICollisionBehavior tem uma propriedade chamada TranslatesReferenceBoundsIntoBoundry. Definir isso como true faz com que os limites do modo de exibição de referência sejam usados como um limite de colisão.

Agora, quando a imagem se anima para baixo com a gravidade, ela salta ligeiramente da parte inferior da tela antes de se acomodar para descansar lá.

UIDynamicItemBehavior

Podemos controlar ainda mais o comportamento da visão de imagem em queda com comportamentos adicionais. Por exemplo, poderíamos adicionar um UIDynamicItemBehavior para aumentar a elasticidade, fazendo com que a visualização da imagem salte mais quando colide com a parte inferior da tela.

Adicionar um UIDynamicItemBehavior segue as mesmas etapas que com os outros comportamentos. Primeiro crie o comportamento:

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

Em seguida, adicione o comportamento ao animador dinâmico:

dynAnimator.AddBehavior (dynBehavior);

Com esse comportamento em vigor, a exibição de imagem salta mais quando colide com o limite.

Alterações gerais na interface do usuário

Além das novas APIs UIKit, como UIKit Dynamics, transições de controlador e animações UIView aprimoradas descritas acima, o iOS 7 introduz uma variedade de alterações visuais na interface do usuário e alterações de API relacionadas para várias exibições e controles. Para obter mais informações, consulte a Visão geral da interface do usuário do iOS 7.

Kit de Texto

O Text Kit é uma nova API que oferece recursos poderosos de layout e renderização de texto. Ele é construído sobre a estrutura de baixo nível Core Text, mas é muito mais fácil de usar do que o Core Text.

Para mais informações, consulte nosso TextKit

Multitarefa

O iOS 7 muda quando e como o trabalho em segundo plano é executado. A conclusão de tarefas no iOS 7 não mantém mais os aplicativos ativados quando as tarefas são executadas em segundo plano e os aplicativos são ativados para processamento em segundo plano de maneira não contígua. O iOS 7 também adiciona três novas APIs para atualizar aplicativos com novo conteúdo em segundo plano:

  • Busca em segundo plano – Permite que os aplicativos atualizem o conteúdo em segundo plano em intervalos regulares.
  • Notificações remotas - Permite que os aplicativos atualizem o conteúdo ao receber uma notificação por push. As notificações podem ser silenciosas ou exibir um banner na tela de bloqueio.
  • Serviço de transferência em segundo plano – Permite o upload e download de dados, como arquivos grandes, sem um limite de tempo fixo.

Para obter mais detalhes sobre os novos recursos multitarefa, consulte as seções iOS do guia Xamarin Backgrounding.

Resumo

Este artigo aborda várias novidades importantes no iOS. Primeiro, ele mostra como adicionar transições personalizadas aos controladores de exibição. Em seguida, ele mostra como usar transições em modos de exibição de coleção, tanto de dentro de um controlador de navegação, quanto interativamente entre modos de exibição de coleção. Em seguida, ele apresenta vários aprimoramentos feitos nas animações UIView, mostrando como os aplicativos usam o UIKit para coisas que anteriormente exigiam programação diretamente no Core Animation. Finalmente, a nova API UIKit Dynamics, que traz um mecanismo de física para o UIKit, é introduzida junto com o suporte a rich text agora disponível na estrutura do Kit de Texto.