06 - Criando uma Lista de Elementos [Guia #dev Android]

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!

Por | @http://twitter.com/_rafaeltoledo Programação
<p>Ol&aacute; pessoal! No tutorial de hoje da s&eacute;rie sobre&nbsp;<strong>Android</strong>&nbsp;vamos come&ccedil;ar a adicionar alguma funcionalidade ao nosso aplicativo. Com o post de hoje, conseguiremos adicionar contatos, que ser&atilde;o listados na parte superior do aplicativo!</p> <p>Come&ccedil;ando a colocar a m&atilde;o na massa, o primeiro passo &eacute; trocarmos a inst&acirc;ncia &uacute;nica da classe Contato por uma lista de objetos. Por&eacute;m, a simples mudan&ccedil;a acarretar&aacute; alguns erros no c&oacute;digo. Assim, tamb&eacute;m precisaremos montar o objeto no m&eacute;todo&nbsp;<strong>onClick</strong>&nbsp;e o adicionarmos na lista. Com essas altera&ccedil;&otilde;es, a nossa activity ficar&aacute; assim:</p> <p><code>public class MeusContatos extends Activity implements OnClickListener { <br /> <br />    private List contatos = new ArrayList(); <br /> <br />    @Override <br />    protected void onCreate(Bundle savedInstanceState) { <br />        super.onCreate(savedInstanceState); <br />        setContentView(R.layout.activity_meus_contatos); <br /> <br />        Button salvar = (Button) findViewById(R.id.salvar); <br />        salvar.setOnClickListener(this); <br />    } <br /> <br />    @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 />    } <br /> <br />    @Override <br />    public void onClick(View v) { <br />        EditText nome = (EditText) findViewById(R.id.nome); <br />        EditText email = (EditText) findViewById(R.id.email); <br /> <br />        Contato contato = new Contato(); <br />        contato.setNome(nome.getText().toString()); <br />        contato.setEmail(email.getText().toString()); <br /> <br />        RadioGroup tipoContato = (RadioGroup) findViewById(R.id.tipo_contato); <br /> <br />        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 />        } <br /> <br />        contatos.add(contato); <br />    } <br />}</code></p> <p>Basicamente, o que fizemos foi retirar o objeto&nbsp;<strong>contato</strong>&nbsp;que estava no escopo da classe, passando a cri&aacute;-lo m&eacute;todo&nbsp;<strong>onClick</strong>. Al&eacute;m disso, criamos a lista chamada&nbsp;<strong>contatos</strong>&nbsp;como um atributo da classe, e ao final do m&eacute;todo&nbsp;<strong>onClick</strong>, adicionamos o objeto &agrave; lista.</p> <p>O pr&oacute;ximo passo &eacute; implementarmos o m&eacute;todo&nbsp;<strong>toString()</strong>&nbsp;da classe&nbsp;<strong>Contato</strong>, j&aacute; que ele ser&aacute; chamado quando os contatos forem listados. Para o nosso objetivo, nos interessa apenas o nome do contato por enquanto, de forma que o m&eacute;todo&nbsp;<strong>toString()</strong>&nbsp;pode retornar simplesmente o atributo&nbsp;<strong>nome</strong>. Dessa forma, adicione o seguinte m&eacute;todo a classe&nbsp;<strong>Contato</strong>:</p> <p><code>@Override<br />public String toString() {    <br />    return nome;<br />}</code>Agora temos a parte mais &ldquo;desafiadora&rdquo;, que &eacute; exatamente mostrar a lista de contatos na tela de acordo que formos adicionando-os. Para fazer isso, vamos adicionar um&nbsp;<strong>LinearLayout</strong>como &ldquo;pai&rdquo; do nosso&nbsp;<strong>RelativeLayout</strong>&nbsp;e complementando o layout com um&nbsp;<strong>ListView</strong>&nbsp;que abrigar&aacute; a lista de contatos. Como o nosso formul&aacute;rio ficou meio grande, a divis&atilde;o meio a meio da tela para os dois n&atilde;o &eacute; suficiente, de forma que teremos que fazer uso do atributo<strong>android:layout_weight</strong>. Veja como o fica o c&oacute;digo do nosso layout (<strong>layout/activity_meus_contatos.xml</strong>):</p> <p><code><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"<br /> xmlns:tools="http://schemas.android.com/tools"<br /> android:layout_width="match_parent"<br /> android:layout_height="match_parent"<br /> android:orientation="vertical"<br /> tools:context=".MeusContatos" ><br /> <br /> <ListView<br />  android:id="@+id/contatos"<br />  android:layout_width="fill_parent"<br />  android:layout_height="0dp"<br />  android:layout_weight="1" /><br /> <br /> <RelativeLayout<br />  android:layout_width="fill_parent"<br />  android:layout_height="0dp"<br />  android:layout_weight="2.5" ><br /> <br />  <LinearLayout<br />   android:layout_width="match_parent"<br />   android:layout_height="wrap_content"<br />   android:layout_alignParentTop="true"<br />   android:orientation="vertical" ><br /> <br />   <TextView<br />    android:layout_width="wrap_content"<br />    android:layout_height="wrap_content"<br />    android:text="@string/nome" /><br /> <br />   <EditText<br />    android:id="@+id/nome"<br />    android:layout_width="fill_parent"<br />    android:layout_height="wrap_content"<br />    android:inputType="text" /><br /> <br />   <TextView<br />    android:layout_width="wrap_content"<br />    android:layout_height="wrap_content"<br />    android:text="@string/email" /><br /> <br />   <EditText<br />    android:id="@+id/email"<br />    android:layout_width="fill_parent"<br />    android:layout_height="wrap_content"<br />    android:inputType="textEmailAddress" /><br /> <br />   <TextView<br />    android:layout_width="wrap_content"<br />    android:layout_height="wrap_content"<br />    android:text="@string/tipo_contato" /><br /> <br />   <RadioGroup<br />    android:id="@+id/tipo_contato"<br />    android:layout_width="fill_parent"<br />    android:layout_height="wrap_content" ><br /> <br />    <RadioButton<br />     android:id="@+id/pessoal"<br />     android:layout_width="wrap_content"<br />     android:layout_height="wrap_content"<br />     android:text="@string/tipo_pessoal" /><br /> <br />    <RadioButton<br />     android:id="@+id/profissional"<br />     android:layout_width="wrap_content"<br />     android:layout_height="wrap_content"<br />     android:text="@string/tipo_profissional" /><br /> <br />    <RadioButton<br />     android:id="@+id/academico"<br />     android:layout_width="wrap_content"<br />     android:layout_height="wrap_content"<br />     android:text="@string/tipo_academico" /><br />   </RadioGroup><br />  </LinearLayout><br /> <br />  <Button<br />   android:id="@+id/salvar"<br />   android:layout_width="fill_parent"<br />   android:layout_height="wrap_content"<br />   android:layout_alignParentBottom="true"<br />   android:text="@string/salvar" /><br /> </RelativeLayout><br /> <br /></LinearLayout></code></p> <p>Perceba que zeramos o elemento&nbsp;<strong>android:layout_height</strong>&nbsp;(j&aacute; que ele &eacute; obrigat&oacute;rio) e adicionamos&nbsp;<strong>1&nbsp;</strong>ao&nbsp;<strong>android:layout_weight</strong>&nbsp;da lista e&nbsp;<strong>2.5</strong>&nbsp;no formul&aacute;rio. Isso significa que a propor&ccedil;&atilde;o ser&aacute; de 2,5 para 1, ou seja, o formul&aacute;rio ter&aacute; a largura 2,5 vezes maior que a listagem. Olhe como fica o nosso formul&aacute;rio:</p> <p><span class="img_editor"><img src="https://www.oficinadanet.com.br/imagens/post/9936/android-tutorial-071.png" alt="" /></span></p> <p>Agora, precisamos fazer alguns ajustes na nossa&nbsp;<strong>Activity</strong>&nbsp;para que os elementos sejam adicionados e listados. Vamos novamente editar a nossa&nbsp;<strong>Activity</strong>:</p> <p><code>public class MeusContatos extends Activity implements OnClickListener {<br /> <br />    private List<Contato> contatos = new ArrayList<Contato>();<br />    private ArrayAdapter<Contato> adaptador = null;<br /> <br />    @Override<br />    protected void onCreate(Bundle savedInstanceState) {<br />        super.onCreate(savedInstanceState);<br />        setContentView(R.layout.activity_meus_contatos);<br /> <br />        Button salvar = (Button) findViewById(R.id.salvar);<br />        salvar.setOnClickListener(this);<br /> <br />        ListView lista = (ListView) findViewById(R.id.contatos);<br />        adaptador = new ArrayAdapter<Contato>(this,<br />                android.R.layout.simple_list_item_1, contatos);<br />        lista.setAdapter(adaptador);<br />    }<br /> <br />    @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 />    }<br /> <br />    @Override<br />    public void onClick(View v) {<br />        EditText nome = (EditText) findViewById(R.id.nome);<br />        EditText email = (EditText) findViewById(R.id.email);<br /> <br />        Contato contato = new Contato();<br />        contato.setNome(nome.getText().toString());<br />        contato.setEmail(email.getText().toString());<br /> <br />        RadioGroup tipoContato = (RadioGroup) findViewById(R.id.tipo_contato);<br /> <br />        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 />        }<br /> <br />        adaptador.add(contato);<br />    }<br />}</code></p> <p>O que fizemos foi adicionar o elemento&nbsp;<strong>adaptador</strong>, do tipo&nbsp;<strong>ArrayAdapter</strong>&nbsp;para a nossa classe<strong>Contato</strong>. &Eacute; ele quem far&aacute; a montagem dos restaurantes adicionados na tela. Definimos a forma como ele funcionar&aacute; em seu construtor, na linha 32, indicando o segundo par&acirc;metro<strong>android.R.layout.simple_list_item_1</strong>, dizendo que ser&aacute; uma lista da classe&nbsp;<strong>Contato</strong>, e passando como par&acirc;metro tamb&eacute;m a nossa lista&nbsp;<strong>contatos</strong>. Vinculamos o adaptador, ent&atilde;o, ao item&nbsp;<strong>ListView</strong>&nbsp;que foi declarado l&aacute; no arquivo XML e que o obtemos atrav&eacute;s do m&eacute;todo&nbsp;<strong>findViewById()</strong>. Assim, chamamos seu m&eacute;todo&nbsp;<strong>setAdapter</strong>&nbsp;e passamos o nosso adaptador.</p> <p>Ao final, no m&eacute;todo&nbsp;<strong>onClick</strong>, ao inv&eacute;s de adicionarmos o restaurante &agrave; lista, adicionamos ao adaptador. O resultado ser&aacute; a lista de restaurantes sendo criada em nosso aplicativo:</p> <p><span class="img_editor"><img src="https://www.oficinadanet.com.br/imagens/post/9936/android-tutorial-08.png" alt="" /></span></p> <p>Bom, por hoje &eacute; isso! Pra quem teve problemas, pode baixar o projeto abaixo:</p> <p style="text-align: center;"><strong>Arquivos do projeto:</strong><br /><a href="https://www.oficinadanet.com.br/imagens/post/9936/meuscontatos-v04.zip"><img src="https://www.oficinadanet.com.br/imagens/post/9936/botaodownloadoficina.jpg" alt="" /></a></p>

Mais sobre: guiaandroid android
Share Tweet
Comentários
Destaquesver tudo

Siga nossas contas no Twitter