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 {</p>
<p>	private List&lt;Contato&gt; contatos = new ArrayList&lt;Contato&gt;();</p>
<p>	@Override<br />
	protected void onCreate(Bundle savedInstanceState) {<br />
		super.onCreate(savedInstanceState);<br />
		setContentView(R.layout.activity_meus_contatos);</p>
<p>		Button salvar = (Button) findViewById(R.id.salvar);<br />
		salvar.setOnClickListener(this);<br />
	}</p>
<p>	@Override<br />
	public boolean onCreateOptionsMenu(Menu menu) {<br />
		// Inflate the menu; this adds items to the action bar if it is present.<br />
		getMenuInflater().inflate(R.menu.activity_meus_contatos, menu);<br />
		return true;<br />
	}</p>
<p>	@Override<br />
	public void onClick(View v) {<br />
		EditText nome = (EditText) findViewById(R.id.nome);<br />
		EditText email = (EditText) findViewById(R.id.email);</p>
<p>		Contato contato = new Contato();<br />
		contato.setNome(nome.getText().toString());<br />
		contato.setEmail(email.getText().toString());</p>
<p>		RadioGroup tipoContato = (RadioGroup) findViewById(R.id.tipo_contato);</p>
<p>		switch (tipoContato.getCheckedRadioButtonId()) {<br />
		case R.id.pessoal:<br />
			contato.setTipo(Contato.Tipo.PESSOAL);<br />
			break;<br />
		case R.id.profissional:<br />
			contato.setTipo(Contato.Tipo.PROFISSIONAL);<br />
			break;<br />
		case R.id.academico:<br />
			contato.setTipo(Contato.Tipo.ACADEMICO);<br />
			break;<br />
		}</p>
<p>		contatos.add(contato);<br />
	}<br />
}

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<br />
public String toString() {<br />
	return nome;<br />
}

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):

&lt;LinearLayout xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;<br />
    xmlns:tools=&quot;http://schemas.android.com/tools&quot;<br />
    android:layout_width=&quot;match_parent&quot;<br />
    android:layout_height=&quot;match_parent&quot;<br />
    android:orientation=&quot;vertical&quot;<br />
    tools:context=&quot;.MeusContatos&quot; &gt;</p>
<p>    &lt;ListView<br />
        android:id=&quot;@+id/contatos&quot;<br />
        android:layout_width=&quot;fill_parent&quot;<br />
        android:layout_height=&quot;0dp&quot;<br />
        android:layout_weight=&quot;1&quot; /&gt;</p>
<p>    &lt;RelativeLayout<br />
        android:layout_width=&quot;fill_parent&quot;<br />
        android:layout_height=&quot;0dp&quot;<br />
        android:layout_weight=&quot;2.5&quot; &gt;</p>
<p>        &lt;LinearLayout<br />
            android:layout_width=&quot;match_parent&quot;<br />
            android:layout_height=&quot;wrap_content&quot;<br />
            android:layout_alignParentTop=&quot;true&quot;<br />
            android:orientation=&quot;vertical&quot; &gt;</p>
<p>            &lt;TextView<br />
                android:layout_width=&quot;wrap_content&quot;<br />
                android:layout_height=&quot;wrap_content&quot;<br />
                android:text=&quot;@string/nome&quot; /&gt;</p>
<p>            &lt;EditText<br />
                android:id=&quot;@+id/nome&quot;<br />
                android:layout_width=&quot;fill_parent&quot;<br />
                android:layout_height=&quot;wrap_content&quot;<br />
                android:inputType=&quot;text&quot; /&gt;</p>
<p>            &lt;TextView<br />
                android:layout_width=&quot;wrap_content&quot;<br />
                android:layout_height=&quot;wrap_content&quot;<br />
                android:text=&quot;@string/email&quot; /&gt;</p>
<p>            &lt;EditText<br />
                android:id=&quot;@+id/email&quot;<br />
                android:layout_width=&quot;fill_parent&quot;<br />
                android:layout_height=&quot;wrap_content&quot;<br />
                android:inputType=&quot;textEmailAddress&quot; /&gt;</p>
<p>            &lt;TextView<br />
                android:layout_width=&quot;wrap_content&quot;<br />
                android:layout_height=&quot;wrap_content&quot;<br />
                android:text=&quot;@string/tipo_contato&quot; /&gt;</p>
<p>            &lt;RadioGroup<br />
                android:id=&quot;@+id/tipo_contato&quot;<br />
                android:layout_width=&quot;fill_parent&quot;<br />
                android:layout_height=&quot;wrap_content&quot; &gt;</p>
<p>                &lt;RadioButton<br />
                    android:id=&quot;@+id/pessoal&quot;<br />
                    android:layout_width=&quot;wrap_content&quot;<br />
                    android:layout_height=&quot;wrap_content&quot;<br />
                    android:text=&quot;@string/tipo_pessoal&quot; /&gt;</p>
<p>                &lt;RadioButton<br />
                    android:id=&quot;@+id/profissional&quot;<br />
                    android:layout_width=&quot;wrap_content&quot;<br />
                    android:layout_height=&quot;wrap_content&quot;<br />
                    android:text=&quot;@string/tipo_profissional&quot; /&gt;</p>
<p>                &lt;RadioButton<br />
                    android:id=&quot;@+id/academico&quot;<br />
                    android:layout_width=&quot;wrap_content&quot;<br />
                    android:layout_height=&quot;wrap_content&quot;<br />
                    android:text=&quot;@string/tipo_academico&quot; /&gt;<br />
            &lt;/RadioGroup&gt;<br />
        &lt;/LinearLayout&gt;</p>
<p>        &lt;Button<br />
            android:id=&quot;@+id/salvar&quot;<br />
            android:layout_width=&quot;fill_parent&quot;<br />
            android:layout_height=&quot;wrap_content&quot;<br />
            android:layout_alignParentBottom=&quot;true&quot;<br />
            android:text=&quot;@string/salvar&quot; /&gt;<br />
    &lt;/RelativeLayout&gt;</p>
<p>&lt;/LinearLayout&gt;

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 {</p>
<p>	private List&lt;Contato&gt; contatos = new ArrayList&lt;Contato&gt;();<br />
	private ArrayAdapter&lt;Contato&gt; adaptador = null;</p>
<p>	@Override<br />
	protected void onCreate(Bundle savedInstanceState) {<br />
		super.onCreate(savedInstanceState);<br />
		setContentView(R.layout.activity_meus_contatos);</p>
<p>		Button salvar = (Button) findViewById(R.id.salvar);<br />
		salvar.setOnClickListener(this);</p>
<p>		ListView lista = (ListView) findViewById(R.id.contatos);<br />
		adaptador = new ArrayAdapter&lt;Contato&gt;(this,<br />
				android.R.layout.simple_list_item_1, contatos);<br />
		lista.setAdapter(adaptador);<br />
	}</p>
<p>	@Override<br />
	public boolean onCreateOptionsMenu(Menu menu) {<br />
		// Inflate the menu; this adds items to the action bar if it is present.<br />
		getMenuInflater().inflate(R.menu.activity_meus_contatos, menu);<br />
		return true;<br />
	}</p>
<p>	@Override<br />
	public void onClick(View v) {<br />
		EditText nome = (EditText) findViewById(R.id.nome);<br />
		EditText email = (EditText) findViewById(R.id.email);</p>
<p>		Contato contato = new Contato();<br />
		contato.setNome(nome.getText().toString());<br />
		contato.setEmail(email.getText().toString());</p>
<p>		RadioGroup tipoContato = (RadioGroup) findViewById(R.id.tipo_contato);</p>
<p>		switch (tipoContato.getCheckedRadioButtonId()) {<br />
		case R.id.pessoal:<br />
			contato.setTipo(Contato.Tipo.PESSOAL);<br />
			break;<br />
		case R.id.profissional:<br />
			contato.setTipo(Contato.Tipo.PROFISSIONAL);<br />
			break;<br />
		case R.id.academico:<br />
			contato.setTipo(Contato.Tipo.ACADEMICO);<br />
			break;<br />
		}</p>
<p>		adaptador.add(contato);<br />
	}<br />
}

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!