Capítulo 6. Realizando operações com a Internet
3
float altura = self.scroll.bounds.size.height;
4
5
self.scroll.contentSize = CGSizeMake(largura * _elementos.count,
6
altura);
7
self.scroll.pagingEnabled = YES;
8
9
_imagens = [[NSMutableArray alloc] init];
10
11
// Cria todos os lugares onde uma imagem pode
12
// aparecer, para facilitar as coisas na hora
13
// de carregar a imagem de fato do Flickr
14
int indice = 0;
15
16
for (NSDictionary *item in _elementos) {
17
CGRect posicao = CGRectMake(indice++ * largura, 0, largura,
18
altura);
19
UIImageView *img = [[UIImageView alloc] initWithFrame:posicao];
20
21
[_scroll addSubview:img];
22
[_imagens addObject:img];
23
}
24
25
// Adiciona a primeira imagem só para não ficar com a tela vazia
26
[self carregaImagemRemota:0];
27 }
O código da linha 5 faz exatamente o que foi descrito no parágrafo anterior, defi-
nindo a área de rolagem horizontal como sendo o tamanho do componente de scroll
pelo número de imagens que temos. Além disso, queremos que o usuário possa ro-
lar o conteúdo precisamente imagem por imagem, dando aquele efeito de que um
simples arrastar já passe para a próxima imagem. Isso é feito com o código da linha
6. Nos seus testes, mude o valor da propriedade pagingEnabled para NO e veja a
diferença no comportamento da rolagem.
O NSMutableArray iniciado na linha 8 será utilizado para termos acesso rá-
pido e fácil a todos os componentes de imagens criados mais abaixo no método.
Existem outras maneiras de obter o mesmo resultado sem precisar de uma variável
auxiliar como estamos fazendo este caso, porém a abordagem mostrada neste exem-
plo é bastante prática e não tem impactos significativos no uso da memória, pois
apenas
guardaremos referências.
115
6.8. Carregar uma determinada imagem
Casa do Código
Em iOS, sempre que você quiser mostrar uma imagem ao usuário, fará uso do
componente UIImageView. Este componente, assim como todas views, precisa ser
posicionado de maneira absoluta não existe o conceito de posicionamento relativo
em iOS. O código da linha 16 cria a posição onde cada imagem ficará, e na linha 17
é criada a imageview em si. Se não tivéssemos a conta indice++ * largura,
todas as imagens ficariam no mesmo lugar, se sobrepondo. A figura 6.9 demonstra
este procedimento.
Figura 6.9: Representação gráfica do posicionamento das imagens no componente
scroll
Como queremos que as imagens sejam roladas através do nosso componente
scroll as adicionamos como filhas do mesmo, conforme o código da linha 19.
6.8
Carregar uma determinada imagem
No passo anterior configuramos o UIScrollView e já adicionamos todos os compo-
nentes que irão carregar as imagens do 500px, deixando o terreno preparado para
o momento de mostrar cada uma. Embora poderíamos criar cada UIImagemView
somente quando o usuário chegasse no ponto do scroll em que ela fosse necessá-
ria, isso demandaria um pouco mais de trabalho, além de correr o risco de causar
aquele efeito de travada na interface. Porém, como não vamos mostrar milhares
de imagens, pré-gerar facilita bastante as coisas.
116
Casa do Código
Capítulo 6. Realizando operações com a Internet
1 -(void) carregaImagemRemota:(int) indice {
2
NSDictionary *item = _elementos[indice];
3
NSDictionary *imageInfo = item[@"images"][0];
4
NSString *url = imageInfo[@"url"];
5
6
NSLog(@"Carregando a URL %@", url);
7
8
UIImageView *img = _imagens[indice];
9
img.contentMode = UIViewContentModeScaleAspectFit;
10
[img setImageWithURL:[NSURL URLWithString:url]];
11 }
O código da listagem acima recebe como argumento o índice da imagem a ser
carregada, relativo ao conteúdo do array imagens, pega a URL do dicionário criado
pelo AFNetworking lá no primeiro passo, e solicita o download e posterior exibição
da imagem na tela. Na linha 8 pegamos a referência ao UIImageView criado no
passo anterior, e informamos através da propriedade contentMode que a imagem
deve ser renderizada de tal maneira que apareça por completo, porém respeitando
as dimensões da tela e as devidas proporções. Sem esta propriedade, a imagem teria
um aspecto esticado, fora das proporções originais.
Uma parte interessante deste código está na linha 10, que utiliza mais um recurso
do AFNetworking através do método setImageWithURL:. Este método não existe
na API padrão do componente UIImageView, mas o AFNetworking por meio do
recurso de Categorias, o qual é explicado em detalhes no capítulo sobre Objective-
C adiciona esta funcionalidade. Ela se encarrega de fazer o download da imagem
em segundo plano (ou em background, no termo mais comum) e, caso ela já tenha
sido baixada, de utilizar o cache local da mesma. Dessa forma, últimas chamadas a
setImageWithURL: com um mesmo endereço farão apenas um único download.
Isso é uma grande mão na roda, pois se fossemos ter que fazer isso manualmente, o
trabalho seria grande.
117
6.9. Carregar as outras imagens à medida que interagimos com o scroll