Criando uma ação para o Segmented Control

Para começar vamos definir uma variável que irá determinar o primeiro índice deste componente, no arquivo MainViewController.h:

#define KShowSegmentIndex 0

Vamos utilizar esta definição para definir a ação que será tomada no momento que desejarmos exibir ou inibir o componente Picker View.

Toda vez que tivermos trabalhando com um componente de multipla escolha, é comum criarmos uma ação com o nome de toggle, no caso vamos criar uma com o nome de toggleShowHide. Em MainViewController.h:

- (IBAction)toggleShowHide:(id)Sender;

Agora vamos em MainViewController.m:

- (IBAction)toggleShowHide:(id)Sender {

NSInteger segment = segControl.selectedSegmentIndex;

if (segment == KShowSegmentIndex) {

[dataPicker setHidden:NO];

} else {

[dataPicker setHidden:YES];

}

}

Para entendermos melhor, segControl é a declaração do UISegmentControl que eu declarei no MainViewController.h e dataPicker é a declaração do Picker View.

Certifique-se que todos os componentes estão declarado e relacionados com o IB.

Execute o código.

Exercício

1. No projeto iPicker, crie uma nova view e insira um componente Picker View com somente uma coluna com os seguintes elementos: Campinas, Santos, Ribeirão Preto, São Vicente, Guarujá e Indaiatuba. Na view principal insira um SegmentedControl. A primeira opção apresentará o Picker View dos Estados e a segunda a de Cidades.

(by Ademar Varela)

Este componente é outro que só existe no iPhone SDK. Ele tem um equivalente, mas não igual, no ambiente Desk que é o componene Tab. O funcionamento deste componente é similar ao Tab, ele executa alguma ação na medida que você seleciona um botão, ou seja, as ações estão segmentadas e dependem da execução dos botões para serem executados.

Inserindo um Segmented Control no IB

Abra o projeto iPhoneHello, e abra o MainView.xib.

Na janela Libray selecione Input & Values e arraste o componente UISegmentedControl para a Main View.

Após inserir o componente vamos configura-lo.

Em atributos da janela Inspector, selecione Style com a opção Bar.

No atributo Segment 0, atribua “Apresenta” para o item Title e em Segment 1, atribua “Esconde” para o item Title.

Agora que já deixamos o componente do jeito desejado, vamos fechar o IB e retornar para o XCode.

Inserindo Segmented Control no XCode

Não vou me estender sobre como declarar componentes no XCode, já sabemos como fazer isso, declarar componente, definir propriedades e inicializa-lo. Este é só um lembrete.

Para entender o funcionamento deste componente vamos determinar uma ação para o momento em que o usuário pressionar o botão “Apresentar” e o “Esconder”. Na verdade, vamos definir que quando o usuário escolher “Apresentar” vamos exibir o Picker View que fizemos anteriormente, e quando o usuário pressionar “Esconder” vamos inibir o componente Picker View.

Podemos manipular a seleção feita pelo usuário, para isso vamos modificar o método showHello.

NSInteger row = [dataPicker selectedRowInComponent:0];

NSString *selected = [dataElementos objectAtIndex:row];

lblHello.text = selected;

(by Ademar Varela)

Como já foi falado, precisamos de um elemento NSArray para popular um Picker view, para isso precisamos inicialmente declara-lo. No MainViewController.h, digite o seguinte código:

NSArray *elementos;

NSArray *dataElementos;

@property (nonatomic, retain) NSArray *elementos;

@property (nonatomic, retain) NSArray *dataElementos;

Agora vamos aprender a implementação de um componente muito interessante e que basicamente só existe no iPhone, o Picker View. Este componente substitui o componente Combo Box disponível nas demais plataformas mobile. A idéia básica deste componente é apresentar uma lista de opções possíveis para o usuário.
Para implementar este componente vamos passar superficialmente pela instrução chamada NSArray. Isto porque esta implementação necessita usar esta instrução, mais adiante falaremos mais profundamente desta instrução, por enquanto bastará sabermos que NSArray permite criar uma array (matriz) de elementos, alfanuméricos ou numéricos.

Criando uma matriz

Sintaxe:

NSArray *elementos = [[NSArray alloc] initWithObjects:@”elemento1”,nil];

Basicamente, estamos criando uma matriz chamada elementos que contém um elemento chamado “elemento 1”. A instrução nil, determina o final da lista de elementos.

Implementando um Picker View

Antes de iniciarmos a implementação, precisamos entender que um Picker View é um componente que precisa ser carregado antes de ser exibido, ou seja, é normal carregarmos a matriz de elementos no momento que a aplicação é inicializada. Para fazermos esta implementação será necessário implementar 3 métodos:

(NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView
(NSInteger)pickerView:(UIPickerView*)pickerViewnumberOfRowsInComponent:(NSInteger)component
(NSString *)pickerView:(UIPickerView*)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component

O primeiro método retorna a quantidade de colunas que o Picker View vai ter, o segundo a quantidade de elementos e o terceiro retorna os elementos propriamente dito.

Inserindo um Picker View no IB

Vamos abrir o projeto iPhoneHello e abrir o IB pelo arquivo MainView.xib

Na janela Library selecione Data Views e arraste o componente UIPickerView para a view MainView.

Depois de arrastar o componente para a view, nós precisamos delegar o controle do mesmo para o controller. Para isso de um click com o botão control pressionado, quando aparecer a janela pop-up selecione a opção Delegate e arraste até o File’s Owner.
Faça o mesmo procedimento para a opção Data Source.

Agora você pode fechar o IB e voltar para o XCode.

Declarando componente no XCode

Claro que depois de inserirmos o componente no IB, nós precisamos declara-lo no XCode. O princípio é o mesmo:

IBOutlet UIPickerView *dataPicker;

@property (nonatomic, retain) UIPickerView *dataPicker;

@synthesize dataPicker;

(by Ademar Varela)

Você já deve ter percebido que quando usamos o componente UITextField, o teclado virtual aparece e não conseguimos recolher, mesmo pressionando o botão “return”. Isto acontece porque precisamos tratar o comportamento do teclado

Para isto vamos implementar o seguinte método:

• • (BOOL)textFieldShouldReturn:(UITextField *)theTextField {

if (theTextField == variável) {

[variável resignFirstResponder];

}

return YES;

}

Este método irá tratar todos os eventos de teclado, no parâmetro theTextField é recebido o nome do componente que está evocando o tratamento. Perceba que você pode tratar o conteúdo de uma variável no momento que recebe o retorno do teclado, como por exemplo verificar se está o campo está vazio ou não.

Text Input Traits

Existem algumas modificações que podem ser feitas no comportamento do componente UITextField, tais como:

• • • Capitalize - Aqui você pode dizer quais os formatos do texto que será digitado, por exemplo, se vai deixar só a primeira letra maiúscula, ou a palavra, ou a sentença, ou mesmo sem nenhuma maiúscula.
    • Correction - Permitie usar o dicionário padrão e ajudar na correção de palavras.
    • Keyboard - Aqui você configura o tipo de teclado que vai utilizar
    • Appearance - Forma de exibição do teclado
    • Return Key - Define qual será a tecla de retorno do teclado.

Exercício

1. Modifique o projeto iPhoneHello. Insira o componente UITextField. Quando o usuário inserir o texto, a aplicação deverá verificar se o usuário digitou algo. Se não tiver nada no camo de texto, a aplicação manterá o teclado virtual aberto, caso contrário deverá exibir o que o usuário digitou no componente label. Modifique todos os tratamentos do teclado e teste um por um.
2. Crie uma aplicação chamada iAchou. Esta aplicação deverá gerar um número aleatório  entre 1 e 100 e o usuário deverá advinhar que número é este. Será necessário pesquisar qual a função que gera números aleatórios, no caso é a random().

(by Ademar Varela)

Usando a imagem da pasta Resource no IB

Dê um duplo click no arquivo MainView.xib. Voltamos ao IB. Agora selecione o componente UIView inserido anteriormente, e na janela Inspector/Attributes, no item Image selecione a imagem que você adicionou no projeto.

Agora vamos aprender colocar imagens nas views. Como você já deve ter percebido, se vamos mexer com interface gráfica vamos abrir o IB. Abra o projeto iPhoneHello e dê um duplo click no arquivo MainView.xib.

Inserindo o componente Imagem no IB

Vamos inserir uma imagem de fundo na view MainView, para isso vamos arrastar o componente UIView que está na janela Library, na pasta Data Views. Click e arraste até a Main View.

Como você vai arrastar um componente novo este componente estará acima dos elementos anteriormente inseridos e como queremos colocar uma imagem de background, teremos que deslocar este componente para atrás dos demais. Para isso vamos até o menu Layout e selecionamos Send to Back após inserir a UIView na Main View.

Após fazer isso, vamos escolher uma imagem para ser background da nossa aplicação. Antes porém, precisamos acrescentar esta imagem como resource da nossa aplicação. Feche e salve as informações do IB e retorne para o XCode.

Inserindo uma imagem no projeto

A maneira mais simples de fazer isso, é selecionar uma imagem (que tenha as dimensões de 320×480) que pode ser PNG ou JPG (para background JPG é mais recomendável) e arrastar até a pasta de Resources do projeto.

Selecione uma imagem e arraste-a até a pasta Resource, bem tranqüilo. Antes do XCode adicionar realmente a pasta no projeto, ele irá perguntar se você deseja adicionar este elemento como parte integrante do projeto.

Para não ter problemas de referências, nós sempre vamos adicionar qualquer referência no projeto, conforme figura abaixo:

Repare que estamos “setando” Copy items into destination group’s folder (if needed), isto fará com que todas as referências a esta imagem estarão no projeto.

Agora já inserimos o componente imagem no IB e já temos uma imagem adicionada, falta relacionarmos esta imagem com aquele componente.

(by Ademar Varela)

switch

Outra maneira de programar decisões é utilizar este comando, sua sintaxe:

switch (expressão) {

case constante:

…

break;

default:

…

break;

}

Basicamente o switch funciona da seguinte forma: caso (case) a expressão seja igual a uma constante, a aplicação irá executar todo o código até encontrar a instrução break. A instrução default existe para garantir que caso a expressão tenha uma constante não prevista ela receberá um tratatamento.

while

Executa uma série de instruções enquanto uma condições for atendida, sua sintaxe:

while (condição) {

…

}

for

Assim como o while, executa uma série de instruções até que uma condição seja atendida, sua sintaxe:

for ( inicio ; condição ; incremento) {

…

}

(by Ademar Varela)

Agora vamos deixar nossa aplicação um pouco mais inteligente, vamos aprender como permitir que a aplicação tome decisões de acordo com uma determinada situação. Geralmente para que isto seja possível, nós utilizamos variáveis para determinar o caminho que a aplicação irá seguir.

if

Toda linguagem que se preze, tem a instrução if. Conforme o conteúdo de uma ou mais variáveis é possível permitir a aplicação decidir qual o caminho a ser seguido.

Sintaxe:

Comparação entre variáveis:

if (variavelA == variavelB) {

//faz alguma coisa;

}

Uma nota importante. Assim como a linguagem C, o ObjC considera como operador de igualdade 2 sinais de “=”. Se você usar somente 1 sinal de “=” ele tentará atribuir o conteúdo da variavelB para a variavelA.

Comparação Booleana:

if (variavelC) {

//faz alguma coisa;

}

Se variavelC for TRUE, faz alguma coisa.

if (!variavelC) {

//faz alguma coisa;

}

Se variavelC for FALSE, faz alguma coisa.

Exercício

1. Modifique o projeto iPhoneHello, para que ele permita o usuário digitar um número de 1 a 3 em uma textbox. De acordo com a escolha do usuário, ao pressionar um botão uma das 3 views criadas anteriormente deverão ser exibidas.

(by Ademar Varela)