Artigos Mobile 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.

Exemplo de tela com botões de classificação de conteúdo - Android

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.

Resultado final

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.