quinta-feira, 24 de março de 2011

Lição 7: menus e estilos

Menu de opções

Toda activity pode ter menus:

  • Menu de opções (options menu) – acionado pela tecla "menu" do dispositivo;
  • Menu de contexto (context menu) – acionado pelo "touch and hold";


Recupere o projeto "BioMago", que utilizamos nas lições anteriores (http://code.google.com/p/biomago/).



O menu de opções é utilizado para opções gerais, que se aplicam à Activity como um todo. Ele é acionado quando o usuário aciona a tecla "menu" do dispositivo.

O menu de contexto é utilizado em listas (veremos mais adiante), quando vários itens são exibidos simultaneamente. Ele se aplica a um só item.

Devemos evitar colocar opções de item dentro do menu de opções e opções gerais dentro do menu de contexto.

O Menu de Opções deve conter TODOS os comandos da Activity, independentemente se há botões para eles na tela. Ele é a opção preferencial de comandos do usuário. Entre colocar um botão na tela e colocar um comando no menu, prefira sempre a segunda opção.

Para criar um menu de opções, devemos criar um menu resource, que é um arquivo Android XML, dentro da pasta: "res/menu". Apesar de ser possível, não localizamos o menu em si, mas os Strings que ele exibe. Eis um arquivo de menu:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

<item android:id="@+id/mnuIncluirRegistro"
android:title="@string/mnu_novo_registro" />

<item android:id="@+id/mnuAjuda"
android:title="@string/mnu_ajuda" /> 


</menu>


Cada elemento "item" é uma entrada de menu, cujo rótulo está na propriedade: "android: title". Note também que foram atribuídos "ids" a cada elemento, de modo que possam ser referenciados no código-fonte.

Podemos ter ícones no meu, mas teremos que fornecer as imagens, ou utilizar as que estão no Android. Por exemplo:




<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

<item android:id="@+id/mnuIncluirRegistro"
android:icon="@android:drawable/ic_menu_add"    
android:title="@string/mnu_novo_registro" />

<item android:id="@+id/mnuAjuda"
android:icon="@android:drawable/ic_menu_help"
android:title="@string/mnu_ajuda" /> 


</menu>


Só devemos ficar atentos porque os ícones do Android podem variar, quando mudamos a plataforma ou a versão.

Uma vez que criamos nosso menu resource, precisamos "inflá-lo" dentro da Activity. E isto é feito no "callback" "onCreateOptionsMenu()". Este "callback" é invocado apenas uma única vez, quando o menu precisa ser criado. Se você quiser alterar o menu antes de exibi-lo, use o "callback": "opPrepareOptionsMenu()".

@Override
public boolean onCreateOptionsMenu(Menu menu) {
MenuInflater inflater = getMenuInflater();
inflater.inflate(R.menu.menu_lista, menu);
return true;
}


Usamos a classe "android.view.MenuInflater" para transformar nosso XML de menu em uma estrutura de objetos de menu. É claro que o identificador do nosso menu foi criado dentro da classe "R.java", bastando passá-lo no método "inflate", juntamente com o menu recebido.

Ao invés de fazer isto, poderíamos criar o menu "na mão", preenchendo os itens necessários dentro do "callback". Isto está fora do escopo deste curso e não recomendamos que seja feito.

Agora só falta uma coisa: interceptar quando o usuário clicar em um item do menu! Como você deve ter advinhado, há um "callback" para quando um item do menu de opções é clicado: "onOptionsItemSelected() ". Eis o código usado no projeto "BioMago:

@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case R.id.mnuIncluirRegistro:
this.incluirRegistro(null);
return true;
case R.id.mnuAjuda:
Intent i = new Intent (this.getApplicationContext(),
Ajuda.class);
this.startActivity(i);
return true;
default: return super.onOptionsItemSelected(item);
}
}


Este "callback" recebe uma instância de "android.view.MenuItem", classe que representa um item de menu. Se analisarmos a propriedade "id", através do seu "getter" ("item.getItemId()"), podemos comparar com os "ids" criados em nossa classe "R.java" (lembre-se: todo "id" é criado também dentro da classe "R.java", e você criou "ids" para os itens de menu dentro do XML!).

A parte sobre menu de contexto veremos mais adiante. Agora é hora de mais exercícios!

Laboratório 4 - Menu de opções

Vamos criar uma nova Activity para a Ajuda:
  1. Crie um novo arquivo de layout chamado: "ajuda.xml", dentro de "res/layout" (new / Android XML file – layout);
  2. Crie um bonito layout, com um texto explicativo sobre sua aplicação. Veja como fizemos no projeto BioMago;
  3. Crie uma classe que estenda "android.app.Activity" e escreva seu "callback" "onCreate()", inicializando o seu layout. Veja o "callback" da activity principal;
  4. Altere o arquivo "AndroidManifest.xml" para acrescentar a sua activity. Veja como o do BioMago foi feito;


Agora, vamos criar um menu resource:
  1. Crie um string resource: "ajuda", com os textos apropriados em Português e Inglês!
  2. Crie uma pasta "menu", dentro da pasta "res";
  3. Selecione a pasta "menu" e crie um novo Android XML File, do tipo "menu";
  4. Coloque os itens: "novoRegistro" e "ajuda". Tenha cuidado com os "ids" e com os "titles". Use os strings que já existem;


Finalmente, vamos inflar o menu dentro do nosso código-fonte:
  1. No código da Activity principal (Principal.java), adicione o "callback": "onCreateOptionsMenu()", conforme fizemos na apostila e no BioMago;
  2. No mesmo código, acrescente o "callback": "onOptionsItemSelected() ", conforme a apostila e o BioMago, alterando as opções do "switch" para:
    • calcular o fatorial;
    • invocar a activity de ajuda;



Se você não conseguir fazer, relaxe! Nós já colocamos a solução dentro do projeto do curso (http://code.google.com/p/curso-basico-thecodebakers/downloads/list).

Estilo

Um estilo é um conjunto de propriedades que afetam a visualização de um item. Podem ser definidas diretamente ou em um arquivo XML (similar ao conceito de CSS). Também existe o conceito de herança, onde um estilo "herda" de outros. Exemplo:

<style name="titulo_link" parent="@android:style/TextAppearance.Large">
<item name="android:textColor">#ffffff</item>
<item name="android:typeface">monospace</item>
<item name="android:textStyle">bold</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:clickable">true</item>
</style>
<style name="titulo_link.vermelho">
<item name="android:textColor">#ff0000</item>
</style>


Podemos utilizar o estilo derivado em qualquer View:

<TextView 
style="@style/titulo_link.vermelho"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/linear"
android:onClick="clicouLinear"
/>


Podemos definir várias propriedades, dependendo do tipo de elemento, por exemplo:

TextView / EditText

"android:gravity"
como alinhar o texto se ele for menor que a "View". Os valores possíveis são: "top", "bottom", "left", "right", "center_vertical", "center_horizontal", "center", "fill_vertical", "fill_horizontal" etc;
"android:height"
altura da View. A unidade pode ser: px (pixels), dp (density-independent pixels), sp (scaled pixels basedos no tamanho de letra preferido), in (polegadas), mm (milímetros).;
"android:textColor"
uma cor em formato RGB Html (ou uma referência a outro estilo);
"android: textSize"
tamanho da letra. Pode usar qualquer unidade das já mencionadas;
"android:textStyle"
"normal", "bold" ou "italic";
"android: typeFace"
"normal", "sans", "serif" e "monospace" (**);


(**) Se você quiser utilizar fontes externas, é possível carregar arquivos "TTF" - Trye Type Font, como "asset" e configurar em sua aplicação, Mas isto está fora do escopo deste curso.

Os estilos podem ficar dentro de arquivos XML, localizados na pasta "res/values". Veja o projeto "Layouts".



VOLTAR PARA O INÍCIO DO CURSO