Tutorial FileMaker: Aprenda a colocar as capas da MAC+

Por Lucas Longo*

Depois de uma pausa, voltamos ao desenvolvimento de nosso aplicativo (um leitor RSS do site da MAC+). Para quem já nos acompanha (ou está chegando agora), sugerimos a leitura das matérias anteriores, para recuperarmos o que já foi feito até o momento. Na MAC+ 56, deixamos nossas classes e interface básica montadas. E como havíamos dito, vamos iniciar com a parte das capas das revistas. Por hora, nosso aplicativo esta assim:

Esta tela do aplicativo vai ser estática, isto é, vamos colocar o conteúdo manualmente no projeto, em vez de puxá-lo diretamente da internet, que seria o ideal para manter o aplicativo sempre atualizado.

O passo inicial é pegar as imagens do site da MAC+ e arrastá-las para o seu projeto. Peguei as capas do seguinte site: http://macmais.terra.com.br/macmais/ e coloquei os nomes de acordo com a edição da revista (052.png, 053.png etc.). Vamos colocar essas capas em um UIScrollView. Este objeto é muito utilizado no iPhone em aplicativos de fotos, por exemplo, que permite ao usuário fazer uma rolagem (scroll). Ele serve para exibir um conteúdo que é maior do que a tela do iPhone, assim, é possível determinar qual a porção do conteúdo se quer ver na tela simplesmente arrastando o dedo em cima dele.

O que queremos fazer é exibir as capas das revistas em um grid de três colunas e N linhas. O primeiro passo é colocar um UIScrollView no RevistasViewController.xib. Ao abrir o Interface Builder, vemos um view em branco. Abrindo a tela Documents ([Command] + [0] ou Window > Documents), selecionamos View e chamamos o Attributes Inspector ([Command] + [1] ou Tools > Attributes Inspector). Ali, vemos uma seção de Simulated Interface Elements.

Os elementos simulados nos permitem colocar na tela componentes que estão em volta de nosso view controller para poder saber o espaço efetivo que temos para colocar nossos objetos na tela. Neste caso, sabemos que o RevistasViewController esta contido dentro de um tab bar, portanto vamos selecionar a opção do Bottom Bar para ser um Tab Bar. Agora, sim, podemos colocar o nosso UIScrollView na tela, e é só. Nosso xib, então fica como na tela abaixo.

De volta ao Xcode, abrimos o header (.h) de nossa classe (RevistasViewController.h). Vamos declarar uma variável para o UIScroll- View e colocar a “palavra mágica” IBOutlet. O IBOutlet indica tanto para o compilador quanto para o Interface Builder que esta variável pode ser referenciada por um arquivo de interface. Em outras palavras, o IBOutlet nos fornece um mecanismo de acessar um objeto que está na interface pelo código.

#import <UIKit/UIKit.h>
@interface RevistasViewController : UIViewController
{
IBOutlet UIScrollView* meuScrollView;
}
@end

Percebam que o padrão de nomenclatura para variáveis é sempre com a primeira letra minúscula e as palavras subsequentes com maiúscula. Classes por sua vez sempre tem a primeira letra em maiúscula.

De volta no Interface Builder, na tela de Documents, clicamos no File’s Owner, o dono do arquivo, no caso, RevistasViewController.h. Abrimos, então, o Connections Inspector ([Command + [2] ou Tool > Connections Inspector) e como se fosse mágica, vemos o nosso “meuScrollView”. O que aconteceu aqui? O Interface Builder está lendo do nosso RevistasViewController.h e encontrou um IBOutlet ali.

Certo, agora temos de conectar fisicamente o IBOutlet com o objeto na tela. Isso é necessário pois, imagine que temos vários scroll views na mesma tela. É preciso informar qual é qual. Para fazer a conexão, clique e segure dentro do marcador ao lado do meuScrollView e arraste para o UIScrollView que esta na tela.

Pronto! Agora quando nosso código compilar, poderemos acessar o meuScrollView que esta no Interface Builder diretamente.

Vamos, então, para a implementação deste scroll view. A nossa estratégia vai ser a seguinte: quando o RevistasViewController for carregado, vamos criar um vetor de imagens e colocar cada imagem em seu devido lugar dentro do scroll view, deslocando a posição delas de acordo com a linha e coluna que estaremos montando. Mas onde vamos colocar esse código?

Todo view controller tem métodos que são chamados durante a inicialização do objeto, por exemplo, o “viewDidLoad”, que nos diz que o view foi carregado. Também podemos saber quando o view vai desaparecer com o viewWillDisappear. Por ora, o que nos interessa é o evento em que o view foi carregado, então, basta remover os comentários do viewDidLoad que já está no modelo do RevistasViewController.m.

#import “RevistasViewController.h”
@implementation RevistasViewController
- (void)viewDidLoad {
[super viewDidLoad];
// Nosso código aqui
for (int i = 0; i < 14; i++) {
}
}

Neste loop, estamos iterando do 0 (zero) ao 14, pois só peguei as ultimas 14 capas das revistas.

Em seguida, dentro do loa, criamos uma variável que define o nome da foto. NSString é uma variável de texto, e uso um método de classe que me permite criar um texto inserindo uma variável dentro dele. O %i indica que dentro do texto vou inserir um número inteiro no texto e passo para ele o i+44 pois é como estão nomeadas as minhas fotos. O resultado é 045.png por exemplo.

NSString* nomeImagem = [NSString stringWithFormat:@"0%i.png", i + 44];

Uma vez criado o nome da imagem, colocaremos a imagem em si a partir do seu nome.

UIImage* imagem = [UIImage imageNamed:nomeImagem];

Agora, com a imagem em mãos, vamos criar o objeto que efetivamente a exibe na tela, o UIImageView:

UIImageView* imageView = [[UIImageView alloc] initWithImage:image];

Aqui alocamos e inicializamos um image view já com a imagem criada. Também vamos decidir onde ela vai ser inserida – a posição dela na tela. Para isso, temos de definir o frame deste image view. Este frame é um CGRect, que tem uma função CGRectMake, onde você passa a origem no x, origem no y, largura e altura em pixels.

CGRect frame = CGRectMake(x, y, w, h); imagem.frame = frame;

Agora, um pouco de matemática para definir o x e y da foto. Primeiro definimos que teremos três colunas.

int numeroDeColunas = 3;

Agora, decidimos o quanto de espaçamento queremos deixar entre as imagens. Vou colocar 10% da largura total da tela para cada espaço em branco.

float percentualParaSpacing = 10;

A seguir, calculamos o tamanho de cada foto pegando a largura e dividindo pelo número de colunas mais a fração do spacing.

float dimensaoFoto = self.view.frame.size.
width / (numeroDeColunas * (1 + 1/ percentualParaSpacing));

Agora que temos a dimensão da foto, podemos calcular o tamanho efetivo do espaçamento.

float spacing = dimensaoFoto / percentualParaSpacing;

Depois, criamos uma variável para armazenar a nossa posição no grid:

float linhaAtual = -1;
float colunaAtual = -1;

Dentro do nosso loop, verificamos se precisamos ir para uma nova linha analisando a sobra da divisão de i com o numero de colunas:

if (i%numeroDeColunas == 0) {
linhaAtual++;
colunaAtual = 0;
}

E, finalmente, podemos calcular o x e y levando em consideração o spacing, a coluna atual e a dimensão da foto.

float x = spacing + (colunaAtual * (dimensao-
Foto + spacing));
float y = spacing + (linhaAtual * (dimensao-
Foto + spacing));
float w = dimensaoFoto;
float h = dimensaoFoto;

Os dois últimos passos de nosso loop são para adicionar a imagem ao scroll view, “livrando-se” do image view, já que não precisamos mais dele (ele está adicionado ao scroll view) e incrementar a coluna atual:

[meuScrollView addSubview:imageView];
[imageView release];

colunaAtual++;

Nosso código fica assim:

int numeroDeColunas = 3;

float percentualParaSpacing = 10;
float dimensaoFoto = self.view.frame.
size.width / (numeroDeColunas * (1 + 1/ percentualParaSpacing));
float spacing = dimensaoFoto / percentualParaSpacing;
float linhaAtual = -1;
float colunaAtual = -1;
for (int i = 0; i < 14; i++) {
NSString* nomeImagem = [NSString
stringWithFormat:@"0%i.png", i + 44];
UIImage* imagem = [UIImage
imageNamed:nomeImagem];
UIImageView* imageView = [[UIImage-
View alloc] initWithImage:imagem];
imageView.contentMode = UIViewContentModeScaleAspectFit;
if (i%numeroDeColunas == 0) { linhaAtual++; colunaAtual = 0;}
float x = spacing + (colunaAtual * (dimensaoFoto + spacing));
float y = spacing + (linhaAtual * (dimensaoFoto + spacing));
float w = dimensaoFoto;
float h = dimensaoFoto;
CGRect frame = CGRectMake(x, y, w, h);
imageView.frame = frame;
[meuScrollView addSubview:imageView];
[imageView release];

colunaAtual++;}

Agora, é preciso dizer qual o tamanho total do nosso conteúdo para o scroll view. O tamanho depende da largura da tela e de quantas linhas temos:

meuScrollView.contentSize =
CGSizeMake(self.view.frame.size.width, linhaAtual
* (spacing + dimensaoFoto) + (2 *
spacing + dimensaoFoto));

Rodamos o aplicativo e temos o seguinte resultado – nossas imagens em um grid que permite a rolagem na vertical.

Em seguida, queremos colocar um mínimo de informação sobre a revista que serão visualizadas quando tocamos em uma delas. Para isso, vamos adicionar botões transparentes em cima de nossas imagens e associar uma ação a cada um desses botões que vai nos mostrar qual a edição da revista.

Criamos dentro do nosso loop um botão do tipo custom (transparente) e já definimos o seu posicionamento como igual ao do image view:

UIButton* button = [UIButton buttonWithType:UIButtonTypeCustom];
button.frame = frame;

Depois, associamos uma ação com o botão usando a macro @selector, que nos permite passar como parâmetro o nome de um método. O target é a classe que implementa o método e control events são os eventos gerados por controladores. Neste caso, queremos o touch up inside – usuário tirou o dedo da tela e estava dentro do botão.

[button addTarget:self action:@selector(botaoClicado:) forControlEvents:UIControlEventTouchUpInside];

Neste método, temos de saber de alguma maneira qual foi o botão tocado para poder exibir a informação correta. Para isso, usamos a propriedade que todos os UIViews têm, a tag – um inteiro simplesmente. Vou colocar o número da edição da revista para exibir depois.

button.tag = i + 44;

Não se esqueça de adicionar o botão ao scroll view:

[meuScrollView addSubview:button];

No método associado ao botão, vamos exibir um alerta com o nome da edição. Observem que já recebemos o botão que chamou a função como parâmetro do método. Criamos um string a partir da tag do botão e usamos o string como a mensagem do alerta.

-(void)botaoClicado:(UIButton*)button {

NSString* message = [NSStringstringWithFormat:@"Revista número %i", button.tag];
UIAlertView* alert = [[UIAlertView alloc]
initWithTitle:@”Mac+” message:message
delegate:nil cancelButtonTitle:@”OK”
otherButtonTitles:nil];
[alert show];
[alert release];
}

Arrumando a casa Organizar as capas da revista no aplicativo é mais trabalhoso do que complicado

Por enquanto, é só. Na próxima edição, continuaremos nosso projeto. Até lá.

Lucas Longo (@iaibrasil) é diretor do iAI, Instituto de Aprendizagem Interativa, e adora seu iPhone.

*Matéria originalmente publicada na MAC+ 59.