ActionBar! Para versões anteriores ao Android 3.0 HoneyComb.

A ActionBar é dos principais padrões de interface gráfica definidos pela Google para dispositivos móveis Android. Se trata de um espaço significativo no topo da tela, onde é disponibilizado para o usuário as ações mais importantes ou mais utilizadas da aplicação. Nesse espaço o desenvolvedor também pode colocar o ícone e nome do aplicativo para prover uma identificação maior do seu produto.
Logo Abaixo segue uma imagem que mostra uma Action Bar tradicional. Para ver exemplos em aplicativos reais clique aqui.

Demonstração do Action Bar.

A API do Google contemplou este componente a partir da sua versão 3.0 HoneyComb. O problema é que como podemos ver nesse link a maioria dos dispositivos faz uso de uma versão inferior a do Android 3.0 HoneyComb. Devido a isso a comunidade do Android se mobilizou para criar bibliotecas que permitem a construção de componentes Action Bar em versões do Android inferiores a 3.0.

Dessas bibliotecas vamos destacar três:

– A biblioteca ActionBarSherlock: Talvez a mais famosa. Essa biblioteca pode ser facilmente encontrada nos fóruns e nos sites de busca.
– A biblioteca GreenDroid essa biblioteca também é muito popular. Além de disponibilizar uma solução de Action Bar ela também provê diversos outros componentes que podem ser utilizados em nossas aplicações tais como Quick Action, SegmenteBar, PageView entre outras. Vale a pena conferir, tem muita coisa legal.
– A biblioteca feita pelo desenvolvedor Johan Nilsson. A abordagem mais simples, construída aparentemente por apenas um desenvolvedor.
Por ser a menos famosa, podemos pensar que ela esteja mais propensa a defeitos. Porém nos projetos que a utilizei não tive problema algum.

Nesse artigo, optei por entrar em mais detalhes na Action Bar do Johan Nilsson,
por causa da forma na qual conseguimos acessar esse componente em nossas aplicações. Nas outras bibliotecas acessamos a Action Bar via herança. Ou seja, a nossa Activity deve herdar funcionalidades de alguma outra Activity da biblioteca escolhida e chamar os métodos que criam e gerenciam a ActionBar. O Johan Nilsson tratou a Action Bar como um componente de interface gráfica comum, de modo que podemos adicionar na nossa Activity sem a necessidade de herdar de nenhuma classe. Vamos utiliza-la da mesma maneira que utilizaremos um botão por exemplo. Essa abordagem é muito interessante no ponto de vista da arquitetura da aplicação, pois, como sabemos no Java podemos fazer uso da herança uma vez por classe. Logo se a Activity da nossa aplicação, herdar de uma outra classe a funcionalidade de gerar ActionBar ela não poderá herdar mais de nenhuma outra classe. E em muitos casos esse é um custo muito caro a se pagar.

Chegou o momento da prática

No site da biblioteca baixe o arquivo zip do projeto e o importe no eclipse ( File – Import ).

OBS: Nesse arquivo de download também esta disponível um aplicativo de exemplo que pode ajuda-lo a entender a biblioteca.

Com a biblioteca presente em seu ambiente, vamos criar um projeto Android de exemplo. O Chamaremos de ActionBarExemplo, após a criação do mesmo, vamos adicionar a biblioteca que fizemos download nele seguindo os seguintes passos:
Clique com o botão direito em cima do projeto, em seguida vá em Properties e selecione o item Android, nesta tela aparecerá as versões do Android disponíveis para serem vinculadas a sua aplicação e logo no início existe uma lista de bibliotecas, clique no botão Add e seleciona a biblioteca que fizemos download. Depois desses passos você poderá usar a biblioteca em sua aplicação.

Buscando um exemplo simples, vamos simular o uso do Action Bar em uma tela de Login. Esta ActionBar terá dois botões o de entrar e o de fechar, além de conter o nome e o ícone do aplicativo. Podemos ver o layout.xml dessa tela logo abaixo:


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <com.markupartist.android.widget.ActionBar
        android:id="@+id/actionbar"
        style="@style/ActionBar" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/login"
        android:textAppearance="?android:attr/textAppearanceMedium" />

    <EditText
        android:id="@+id/edit_text_login"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textPersonName" >

        <requestFocus />
    </EditText>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/senha"
        android:textAppearance="?android:attr/textAppearanceMedium" />

    <EditText
        android:id="@+id/edit_text_senha"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textPassword" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal" >

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:onClick="onClickEnter"
            android:text="@string/enter" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:onClick="onClickSair"
            android:text="@string/sair" />
    </LinearLayout>

</LinearLayout>

Veja que da mesma maneira que adicionamos um Button, ou um EditText adicionamos também no início do nosso arquivo de layout um ActionBar. Por não ser um componente nativo do Android devemos informar o nome completo da Classe do nosso componente com.markupartist.android.widget.ActionBar.

Com o layout.xml construído nos resta criar a Activity que ficará assim:


public class LoginScreen extends Activity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setTitle(R.string.autentication);
		setContentView(R.layout.login);

		configureActionBar();
	}


	public void onClickSair(View view) {
		finish();
	}

	public void onClickEnter(View view) {
		Toast.makeText(this, "Entrar no sistema!!", Toast.LENGTH_SHORT).show();
	}

	private void configureActionBar() {
		ActionBar actionBar = (ActionBar) findViewById(R.id.actionbar);
		actionBar.setTitle(R.string.app_name);
		actionBar.setHomeAction(new MainAction());
		actionBar.addAction(new EnterAction());
		actionBar. addAction (new CloseAction());
		actionBar.setDisplayHomeAsUpEnabled(true);
	}
	
	public class MainAction extends AbstractAction {

		public MainAction() {
			super(R.drawable.ic_launcher);
			
		}

		@Override
		public void performAction(View view) {


		}
	}
	
	private class CloseAction extends AbstractAction {

		public CloseAction() {
			super(R.drawable.close);
		}

		@Override
		public void performAction(View view) {
			finish();
		}
	}
	
	private class EnterAction extends AbstractAction {

		public EnterAction() {
			super(R.drawable.ok);
		}

		@Override
		public void performAction(View view) {
			Toast.makeText(view.getContext(), "Entrar no sistema!!", Toast.LENGTH_SHORT).show();	
		}
	}

}

A classe que representa uma ação do Action Bar é a AbstractAction, então para criarmos novas ações e adiciona-las na Action Bar devemos criar classes que estendam funcionalidades da AbstractAction. No nosso exemplo as ações que criamos serão somente utilizadas nessa tela, por isso optamos por criar inner classes. No nosso exemplo temos três Actions: EnterAction, CloseAction e MainAction. No método configureActionBar elas são adicionadas ao nosso ActionBar e estarão disponíveis para o usuário.
Cada ação basicamente deve informar duas coisas o método performAction, que será executado quando o usuário clicar no item do ActionBar que criamos e um ícone para ser exibido. Deixo a critério do leitor achar um ícone legal para fazer download e colocar no app de exemplo. (Dica de site para achar ícones)

No fim das contas, a tela de login da nossa aplicação ficará assim:

Conclusão

Essa biblioteca é extremamente simples, porém consegue atingir a grande maioria dos requisitos. Caso ela não atenda as suas necessidades, basta dar uma olhadinha no GreenDroid ou no ActionBarSherlock e analisar se essas poderão auxilia-lo.

Anúncios

,

  1. #1 by Guilherme on Outubro 16, 2012 - 2:54 pm

    Muito boa essa do Johan Nilsson. Bem simples e fácil de configurar, fora que uso FragmentActivity dai ela caiu como uma luva!!!

  1. ViewFlipper! | Android On Board

Deixe uma Resposta

Preencha os seus detalhes abaixo ou clique num ícone para iniciar sessão:

Logótipo da WordPress.com

Está a comentar usando a sua conta WordPress.com Terminar Sessão / Alterar )

Imagem do Twitter

Está a comentar usando a sua conta Twitter Terminar Sessão / Alterar )

Facebook photo

Está a comentar usando a sua conta Facebook Terminar Sessão / Alterar )

Google+ photo

Está a comentar usando a sua conta Google+ Terminar Sessão / Alterar )

Connecting to %s

%d bloggers like this: