Still Coding

No último post vimos como criar um ViewController via código. Isso não é nem um pouco prático, mas para algumas situações específicas pode ser útil.

Bom, mas dizem por aí que todo bom programador tem como “virtude” ser preguiçoso. Virtude porque a preguiça o obriga a encontrar maneiras mais fáceis de fazer as coisas chatas e/ou repetitivas. Vamos então ver como criar Views para suas apps de uma maneira bem mais fácil.

Ao tutorial:

Abra o Xcode e crie um novo projeto usando o template View Based Application. Dê um nome bem criativo ao seu projeto como, por exemplo, Teste.

O Xcode irá criar um projeto bem simples, com uma View (TestViewController.xib) e seu respectivo Controller (TesteViewController.m e TesteViewController.h). A view que criaremos no Interface Builder será, na verdade, uma subview da que foi criada automaticamente pelo Xcode. Tudo bem simples, só para passar o conceito.

Vamos declarar nossa subview dentro do controller criado automaticamente pelo Xcode. Abra o arquivo TesteViewController.h e acrescente a declaração:

@interface TesteViewController : UIViewController {
    UIView *subView;
}

@property (nonatomic, retain) IBOutlet UIView *subView;

Depois faça o synthesize da propriedade no TesteViewController.m:

#import "TesteViewController.h"

@implementation TesteViewController

@synthesize subView;

Agora vamos criar nossa view no Interface Builder e fazer as conexões necessárias para nosso controller “enxergá-la”. Selecione Resources na painel esquerdo e adicione um novo arquivo.

Escolha “User Interface” nas opções à esquerda e selecione o template View XIB.

Novamente, escolha um nome criativo para nossa view: SubView. Ao retornar ao Xcode, de um duplo clique no arquivo SubView.xib criado, para abri-lo no IB.

O Xcode criou para nós uma  subview do tamanho da tela inteira. Mas nós queremos ela menor, para inserí-la na view principal. Normalmente é assim que você irá fazer nas suas aplicações, é claro. A subview será um dos componentes do layout da view principal, junto com outros elementos e/ou controles.

Tem um “macete” para fazer com que o IB nos deixe alterar o tamanho da nossa view para o valor desejado. Na janela Attributes Inspector (abra com Cmd-1) selecione None para Status Bar.

Com isso os campos que permitem alterar o tamanho da nossa view são habilitados. Vá para a janela Size Inspector (Cmd-3) e mude o H: (height – altura) para 40). Deixe o campo W: (width – comprimento) em 320.

Bom, vamos fazer alguma firula na nossa subview para que possamos enxergá-la quando for adicionada à sua view “pai” (caso contrário ambas estariam com a mesma cor default e não seria possível fazer a distinção entre elas). Acrescente um label à view e mude a cor de fundo. Por exemplo:

Agora um dos passos mais importantes: temos que dizer quem será o controller que irá responder por esta view e conectá-la à propriedade correta deste controller. É isto que nos permitirá manipulá-la no nosso código.

Selecione “File’s Owner” na janela com os componentes da nossa SubView.xib:

Na janela Identity Inspector (Cmd-4) e escolha a classe do nosso controller (TesteViewController) no campo Class.

Com isto dizemos à SubView que o controller dela será o já criado TesteViewController. Agora falta informar qual das propriedades deste controller refere-se ao componente UIView. Clique com o botão direito no File’s Owner da janela SubView.xib e conecte a propriedade subView ao componente View, como mostrado na figura abaixo:

Pronto! Layout (maravilhoso…) criado e conexões feitas. Terminamos no IB. Volte ao Xcode e vamos acrescentar o código que mostra nossa view.

Abra o arquivo TestViewController.m e procure pelo método viewDidLoad e acrescente o código abaixo:

- (void)viewDidLoad {
    [super viewDidLoad];

    [[NSBundle mainBundle] loadNibNamed:@"SubView" owner:self options:nil];
    self.subView.frame = CGRectMake(0.0, 50.0, 320.0, 40.0);
    [self.view addSubview:self.subView];
}

Na linha 4 estamos lendo do bundle da nossa app o arquivo NIB que contém nossa view. Depois, na linha 5, setamos a posição da nossa view dentro da view pai. Por fim, adicionamos a SubView na view pai. Voilá!

O “segredo” das coisas funcionarem, e o Xcode saber que nossa “SubView.xib” corresponde à propriedade subView do nosso controller, está na conexão feita lá em cima, no IB. Lembre-se sempre disso, pois é muito comum os desenvolvedores esquecerem este passo e depois ficarem malucos tentando entender porque sua aplicação não funciona corretamente.

Rode o programa e o resultado será algo assim:

É isto! Bem simples, como deveria ser mesmo. Quando for pensar no layout das suas aplicações, tenha em mente como esta técnica pode facilitar seu trabalho. Criar as views no IB é sempre mais fácil do que fazê-lo “na mão”.

Claro que existem considerações: alguns layouts podem ser um pouco mais complicados e não serem possíveis de serem feitos no IB. Outro fator a ser levado em conta é que a leitura de um arquivo de resource do “disco” é uma tarefa que demanda mais do hardware do iPhone do que construí-la no código (além do recurso gastar mais espaço). Para muitas aplicações isto, claro, não fará diferença. Avalie caso a caso.