Criando uma barra de classifica��o de conte�do para Android

No mundo de desenvolvimento de software � extremamente comum que novas funcionalidades nasçam e que os usu�rios se tornem cada vez mais exigentes, haja vista a grande gama de componentes e tecnologias que surgem dia ap�s dia.

Diante deste cen�rio, tendo uma vis�o de desenvolvedor ou profissional de TI, � tamb�m bem comum que o mesmo tenha de se adaptar �s tecnologias com demasiada velocidade e produtividade.

Quando o cen�rio se aplica o mundo mobile, ent�o a rapidez com o que as coisas �andam� tende a ser bem maior. Os dispositivos que operam a plataforma Android disp�em de um bom n�mero de features disponibilizadas pelo pr�prio Google para ajudar os profissionais no processo de desenvolvimento. Por exemplo, em muitos aplicativos m�veis j� � poss�vel encontrar widgets de avaliaç�o e ranking como o pr�prio Google Play, aplicativo oficial de loja do Google para apps (Veja Figura 1).

Nota: Widgets s�o todos os principais componentes gr�ficos das telas do Android, tais como bot�es, janelas, etc.

Figura 1: Exemplo de tela com bot�es de avaliaç�o

No Android, voc� pode usar a classe (isso mesmo, lembre-se: Android usa como linguagem base o Java) "android.widget.RatingBar" para exibir o componente de barra de classificaç�o com �cone de estrelas. O usu�rio � capaz de tocar, arrastar ou clicar nas estrelas para definir o valor de uma classificaç�o facilmente. Inclusive � um widget padr�o e pode ser encontrado na paleta default de widgets que o Eclipse disponibiliza para trabalhar graficamente.

Na documentaç�o oficial � poss�vel encontrar a seguinte descriç�o (traduzido e adaptado):

A RatingBar � uma extens�o da SeekBar e ProgressBar que mostra a classificaç�o em estrelas. O usu�rio pode tocar / arrastar ou usar as teclas de seta para definir a classificaç�o ao usar o RatingBar de tamanho padr�o. O estilo da RatingBar menor (ratingBarStyleSmall) e o amplamente usado indicador do �nico estilo (ratingBarStyleIndicator) n�o suportam a interaç�o do usu�rio e deve ser utilizado apenas como indicadores.

O uso de um RatingBar que suporta interaç�o com o usu�rio, colocando widgets para a esquerda ou direita do RatingBar � desencorajado.

O n�mero de estrelas configurado (via setNumStars (int) ou em um layout XML) ser� mostrado quando a largura do layout est� definido para envolver o conte�do (se outra largura de layout estiver definida, os resultados podem ser imprevis�veis).

O progresso secund�rio n�o deve ser modificado pelo cliente, uma vez que � usado internamente como fundo para uma estrela fracionadamente preenchida.

Neste tutorial, veremos como usar XML para exibir a barra de classificaç�o, alguns Textviews (Labels) e um bot�o. Quando o usu�rio clicar sobre a estrela da barra de classificaç�o, o valor de classificaç�o selecionado ser� exibido no Textview. E, se o usu�rio clicar no bot�o, o valor de classificaç�o selecionado ser� exibido como uma mensagem flutuante (os famosos Toast�s).

O Projeto

Crie um projeto Android de modelo no Eclipse (ou IDE de sua prefer�ncia. Mas seria aconselhado usar o Eclipse pelos passos do artigo). Delete todos os arquivos de hello_world que ele criar e/ou renomeie para ��ndex.xml�, no caminho de pasta �res/layout�.

Observaç�o: Os passos para criar o projeto e deletar os arquivos ser�o omitidos para n�o prolongar muito o artigo. Subentende-se que o leitor consiga fazer estes passos. Caso contr�rio, s� comentar no post.

Crie todos os componentes adicionando o XML contido na Listagem 1.

Listagem 1: C�digo de criaç�o da tela de index.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
 
    <TextView
        android:id="@+id/lblAvalie"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Avaliar" />
 
    <RatingBar
        android:id="@+id/ratingBar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:numStars="4"
        android:stepSize="1.0"
        android:rating="2.0" />
 
    <Button
        android:id="@+id/btnSubmit"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Submit" />
 
    <LinearLayout
        android:id="@+id/linearLayoutAux"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >
 
		<!-- Adicionar as strings ao arquivo string.xml. Omitido aqui! -->
        <TextView
            android:id="@+id/lblResultado"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Resultado : "
            android:textAppearance="?android:attr/textAppearanceLarge" />
 
        <TextView
            android:id="@+id/txtValorAvaliacao"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="" />
    </LinearLayout>
</LinearLayout>

A barra de avaliaç�o cont�m muitos valores configur�veis. Neste caso, a barra de classificaç�o cont�m quatro estrelas, cada uma aumenta o valor em 1.0, ent�o, cont�m um m�nimo de 1,0 (1 estrela) e um valor m�ximo de 4,0 (4 estrelas). Al�m disso, ele faz com que a segunda estrela (2.0) seja selecionada por padr�o.

Em seguida, crie e/ou renomeie a classe Activity para o exemplo em quest�o. Dentro da mesma, no m�todo "onCreate()", adicione um ouvinte para a barra de avaliaç�o, e dispare o mesmo quando o valor de avaliaç�o for alterado. Outro ouvinte no bot�o, e dispare quando o bot�o for clicado (Listagem 2). Leia os coment�rios do c�digo, eles s�o autoexplicativos.

Listagem 2: Classe Activity

package br.edu.devmedia.android;
 
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.RatingBar;
import android.widget.RatingBar.OnRatingBarChangeListener;
import android.widget.TextView;
import android.widget.Toast;
 
public class MinhaActivity extends Activity {
 
  private RatingBar ratingBar;
  private TextView txtValorAvaliacao;
  private Button btnSubmit;
 
  @Override
  public void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
	setContentView(R.layout.index);
	addListenerOnRatingBar();
	addListenerOnButton();
  }
 
  public void addListenerOnRatingBar() {
	ratingBar = (RatingBar) findViewById(R.id.ratingBar);
	txtValorAvaliacao = (TextView) findViewById(R.id.txtValorAvaliacao);
 
	//se o valor de avaliaç�o mudar,
	//exiba o valor de avaliaç�o atual no resultado (textview) automaticamente
	ratingBar.setOnRatingBarChangeListener(new OnRatingBarChangeListener() {
		public void onRatingChanged(RatingBar ratingBar, float avaliacao, boolean fromUser) {
			txtValorAvaliacao.setText(String.valueOf(avaliacao));
		}
	});
  }
 
  public void addListenerOnButton() {
	ratingBar = (RatingBar) findViewById(R.id.ratingBar);
	btnSubmit = (Button) findViewById(R.id.btnSubmit);
 
	//se o bot�o for clicado, exiba o valor de avaliaç�o corrente.
	btnSubmit.setOnClickListener(new OnClickListener() {
		@Override
		public void onClick(View v) {
			Toast.makeText(MyAndroidAppActivity.this,
				String.valueOf(ratingBar.getRating()),
					Toast.LENGTH_SHORT).show();
		}
	});
  }
}

Considerando o cen�rio de aplicativo geral do Android, voc� dever� ver tamb�m a quest�o do arquivo coraç�o do projeto: o AndroidManifest.xml. Veja na Listagem 3 a extens�o de c�digo do arquivo para adaptar no seu projeto.

Listagem 3: AndroidManifest.xml com configuraç�es do projeto

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="br.edu.devmedia.android"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk android:minSdkVersion="15" />

    <application
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name" >
        <activity
            android:label="@string/app_name"
            android:name=".MinhaActivity" >
            <intent-filter >
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

Finalmente o arquivo de strings.xml ser� envolvido para exibir alguns valores. Veja na Listagem 4 o c�digo para tal.

Nota: Observe que para todas as strings do projeto esse arquivo deve ser usado e considerado como lista de constantes.

Listagem 4: Strings.xml. Arquivos de strings do projeto

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">MyAndroidApp</string>
</resources>

O resultado final pode ser visualizado na Figura 2.

Figura 2: Resultado final

Conclus�o

Este artigo mostra ao leitor uma vis�o breve sobre o componente de RatingBar do Android, muito mais pode ser explorado, em relaç�o ao seu uso e finalidade e principalmente aos ouvintes implementados.

Voc� pode ficar � vontade para explorar o componente e visualizar o que ele pode ou n�o fazer.

Criando uma barra de classifica��o de conte�do para Android

Veja nesse artigo como criar uma barra de classificação de conteúdo para Android.

O Projeto

Conclus�o

Artigos relacionados