hierárquica, conforme exemplificado abaixo:
// Exemplo de JSON, retirado da API do site 500px.com
{
id: 54007966,
name: "winner and loser",
times_viewed: 2548,
rating: 74.8,
votes_count: 985,
image_url: "http://.....",
images: [
{
size: 4,
url: "http://....."
}
]
}
O próximo exemplo mesclará o uso de JSON com carregamento remoto e assín-
crono de imagens, para criar um visualizador de imagens da comunidade fotográfica
500px (http://500px.com) . Ao iniciar, o aplicativo buscará no 500px a relação das
últimas imagens enviadas pelos usuários, processar o resultado e mostrar as imagens
em componente de scroll à medida que o usuário vai interagindo com o aplicativo. O
código-fonte completo deste exemplo está localizado na pasta VisualizadorImagens,
e na figura 6.6 você vê uma prévia do aplicativo final rodando.
107
6.5. Trabalhando com JSON e imagens remotas
Casa do Código
Figura 6.6: App mostrando imagens públicas do 500px.com
Comece criando um novo aplicativo do tipo Single View Application, com as
mesmas configurações utilizadas no exemplo anterior e chame-o de VisualizadorI-
magens. Depois de criar o projeto, não esqueça de incluir o pacote do AFNetwor-
king, copiando o diretório como na app anterior.
A interface do aplicativo é bastante simples, consistindo apenas de um compo-
nente UIScrollView. Abra o arquivo Main.storyboard e mude a cor de fundo
a view para um tom escuro, como RGB 40, 40, 40. Para isso, abra o Attributes Ins-
pector ( View -> Utilities -> Show Attributes Inspector) e clique no
componente Background, que abrirá a mini janela Colors (obs: caso não apareça
nada para você, clique na área branca da tela do aplicativo que aparece no storybo-
ard). Nela, selecione a opção Color Sliders (segundo da esquerda para a direita) e
depois RGB Sliders, no combo logo abaixo da lupa. Insira os valores e feche a janela
Colors. Veja a figura 6.7 para referência.
108
Casa do Código
Capítulo 6. Realizando operações com a Internet
Figura 6.7: Mudando a cor de fundo do componente
Em seguida, adicione o componente Scroll View, disponível na Object Library
( View -> Utilities -> Show Object Library), arrastando-o para que fi-
que centralizado e ocupe todo o espaço disponível (O Xcode já deverá deixar o com-
ponente automaticamente do tamanho da tela, cabendo a você apenas centralizar).
Por último, precisamos conectar o Outlet do scroll com o código do controller, e tam-
bém definir o mesmo controller como classe responsável para tratar dos eventos que
o componente irá gerar. Em outras palavras, vamos tornar a classe ViewController
como sendo o delegate do Scroll View.
Delegates
Delegate é um padrão de projeto no qual um objeto delega o traba-
lho a ser feito para algum outro objeto (o delegate propriamente dito).
Uma das principais vantagens é que a classe pode delegar trabalho para
algum outro lugar, melhorando a separação de responsabilidades e sem
ter que ficar amarrada a uma determinada implementação. Delegates são
utilizados frequentemente no desenvolvimento com Objective-C.
109
6.5. Trabalhando com JSON e imagens remotas
Casa do Código
Para conectar o outlet o processo é o mesmo de sempre: com o Assistant Editor
aberto, selecione o componente no Interface Builder, segure CTRL e arraste para o
arquivo ViewController.h ao lado, e crie a connection Outlet com o nome scroll.
Já conectar o evento de delegate envolve alguns passos a mais, mas embora possa
parecer complicado numa primeira tentativa, é algo que rapidamente você dominará:
Primeiramente abra o Document Outline, clicando na pequena seta que tem
no canto inferior esquerdo, no Interface Builder
Selecione o scroll, então segure CTRL e arraste para cima do item View Con-
troller, no Document Outline
No pequeno popup que aparecer, selecione a opção delegate
Feche o Document Outline, clicando na mesma seta usada para abri-lo
Veja a figura 6.8 para referência.
110
Casa do Código
Capítulo 6. Realizando operações com a Internet
Figura 6.8: Conectando o delegate do scroll view
O que acabamos de fazer foi configurar o scroll view
para que use a classe
ViewController como sendo a responsável por lidar com os eventos do de-
legate dele.
Para finalizar esta parte da configuração, é necessário modificar
o arquivo ViewController.h para que ele possa lidar com os eventos correta-
mente.
Para isso, modifique a declaração
@interface ViewController
: UIViewController
para
@interface ViewController :
UIViewController<UIScrollViewDelegate>.
Aproveitando que estamos mexendo no arquivo ViewController.h, declare uma
variável de instância do tipo
NSArray chamada elementos, e outra do tipo
NSMutableArray chamada imagens, pois faremos uso delas logo mais. O código
do arquivo deverá ficar assim:
@interface ViewController : UIViewController<UIScrollViewDelegate>
111
6.6. Configurar os blocks de sucesso e erro do AFNetworking
Casa do Código
@property (retain, nonatomic) NSMutableArray *imagens;