Caso prefira, você encontrará todo esse material, em inglês, no site do Developer Android. A tradução e comentários dos materiais eu faço livremente para ajudar a comunidade que fala português.

terça-feira, 1 de março de 2011

Interface de Usuários - Usando a Action Bar

A Action Bar é um widget para atividades que substitui a barra de títulos tradicional do topo da tela (mas apenas para dispositivos com Android 3.0). Por padrão, a Action Bar inclui o logo da aplicação à esquerda, seguido pelo título da atividade e quaisquer outros itens disponíveis do menu de opções no lado direito. A Action Bar oferece muitas características úteis, incluíndo a habilidade de:

  • Mostrar itens do menu de opções diretamente na Action Bar, como itens de ação - Action Items - provendo acesso instantâneo às ações do usuário.
    Os itens de menu que não aparecem como itens de ação são colocados num menu flutuante, que é revelado por uma lista drop-down.
  • Provê tabulação para navegar entre fragmentos.
  • Provê uma lista drop-down para navegação.
  • Provê Action Views em local de itens de ação.
Screenshot de uma Action Bar na aplicação de email,
contendo os itens de ação para compôr novos emails e outros.

Adicionando a Action Bar

A Action Bar é incluída por padrão em todas as atividades cujo alvo é o Android 3.0 ou superior. Mais especificamente, todas as atividades que usam o novo tema "holographic" incluem o Action Bar e qualquer aplicação cujo alvo seja o Android 3.0 recebe automaticamente esse tema. Uma aplicação é considerada como tendo alvo a versão 3.0 quando o atributo android:minSdkVersion ou androd:targetSdkVersion dentro do elemento <uses-sdk> tem como valor o número 11 ou maior.
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
      package="com.example.helloworld"
      android:versionCode="1"
      android:versionName="1.0">
    <uses-sdk android:minSdkVersion="4"
                     android:targetSdkVersion="11" />
    <application ... >
        ...
    </application>
</manifest>

Nesse exemplo, a aplicação requer uma versão mínima da API Level 4 (Android 1.6) mas também tem como alvo a versão API Level 11 (Android 3.0). Dessa maneira, quando a aplicação é instalada em um dispositivo rodando Android 3.0+, o sistema aplica o tema holográfico para cada atividade e então cada atividade incluirá a Action Bar.

Contudo, se você quer usar a API da Action Bar, como adicionar tabs ou modificar estilos da Action Bar, você precisar colocar o atributo android:minSdkVersion para "11".

Removendo a Action Bar

Se você quer remover a Action Bar por qualquer razão, configure o tema para Theme.Holo.NoActionBar. Por exemplo:
<activity android:theme="@android:style/Theme.Holo.NoActionBar">
Dica: Se você tem um tema customizado para uma atividade na qual você queira remover a Action Bar, configure o estilo android:windowActionBar para false.

Você também pode esconder a Action Bar em tempo de execução chamando hide(), e mostrá-la novamente chamando show(). Por exemplo:
ActionBar actionBar = getActionBar();
actionBar.hide();
Quando a Action Bar está escondida, o sistema ajusta o conteúdo da atividade para preencher o espaço disponível de tela.

Nota: Se você remover a Action Bar usando um tema, então a janela não permitirá a Action Bar de maneira alguma, então você não poderá adicioná-la em tempo de execução - chamar o método getActionBar retornará null.

Adicionando Itens de Ação



Uma item de ação é simplesmente um item de menu do menu de opções que você declara e que deve aparecer diretamente na Action Bar. Uma item de ação pode incluir um ícone e/ou texto. Se um item de menu não aparece como um item de ação, então o sistema o colocará em um menu flutuante, que o usuário poderá abrir ao tocar o ícone de menu no lado direito da Action Bar.

Quando uma atividade se inicia, o sistema popula a Action Bar e o menu flutuante chamando onCreateOptionsMenu() para sua atividade. 

Você pode especificar um item de menu para aparecer como um item de ação - se existir lugar para ele - a partir de seu recurso de menu declarando, no atributo android:showAsAction="ifRoom" dentro do elemento <item>. Dessa maneira, o item de menu aparece na Action Bar para rápido acesso apenas se existir espaço para ele. Se não há espaço, o item é colocado no menu flutuante, revelado ao clicar no ícone do canto direito da Action Bar.

Você pode também declarar um iem de menu para aparecer como item de ação a partir do seu código fonte, chamando setShowAsAction() no MenuItem e passando a propriedade SHOW_AS_ACTION_IF_ROOM.

Se o seu item de menu tem um título e também um ícone, o item de ação mostrará apenas o ícone. Se você quiser incluir o texto do item de ação, adicione a flag "with text". Basta ir no XML e adicionar withText ao atributo android:showAsAction ou, no seu código, usar a flag SHOW_AS_ACTION_WITH_TEXT quando chamar o setShowAsAction(). 

Abaixo um código de como se declarar um item de menu como um item de ação no arquivo recurso menu.
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@+id/menu_add"
          android:icon="@drawable/ic_menu_save"
          android:title="@string/menu_save"
          android:showAsAction="ifRoom|withText" />
</menu>
Nesse caso, ambos o ifRoom e o withText foram setados, para que quando um item apareça como um item de ação, também mostre o texto.

Se você também quiser declarar um item para sempre aparecer como um item de ação, você deverá evitar fazê-lo, pois poderá criar uma interface muito suja com muitas opções de itens de ação colidindo com outros itens na Action Bar.

Usando o ícone do App como um ítem de ação.


Na imagem acima, você vê a Action Bar do Email, com o ícone da aplicação à esquerda.

O comportamento normal deve ser a aplicação retornar para a atividade inicial quando o usuário toca o ícone dele. Quando o usuário toca o ícone, o sistema chama o método onOptionsItemSelected() da atividade com o ID android.R.id.home. Então, você precisa adicionar uma condição para seu método onOptionsItemSelected() escutar o ID que vem de android.R.id.home e efetuar a ação apropriada, como iniciar a atividade home ou abrir algum fragmento.

Se a ação do ícone da aplicação for voltar para a atividade home, você deverá incluir a flag FLAG_ACTIVITY_CLEAR_TOP no seu intent. Com essa flag, se a atividade que você está tentando iniciar já existir na tarefa atual, então todas as atividades dentro desta será destruídas e ela é trazida para a frente. Ou seja, mesmo que você esteja escrevendo um email, ao clicar no ícone da aplicação, ele fechará a janela onde escreve o email e retornará para o ínicio da aplicação. Você deve favorecer esse comportamento, pois ir para a atividade home é uma ação que é equivalente a "voltar para home" e não "criar uma nova home".

O exemplo abaixo mostra uma implementação de onOptionsItemSelected() que retorna para a atividade home:
@Override
public boolean onOptionsItemSelected(MenuItem item) {
    switch (item.getItemId()) {
        case android.R.id.home:
            // app icon in Action Bar clicked; go home
            Intent intent = new Intent(this, HomeActivity.class);
            intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
            startActivity(intent);
            return true;
        default:
            return super.onOptionsItemSelected(item);
    }
}
Adicionando uma Action View

Uma action view é um widget que aparece na Action Bar para substituir um item de ação. Por exemplo, se você tem um item no menu de opções para pesquisa, você pode adicionar uma action view para o item que provê um SearchView na Action Bar em qualquer momento que o item estiver disponivel como um item de ação.

Quando declarar um action view como um item de menu, é importante que você ainda permita que o item se comporte como um item de menu normal quando não aparecer no Action Bar. Por exemplo, um item de menu para realizar uma pesquisar deve, por padrão, trazer o diálogo de pesquisa, mas se o item é colocado na Action Bar, a action view aparecer com um widget de SearchView. A figura mostra o exemplo de um widget SearchView em uma Action View.

A melhor maneira de declarar uma action view para um item é dentro do recurso de menu, usando o atributo android:actionLayout ou android:actionViewClass.

O valor para android:actionLayout deve ter o recurso apontando para um arquivo de layout.
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@+id/menu_search"
        android:title="Search"
        android:icon="@drawable/ic_menu_search"
        android:showAsAction="ifRoom"
        android:actionLayout="@layout/searchview" />
</menu>
O valor para android:actionViewClass deve ser um nome de classe fully-qualified.
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@+id/menu_search"
        android:title="Search"
        android:icon="@drawable/ic_menu_search"
        android:showAsAction="ifRoom"
        android:actionViewClass="android.widget.SearchView" />
</menu>
Você deve incluir a propriedade android:ShowAsAction="ifRoom" para que o item apareça como uma action view quando houver espaço para tal. Se necessário, contudo, você pode forçar o item a aparecer como uma action view mudando a propriedade android:showAsAction para "always".

Agora, quando o item de menu é mostrado como o um action view, sua action view aparece ao invés do ícone e/ou do texto. Contudo, se não há espaço na Action Bar, o item aparecerá dentro do menu flutuante como um item de menu normal e que deve responder à interação do usuário através do método onOptionsItemSelected().

Quando a atividade se inicia, o sistema popula a ActionBar e o menu flutuante chamando onCreateOptionsMenu(). Após você ter inflado o seu menu com esse método, você pode encontrar elementos em uma action view chamando o método findItem() com o ID do item de menu e depois getActionView() no MenuItem retornado. Por exemplo, o widget SearchView pode ser encontrado assim:
@Override
public boolean onCreateOptionsMenu(Menu menu) {
  getMenuInflater().inflate(R.menu.options, menu);
  SearchView searchView = (SearchView) menu.findItem(R.id.menu_search).getActionView();
  // Set appropriate listeners for searchView
  ...
  return super.onCreateOptionsMenu(menu);
}
No próximo post, veremos como adicionar tabs, navegação por drop-down e fazendo a estilização de uma ActionBar. Ah, e claro, não me esqueci do StoryBoard. Só não terminei ainda de desenhar uma versão para mostrar a vocês.



4 comentários:

Marco Vinycios disse...

mam, gostei do seu blog. estou começando a programar agora em android e gostaria de algumas dicas. Poderia ajudar.

Visite o meu blog
brasilopencode.blogspot.com

Valeu!!

Leonardo Nakahara disse...

Beleza. Sempre volte aqui então para que possa ver as novidades e aprender mais sobre como programar em Android.

Frederico Brigatte disse...

Legal esse post. Onde está a outra parte comentada no final do artigo?

Gostaria de montar um layout com actionbar, duas abas e um edittext na aba 1.

willian disse...

Muito bom o tutorial, mas estou com um problema. O actionBar só está aparecendo no layout principal da minha aplicação, alguma ideia do que poderia ser?

Portions of this page are modifications based on work created and shared by the Android Open Source Project and used according to terms described in the Creative Commons 2.5 Attribution License.
Related Posts Plugin for WordPress, Blogger...