Tutorial Android 4 #6 – Criando uma Lista de Elementos

Padrão

Olá pessoal! No tutorial de hoje da série sobre Android vamos começar a adicionar alguma funcionalidade ao nosso aplicativo. Com o post de hoje, conseguiremos adicionar contatos, que serão listados na parte superior do aplicativo!

Começando a colocar a mão na massa, o primeiro passo é trocarmos a instância única da classe Contato por uma lista de objetos. Porém, a simples mudança acarretará alguns erros no código. Assim, também precisaremos montar o objeto no método onClick e o adicionarmos na lista. Com essas alterações, a nossa activity ficará assim:

public class MeusContatos extends Activity implements OnClickListener {

	private List<Contato> contatos = new ArrayList<Contato>();

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_meus_contatos);

		Button salvar = (Button) findViewById(R.id.salvar);
		salvar.setOnClickListener(this);
	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.activity_meus_contatos, menu);
		return true;
	}

	@Override
	public void onClick(View v) {
		EditText nome = (EditText) findViewById(R.id.nome);
		EditText email = (EditText) findViewById(R.id.email);

		Contato contato = new Contato();
		contato.setNome(nome.getText().toString());
		contato.setEmail(email.getText().toString());

		RadioGroup tipoContato = (RadioGroup) findViewById(R.id.tipo_contato);

		switch (tipoContato.getCheckedRadioButtonId()) {
		case R.id.pessoal:
			contato.setTipo(Contato.Tipo.PESSOAL);
			break;
		case R.id.profissional:
			contato.setTipo(Contato.Tipo.PROFISSIONAL);
			break;
		case R.id.academico:
			contato.setTipo(Contato.Tipo.ACADEMICO);
			break;
		}

		contatos.add(contato);
	}
}

Basicamente, o que fizemos foi retirar o objeto contato que estava no escopo da classe, passando a criá-lo método onClick. Além disso, criamos a lista chamada contatos como um atributo da classe, e ao final do método onClick, adicionamos o objeto à lista.

O próximo passo é implementarmos o método toString() da classe Contato, já que ele será chamado quando os contatos forem listados. Para o nosso objetivo, nos interessa apenas o nome do contato por enquanto, de forma que o método toString() pode retornar simplesmente o atributo nome. Dessa forma, adicione o seguinte método a classe Contato:

@Override
public String toString() {
	return nome;
}

Agora temos a parte mais “desafiadora”, que é exatamente mostrar a lista de contatos na tela de acordo que formos adicionando-os. Para fazer isso, vamos adicionar um LinearLayout como “pai” do nosso RelativeLayout e complementando o layout com um ListView que abrigará a lista de contatos. Como o nosso formulário ficou meio grande, a divisão meio a meio da tela para os dois não é suficiente, de forma que teremos que fazer uso do atributo android:layout_weight. Veja como o fica o código do nosso layout (layout/activity_meus_contatos.xml):

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MeusContatos" >

    <ListView
        android:id="@+id/contatos"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="2.5" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:orientation="vertical" >

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/nome" />

            <EditText
                android:id="@+id/nome"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:inputType="text" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/email" />

            <EditText
                android:id="@+id/email"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:inputType="textEmailAddress" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/tipo_contato" />

            <RadioGroup
                android:id="@+id/tipo_contato"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content" >

                <RadioButton
                    android:id="@+id/pessoal"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/tipo_pessoal" />

                <RadioButton
                    android:id="@+id/profissional"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/tipo_profissional" />

                <RadioButton
                    android:id="@+id/academico"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/tipo_academico" />
            </RadioGroup>
        </LinearLayout>

        <Button
            android:id="@+id/salvar"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:text="@string/salvar" />
    </RelativeLayout>

</LinearLayout>

Perceba que zeramos o elemento android:layout_height (já que ele é obrigatório) e adicionamos 1 ao android:layout_weight da lista e 2.5 no formulário. Isso significa que a proporção será de 2,5 para 1, ou seja, o formulário terá a largura 2,5 vezes maior que a listagem. Olhe como fica o nosso formulário:

clique para ampliar

Agora, precisamos fazer alguns ajustes na nossa Activity para que os elementos sejam adicionados e listados. Vamos novamente editar a nossa Activity:

public class MeusContatos extends Activity implements OnClickListener {

	private List<Contato> contatos = new ArrayList<Contato>();
	private ArrayAdapter<Contato> adaptador = null;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_meus_contatos);

		Button salvar = (Button) findViewById(R.id.salvar);
		salvar.setOnClickListener(this);

		ListView lista = (ListView) findViewById(R.id.contatos);
		adaptador = new ArrayAdapter<Contato>(this,
				android.R.layout.simple_list_item_1, contatos);
		lista.setAdapter(adaptador);
	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.activity_meus_contatos, menu);
		return true;
	}

	@Override
	public void onClick(View v) {
		EditText nome = (EditText) findViewById(R.id.nome);
		EditText email = (EditText) findViewById(R.id.email);

		Contato contato = new Contato();
		contato.setNome(nome.getText().toString());
		contato.setEmail(email.getText().toString());

		RadioGroup tipoContato = (RadioGroup) findViewById(R.id.tipo_contato);

		switch (tipoContato.getCheckedRadioButtonId()) {
		case R.id.pessoal:
			contato.setTipo(Contato.Tipo.PESSOAL);
			break;
		case R.id.profissional:
			contato.setTipo(Contato.Tipo.PROFISSIONAL);
			break;
		case R.id.academico:
			contato.setTipo(Contato.Tipo.ACADEMICO);
			break;
		}

		adaptador.add(contato);
	}
}

O que fizemos foi adicionar o elemento adaptador, do tipo ArrayAdapter para a nossa classe Contato. É ele quem fará a montagem dos restaurantes adicionados na tela. Definimos a forma como ele funcionará em seu construtor, na linha 32, indicando o segundo parâmetro android.R.layout.simple_list_item_1, dizendo que será uma lista da classe Contato, e passando como parâmetro também a nossa lista contatos. Vinculamos o adaptador, então, ao item ListView que foi declarado lá no arquivo XML e que o obtemos através do método findViewById(). Assim, chamamos seu método setAdapter e passamos o nosso adaptador.

Ao final, no método onClick, ao invés de adicionarmos o restaurante à lista, adicionamos ao adaptador. O resultado será a lista de restaurantes sendo criada em nosso aplicativo:

Bom, por hoje é isso! Pra quem teve problemas, pode baixar o projeto aqui.

Até a próxima!

Um comentário sobre “Tutorial Android 4 #6 – Criando uma Lista de Elementos

  1. jebinha

    Amigo, tenho uma dúvida. A classe Contato possui alguns campos. Na listagem do app aparece justamente o Nome. Onde no código você definiu que o campo a ser exibido na ListView era o campo Nome?

Deixe uma resposta