Desenvolver um aplicativo de apresentação de slides do iOS para o iPad

Use XML, XCode e as APIs do iOS

Aprenda a desenvolver um aplicativo de apresentação de slides do iOS percorrendo o processo passo a passo neste artigo. O aplicativo de exemplo irá se comunicar com um servidor da web para recuperar uma definição de apresentação de slides em XML e exibirá as imagens contidas na apresentação de slides.

Jack D. Herrington, Senior Software Engineer, Leverage Software Inc.

Photo of Jack HerringtonJack Herrington é engenheiro, autor e apresentador que mora e trabalha em Bay Area. É possível se manter atualizado em relação ao seu trabalho e aos seus escritos em http://jackherrington.com.



16/Jan/2012

Introdução

Abreviaturas usadas frequentemente

  • IDE: Ambiente de Desenvolvimento Integrado
  • iOS: sistema operacional remoto da Apple
  • OS X: o sistema operacional da Apple para computadores Macintosh

Não é mistério o motivo pelo qual escrever aplicativos para um dispositivo iOS, como o iPad ou o iPhone, é uma atividade muito popular: os dispositivos são incríveis e fáceis de usar. Com milhões de usuários, os dispositivos são muito lucrativos para desenvolvimento de aplicativos. As pessoas gostam de ver suas fotos no belo visor dos iPads e iPhones.

Neste artigo, aprenda a desenvolver um aplicativo de apresentação de slides de fotos do iOS a partir do zero. Você colocará parte do código XML e das fotos no servidor, desenvolverá o aplicativo iOS, adicionará uma visualização de imagem, obterá XML e fará a animação da apresentação de slides.

Desenvolvendo o Backend

O backend do aplicativo de apresentação de slides de exemplo é, na verdade, apenas um arquivo XML que pode ser colocado no seu servidor. A Listagem 1 mostra o XML de exemplo com algumas imagens de amostra.

Lista 1. photos.xml
<photos>
<photo url="http://localhost/photos/CRW_0675.jpg" />
<photo url="http://localhost/photos/CRW_1488.jpg" />
<photo url="http://localhost/photos/CRW_3273.jpg" />
<photo url="http://localhost/photos/CRW_3296.jpg" />
<photo url="http://localhost/photos/CRW_3303.jpg" />
<photo url="http://localhost/photos/CRW_3359.jpg" />
<photo url="http://localhost/photos/CRW_3445.jpg" />
<photo url="http://localhost/photos/CRW_3752.jpg" />
<photo url="http://localhost/photos/CRW_3754.jpg" />
<photo url="http://localhost/photos/CRW_4525.jpg" />
<photo url="http://localhost/photos/CRW_4547.jpg" />
<photo url="http://localhost/photos/CRW_4700.jpg" />
<photo url="http://localhost/photos/CRW_4860.jpg" />
</photos>

O XML é incrivelmente simples. A tag <photos> contém diversas tags <photo>. Cada tag <photo> tem a URL da imagem que você deseja exibir. A URL precisa estar totalmente qualificada e ser absoluta; o aplicativo cliente carregar a URL diretamente —não através de nenhum tipo de navegador que manipule URLs relativas.

Para concluir o backend, modifique o XML para incluir referências às suas fotos e efetue o upload desse XML para um local conhecido no seu servidor. Se tudo sair conforme o planejado, você deve poder navegar para o XML usando o Safari (ou qualquer navegador escolhido) e ver algo como a Figura 1.

Figura 1. XML no servidor
XML no servidor

A Figura 1 mostra o XML da Listagem 1 formatado como texto. O resultado será diferente de navegador para navegador, uma vez que esse é apenas XML simples (e não há padrão entre navegadores).

Para testar se as URLs estão corretas:

  1. Selecione uma das URLs.
  2. Copie e cole-a na área da URL do navegador.
  3. Pressione a tecla Return .

Deve-se visualizar algo similar à Figura 2.

Figura 2. Uma das fotos no servidor
Uma das fotos no servidor

Uma foto, localizada no servidor, é referida por uma das URLs no XML. Se você não visualizar o XML, ou não visualizar as fotos, é preciso verificar a configuração do servidor da web e as URLs. Se você não conseguir ver uma foto no navegador, o novo aplicativo do iOS não consegue vê-la também.


Desenvolvendo o aplicativo de apresentação de slides cliente

Depois de o servidor ser configurado e as fotos serem transferidas por upload, é possível começar a desenvolver o aplicativo iOS. A primeira etapa é instalar as Apple Developer Tools (consulte os Recursos para obter um link). Se você:

  • For pré-Lion, precisará efetuar o download das ferramentas do desenvolvedor a partir do Apple Developer Site (consulte os Recursos para obter um link).
  • Estiver executando Lion, é possível usar a Mac App Store para efetuar o download das ferramentas (consulte Recursos para obter um link).

Depois de instalar as ferramentas do desenvolvedor, execute o ambiente XCode, que é o IDE da Apple para desenvolvimento de iOS e Mac OS X. A partir do ambiente XCode, selecione a opção de menu para New Project. Deve ser possível ver a primeira página do assistente do aplicativo que será usado para desenvolver aplicativos do iOS ou Mac OS X, como na Figura 3.

Figura 3. Assistente do aplicativo
Assistente do aplicativo

É possível escolher entre vários modelos de aplicativos diferentes. Para este exemplo, selecione View-based Application e clique em Next . Deve ser possível ver a página final do assistente, como na Figura 4.

Figura 4. Opções do projeto
Opções do projeto

Na segunda página do assistente, atribua um nome ao aplicativo e selecione a família de dispositivos padrão (iPad ou iPhone). O Product Name do aplicativo de exemplo é slideshow. O valor no campo Company Identifier indica que o aplicativo está no namespace com.jherrington . (É claro, é possível escolher qualquer nome e identificador da empresa que você desejar.) Escolha iPad para a Device Family e clique em Next.

O projeto é criado. Neste ponto, é sempre melhor selecionar o botão Play grande no canto superior esquerdo da interface para executar o aplicativo pela primeira vez. Esta etapa compila tudo e ativa o emulador do iPad.


Adicionando a visualização da imagem

A próxima etapa é adicionar a visualização da imagem para a exibição das imagens. A estrutura do iOS vem com um conjunto avançado de controles integrados que podem ser usados para desenvolver o aplicativo. Para o exemplo, você usará o controle UIImageView. Com UIImageView, é possível exibir as imagens que são compiladas no aplicativo, armazenadas localmente no dispositivo, ou, como no exemplo, transferidas por download de um website.

Para adicionar UIImageView, abra o arquivo slideshowControllerView.XIB, que é o arquivo de definição de interface com o usuário para slideshowControllerView. Com o XIB aberto, acesse a paleta de objeto e selecione Image View, como na Figura 5.

Figura 5. Adicionar um objeto UIImageView ao XIB do controlador de visualização
Adicionar um objeto UIImageView ao XIB do controlador de visualização

Com Image View selecionado, arraste e solte-o em slideshowControllerView. Normalmente, o IDE escala o controle de maneira automática para caber no espaço disponível. Se ele não couber, simplesmente arraste o controle para ajustar seu tamanho até que preencha toda a área de exibição.

Depois de o controle estar na visualização, defina alguns dos parâmetros para obter um visual e uma experiência ideais para o aplicativo. A Figura 6 mostra as configurações na tela de atributos para o controle Image View.

Figura 6. Configurar UIImageView
Configurar UIImageView

As duas modificações necessárias são para Mode e para Background. Defina Mode para Aspect Fit de maneira que a imagem seja escalada, mas ainda preserve o formato original. Se Aspect Fit não for usado, suas imagens irão ser estendidas para corresponderem à área de exibição da visualização de imagem— e elas podem acabar tendo uma aparência muito estranha.

Como é possível que a imagem nem sempre se ajuste à área disponível, também é preciso definir o atributo Background para Dark Text Color ou usar um seletor de cores para escolher um preto profundo. Por padrão, esse valor é branco. A maioria das fotos não tem uma boa aparência quando emoldurada por um branco brilhante.

Salve o arquivo XIB e passe para o arquivo SlideshowViewController.h. Faça a pequena modificação na Listagem 2.

Lista 2. SlideshowViewController.h
#import <UIKit/UIKit.h>

@interface slideshowViewController : UIViewController {
    IBOutlet UIImageView *imgView;
}

@end

É preciso adicionar Outlet ao slideshowViewController que permite ao controle definido no XIB conectar-se à classe do controlador de visualização.

Depois de a saída ser adicionada, retorne para o arquivo XIB, selecione UIImageView e use o inspetor de conexões para vincular o objeto UIImageView à variável imgView na classe slideshowViewController .

Depois de a conexão ser feita, faça as modificações do código à classe do controlador de visualização da apresentação de slides em si para carregar uma imagem. A Listagem 3 mostra a primeira versão completa da classe.

Lista 3. SlideshowViewController.m
#import "slideshowViewController.h"

@implementation slideshowViewController

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
}

#pragma mark - View lifecycle

- (void)viewDidLoad {
        [super viewDidLoad];

    NSURL *imageURL = [NSURL URLWithString:@"http://localhost/photos/CRW_0675.jpg"];
    NSData *imageData = [NSData dataWithContentsOfURL:imageURL];
    UIImage *image = [UIImage imageWithData:imageData];
    [imgView setImage:image];
}

- (void)viewDidUnload
{
    [super viewDidUnload];
}

- (BOOL)shouldAutorotateToInterfaceOrientation:
                                       (UIInterfaceOrientation)interfaceOrientation {
    return YES;
}

@end

O trabalho mais duro na classe slideshowViewController é feito no método viewDidLoad , que agora:

  • Carrega os dados de uma URL.
  • Transforma-os em uma imagem.
  • Usa o método setImage na visualização da imagem para exibir a imagem.

Neste ponto, você deve executar o aplicativo para testar se uma imagem aparece. Deve-se visualizar algo similar à Figura 7, que mostra uma imagem exibida no emulador do iPad.

Figura 7. Primeira imagem do servidor
Primeira imagem do servidor

Se você não visualizar a imagem, o problema provavelmente é com a chamada do método setImage para imgView. Verifique se o objeto UIImageView está adequadamente conectado à variável imgView . Se o aplicativo falhar antes disso, é possível que você não tenha a URL correta ou que algo não esteja correto no servidor.


Analisando o XML

Agora que você tem uma maneira de exibir as imagens em um iPad, a próxima etapa é carregar o XML para obter uma lista de todas as imagens a exibir. A estrutura do iOS tem um analisador de XML integrado, então é necessário simplesmente criar o objeto analisador e receber retornos de chamada para as várias tags.

Estenda a classe em si com a interface NSXMLParserDelegate , que diz à estrutura do iOS que essa classe é capaz de receber retornos de chamada do analisador de XML. Também pode ser necessário adicionar um array chamado photos que detém a lista de URLs extraídas do XML. A Listagem 4 mostra as atualizações.

Lista 4. SlideshowViewController.h com fotos
#import <UIKit/UIKit.h>

@interface slideshowViewController : UIViewController<NSXMLParserDelegate> {
    IBOutlet UIImageView *imgView;
    NSMutableArray *photos;
}

@end

Conforme você escreve mais aplicativos do iOS, descobrirá que usa cada vez mais delegados para conectar-se às várias APIs. Há retornos de chamadas de dados para tabelas, elementos da UI, retornos de chamada de GPS, etc. É possível inclusive criar suas próprias interfaces personalizadas para as suas próprias bibliotecas.

Para usar o analisador de XML, estenda a classe do controlador de visualização, como na Listagem 5.

Lista 5. SlideshowViewController.m com fhotos
- (void)viewDidLoad {
        [super viewDidLoad];

    photos = [[NSMutableArray alloc] init];

    NSXMLParser *photoParser = [[[NSXMLParser alloc] 
       initWithContentsOfURL:
       [NSURL URLWithString:@"http://localhost/photos/index.xml"]] autorelease];
    [photoParser setDelegate:self];
    [photoParser parse];

    NSURL *imageURL = [NSURL URLWithString:[photos objectAtIndex:0]];
    NSData *imageData = [NSData dataWithContentsOfURL:imageURL];
    UIImage *image = [UIImage imageWithData:imageData];
    [imgView setImage:image];
}

- (void)parser:(NSXMLParser *)parser didStartElement:(NSString *)elementName 
   namespaceURI:(NSString *)namespaceURI qualifiedName:(NSString *)qName 
   attributes:(NSDictionary *)attributeDict { 
    if ( [elementName isEqualToString:@"photo"]) {
        [photos addObject:[attributeDict objectForKey:@"url"]];
    }
}

A classe agora cria um analisador no método viewDidLoad e faz com que ele solicite e analise o XML do servidor. Também define o delegado para o analisador de volta para ele mesmo, de modo que receba retornos de chamada.

No exemplo, você deseja receber o retorno de chamada didStartElement que é acionado sempre que uma tag encontrada. A função didStartElement então olha para o nome da tag para ver se é uma tag de foto. Se for, didStartElement adiciona o valor do atributo url ao array de fotos.

Depois de o array de fotos ter sido concluído, o método viewDidLoad continua e define a imagem para a primeira imagem no array.

Execute o aplicativo para testar seu progresso. Deve ser possível ver a primeira imagem especificada no XML aparecer no emulador. Se você não visualizar a primeira imagem, pode haver um problema com o XML no servidor. Defina um ponto de interrupção no método didStartElement para ver se ele está sendo chamado. Se não estiver, você não está recebendo nenhum XML válido de volta do servidor.


Animando a apresentação de slides

A etapa final é usar o array de fotos para animar uma apresentação de slides. Dois itens serão necessários:

  • Um timer
  • Uma variável para conter o seu local atual na apresentação de slides

Adicione ambos os itens à definição de classe, como na Listagem 6.

Lista 6. SlideshowViewController.h concluído
#import <UIKit/UIKit.h>

@interface slideshowViewController : UIViewController<NSXMLParserDelegate> {
    IBOutlet UIImageView *imgView;
    NSMutableArray *photos;
    NSTimer *timer;
    int currentImage;
}

@end

O timer é um objeto que acionará eventos a um intervalo especificado. O currentImage é simplesmente um índice para o array de fotos que será usado para iterar através de todas as imagens.

A Listagem 7 mostra a versão final do código de aplicativo da apresentação de slides.

Lista 7. SlideshowViewController.m concluído
#import "slideshowViewController.h"

@implementation slideshowViewController

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
}

#pragma mark - View lifecycle

- (void)viewDidLoad {
        [super viewDidLoad];

    photos = [[NSMutableArray alloc] init];

    NSXMLParser *photoParser = [[[NSXMLParser alloc] 
      initWithContentsOfURL:[NSURL URLWithString:
      @"http://localhost/photos/index.xml"]] autorelease];
    [photoParser setDelegate:self];
    [photoParser parse];
    
    currentImage = 0;

    NSURL *imageURL = [NSURL URLWithString:[photos objectAtIndex:0]];
    NSData *imageData = [NSData dataWithContentsOfURL:imageURL];
    [imgView setImage:[UIImage imageWithData:imageData]];

    timer = [NSTimer scheduledTimerWithTimeInterval: 5.0
                                             target: self
                                           selector: @selector(handleTimer:)
                                           userInfo: nil
                                            repeats: YES];
}

- (void) handleTimer: (NSTimer *) timer {
    currentImage++;
    if ( currentImage >= photos.count )
        currentImage = 0;

    NSURL *imageURL = [NSURL URLWithString:[photos objectAtIndex:currentImage]];
    NSData *imageData = [NSData dataWithContentsOfURL:imageURL];
    [imgView setImage:[UIImage imageWithData:imageData]];
}

- (void)parser:(NSXMLParser *)parser didStartElement:(NSString *)elementName 
   namespaceURI:(NSString *)namespaceURI qualifiedName:(NSString *)qName 
   attributes:(NSDictionary *)attributeDict { 
    if ( [elementName isEqualToString:@"photo"]) {
        [photos addObject:[attributeDict objectForKey:@"url"]];
    }
}

- (void)viewDidUnload
{
    [super viewDidUnload];
}

- (BOOL)shouldAutorotateToInterfaceOrientation:
                                       (UIInterfaceOrientation)interfaceOrientation {
    return YES;
}

@end

Os dois novos elementos na Listagem 7 são a criação do timer no método viewDidLoad e a adição do método handleTimer , que é chamado quando o timer é acionado. O método handleTimer simplesmente incrementa currentImage, então rola o índice se atingir o fim do array. Também usa a lógica de análise de imagem padrão para obter a imagem no dado índice e exibi-la.

Os timers têm dois modos: podem ser acionados uma vez ou ser acionados continuamente. No método viewDidLoad , o exemplo especifica YES para repetições, de modo que o método handleTimer é chamado repetidas vezes durante o ciclo de vida do aplicativo.


Conclusão

Neste artigo, você criou um aplicativo básico do iOS. Agora é possível levar o aplicativo para várias direções diferentes. A estrutura iOS CoreGraphics fornece um conjunto avançado de transições que podem ser usadas para animar a troca de imagens. É possível usar PHP no backend para gerar o XML dinamicamente. Ou é possível inclusive usar a API CoreAudio para colocar música junto com toda a apresentação de slides.

Recursos

Aprender

Obter produtos e tecnologias

Discutir

Comentários

developerWorks: Conecte-se

Los campos obligatorios están marcados con un asterisco (*).


Precisa de um ID IBM?
Esqueceu seu ID IBM?


Esqueceu sua senha?
Alterar sua senha

Ao clicar em Enviar, você concorda com os termos e condições do developerWorks.

 


A primeira vez que você entrar no developerWorks, um perfil é criado para você. Informações no seu perfil (seu nome, país / região, e nome da empresa) é apresentado ao público e vai acompanhar qualquer conteúdo que você postar, a menos que você opte por esconder o nome da empresa. Você pode atualizar sua conta IBM a qualquer momento.

Todas as informações enviadas são seguras.

Elija su nombre para mostrar



Ao se conectar ao developerWorks pela primeira vez, é criado um perfil para você e é necessário selecionar um nome de exibição. O nome de exibição acompanhará o conteúdo que você postar no developerWorks.

Escolha um nome de exibição de 3 - 31 caracteres. Seu nome de exibição deve ser exclusivo na comunidade do developerWorks e não deve ser o seu endereço de email por motivo de privacidade.

Los campos obligatorios están marcados con un asterisco (*).

(Escolha um nome de exibição de 3 - 31 caracteres.)

Ao clicar em Enviar, você concorda com os termos e condições do developerWorks.

 


Todas as informações enviadas são seguras.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=80
Zone=Software livre
ArticleID=784653
ArticleTitle=Desenvolver um aplicativo de apresentação de slides do iOS para o iPad
publish-date=01162012