Agora vamos no arquivo “ListaContatosActivity.java” para colocar o seguinte código abaixo:
package usuario.app.listadecontatos;
import android.os.Bundle;
import android.widget.*;
import android.view.*;
import android.app.*;
public class ListaContatosActivity extends Activity {
133
ListView lista_contatos;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_lista_contatos);
lista_contatos = (ListView) findViewById(R.id.lista_contatos);
lista_contatos.setOnItemClickListener(new
AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view,
int position, long id) {
String nome = ((TextView) view).getText().toString();
AlertDialog.Builder dialogo = new AlertDialog.Builder(
ListaContatosActivity.this);
dialogo.setTitle("Contato");
dialogo.setMessage("Contato selecionado: " + nome);
dialogo.setNeutralButton("OK", null);
dialogo.show();
}
});
}
}
Como havia falado (e também como vocês podem conferir no código acima), quando se clica em um item, o sistema mostra uma mensagem do item selecionado (no caso, o nome contato selecionado). Isso é conseguido fazendo uso da interface OnItemClickListener, como mostra a instrução abaixo:
lista_contatos.setOnItemClickListener(new
AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view,
int position, long id) {
String nome = ((TextView) view).getText().toString();
AlertDialog.Builder dialogo = new AlertDialog.Builder(
ListaContatosActivity.this);
dialogo.setTitle("Contato");
dialogo.setMessage("Contato selecionado: " + nome);
dialogo.setNeutralButton("OK", null);
dialogo.show();
}
});
Vamos analisar alguns trechos do código. A linha de comando:
String nome = ((TextView) view).getText().toString();
134
Guarda na variável “nome” o conteúdo retornado pelo objeto “view” (que contém o contato selecionado). Como o conteúdo precisa ser retornado para a variável que é do tipo String, foi preciso converte-lo em TextView para que o conteúdo fosse retornado em uma String (através do método toString situado em getText).
Vamos executar a aplicação. O resultado você vê na figura seguinte:
Aplicação de lista de contatos em execução
5.5) Desenvolvendo uma aplicação que visualiza imagens
Agora vamos desenvolver uma aplicação básica que visualiza imagens através do uso o componente ImageView. Vamos criar um projeto com os seguintes dados abaixo:
Application Name: Visualizador de Imagens
Company Domain : app.usuario
135
Project location : (Fica a sua escolha)
Activity Name: VisualizadorImagensActivity
Layout Name : activity_visualizador_imagens
Title : Visualizador de Imagens
Resource Menu Name : menu_ visualizador_imagens
Antes de iniciarmos a codificação do programa, quero que você coloque duas imagens JPEG (com a extensão .jpg), dentro da pasta “drawable”, presente dentro do diretório “res” (para esse projeto usei duas imagens chamadas “foto1.jpg” e “foto2.jpg”, que já acompanham este projeto, presente dentro do diretório “Tópico 5.5”).
Como colocar as imagens dentro do diretório “drawable” ?
Vamos através do Windows Explorer abrir o diretório onde se encontra esses arquivos, e em seguida selecione-os , pressionando as teclas CTRL+C.
Selecionando e copiando os arquivos
Depois de copiarmos os arquivos de imagem vamos voltar para o Android Studio para o nosso projeto aberto, e em seguida, selecione a pasta “drawable”:
136
Selecionando a pasta “drawable”
Com a pasta selecionada, pressione CTRL+V, e em seguida surgirá a seguinte caixa de diálogo :
Para finalizar clique em “OK” para que as imagens possam ser adicionadas no diretório “drawable”.
Fotos inseridas no dreitório “drawable”
Agora vamos remover o componente TextView da tela do nosso dispositivo e em seguida vamos adicionar dentro da tela da nossa aplicação uma estrutura
137
LinearLayout (Horizontal), que se encontra na guia “Layouts”, simplesmente arrastando o componente para a tela da aplicação. O resultado você confere na figura abaixo:
Estrutura LinearLayout inserida
Agora dentro da estrutura LinearLayout que adicionamos acima, vamos inserir o componente ImageView (que se encontra na guia “Widgets”). Vejamos o resultado:
Componente ImageView inserido
Observe que nós podemos ver um pequeno quadrinho minúsculo representando o componente ImageView. Isso ocorre pelo fato de o mesmo não possuir nenhuma imagem.
Na guia “Properties” selecione a propriedade “src”, e em seguida clique no botão (...), conforme indica a figura seguinte :
138
Inserindo uma imagem
Na caixa de dialogo que se abre, expanda o item drawable (se não estiver expandido) e selecione a imagem da “foto1.jpg” :
Caixa de diálogo – Resource
Nesta caixa de diálogo escolhemos a imagem que o nosso componente vai assumir. Depois de escolher a imagem clique em “OK”. Veja o resultado em seguida:
139
Resultado da operação
Agora vamos alterar a propriedade do componente ImageView conforme abaixo:
ImageView
Propriedade
Valor
id
Imgfoto
Agora vamos adicionar um componente TextView que ficará ao lado da imagem. Altere suas propriedades conforme a tabela abaixo:
TextView
Propriedade
Valor
id
Txtinformacao
text
Foto 1
textSize
20dp
padding / left
10dp
Seguindo os passos acima, o resultado do layout deve ficar de acordo com a figura abaixo:
140
Layout da aplicação
Agora vamos selecionar a estrutura LinearLayout que adicionarmos (onde inserimos a imagem e o título acima) para modificarmos a seguinte propriedade :
LinearLayout
Propriedade
Valor
layout:height
wrap_content
Agora vamos adicionar na sequência dois componentes do tipo Button, só que esses dois componentes vão estar dentro da tela da aplicação e fora (e também abaixo) da estrutura de layout que adicionamos. Segue abaixo as propriedades que precisam ser modificadas:
Button
Propriedade
Valor
id
btfoto1
text
Exibir foto 1
layout:width
match_parent
Button
Propriedade
Valor
id
btfoto2
text
Exibir foto 2
layout:width
match_parent
141
Depois de seguir todos os passos descritos acima, a aplicação tem que estar de acordo com a figura abaixo:
Layout da aplicação
Vamos conferir agora como ficou o código XML da tela da nossa aplicação :
<RelativeLayout 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:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
tools:context=".VisualizadorImagensActivity">
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:id="@+id/linearLayout">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/imgfoto"
android:src="@drawable/foto1" />
142
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Foto 1"
android:id="@+id/txtinformacao"
android:textSize="20sp"
android:paddingLeft="10dp" />
</LinearLayout>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Exibir foto 1"
android:id="@+id/btfoto1"
android:layout_below="@+id/linearLayout"
android:layout_alignParentLeft="true" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Exibir foto 2"
android:id="@+id/btfoto2"
android:layout_below="@+id/btfoto1"
android:layout_alignParentLeft="true" />
</RelativeLayout>
Agora vamos no arquivo “VisualizadorImagensActivity.java” para colocarmos o código em seguida :
package usuario.app.visualizadordeimagens;
import android.os.Bundle;
import android.app.Activity;
import android.widget.*;
import android.view.*;
public class VisualizadorImagensActivity extends Activity {
ImageView imgfoto;
Button btfoto1, btfoto2;
TextView txtinformacao;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_visualizador_imagens);
143
imgfoto = (ImageView) findViewById(R.id.imgfoto);
btfoto1 = (Button) findViewById(R.id.btfoto1);
btfoto2 = (Button) findViewById(R.id.btfoto2);
txtinformacao = (TextView) findViewById(R.id.txtinformacao);
btfoto1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View arg0) {
imgfoto.setImageResource(R.drawable.foto1);
txtinformacao.setText("Foto 1");
}
});
btfoto2.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View arg0) {
imgfoto.setImageResource(R.drawable.foto2);
txtinformacao.setText("Foto 2");
}
});
}
}
Agora vamos analisar alguns trechos de códigos. Vamos no evento Click referente a abertura da primeira imagem. O código:
imgfoto.setImageResource(R.drawable.foto1);
É responsável por abrir a imagem “foto1.jpg” e exibi-la no componente. Observe que foi passado o parâmetro “R.drawable.foto1” onde “drawable” corresponde a pasta e “foto1” corresponde ao arquivo “foto1.jpg”. Logo após vem o código:
txtinformacao.setText("Foto 1");
Cuja finalidade é mudar o título da TextView , de acordo com a String passada como parâmetro.
144
O comentário acima é o mesmo para o segundo botão referente à abertura da segunda imagem.
Vamos executar a nossa aplicação. O resultado você vê nas imagens abaixo:
Comentários
Postar um comentário