O ImageView, como o próprio nome diz, é um componente que nos permite trabalhar com imagens. Iremos mostrar dois exemplos em que podemos aplicar esse componente, o primeiro será o exemplo que irá baixar uma imagem da internet através de uma URL e no segundo exemplo iremos fazer uma espécie de catálogo, onde as imagens irão passar de acordo com as setas de avançar e voltar.
Criando um novo Projeto
Para começarmos teremos que criar um novo projeto no Eclipse clique em File > New > AndroidProject e coloque o nome do projeto como quiser, o deste exemplo irá se chamar ImageViewAndroid.
Na nossa Activity principal iremos colocar uma lista. Primeiramente iremos criar um array de string com o nome OPCOES, ele terá a primeira posição como Carregar Imagens e a segunda será Exibir Imagens. Nossa classe ira utilizar um extends de ListActivity, pois a mesma será uma lista. Criaremos também um array de string com o nome ACOES, onde a primeira posição será chamada de TELA_IMAGEM e a segunda será chamada de TELA_EXI, como mostra a Listagem 1.
package devmedia.weslleynepomuceno;
import android.app.Activity;
import android.app.ListActivity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.ArrayAdapter;
import android.widget.ListView;
public class ImageViewAndroidActivity extends ListActivity {
private static final String[] OPCOES = {"Carregar Imagens",
"Exibir Imagens" };
private static final String[] ACOES = {"TELA_IMAGEM",
"TELA_EXI"};Agora, no nosso onCreate, iremos criar nossa lista utilizando um ArrayAdapter e em seguida iremos implementar o clique da lista para que possamos ter acesso às demais telas. Veja como irá ficar na Listagem 2.
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
ArrayAdapter<String> adapter = new ArrayAdapter<String>(
this, android.R.layout.simple_list_item_1, OPCOES);
setListAdapter(adapter);
}
@Override
protected void onListItemClick(ListView l, View v, int position, long id) {
super.onListItemClick(l, v, position, id);
Intent it = new Intent(ACOES[position]);
startActivity(it);
}
}Criando a tela de carregar imagens
Para desenharmos a nossa tela para carregar imagens, teremos que criar na pasta layout do nosso projeto um arquivo XML. Para isso, clique com o botão direito do mouse na pasta layout, escolha a opção New > Other... ,vá à pasta Android e escolha a opção Android XML Layout File e dê o nome que você desejar ao XML, o deste exemplo irá se chamar tela_url_img.
Criado o nosso XML, iremos agora desenhar a tela. Vejam na Figura 1, como ficará nossa tela de carregar imagens.
O código para deixar a tela dessa forma está na Listagem 3.
<?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/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Digite a URL de uma Imagem"
android:textAppearance="?android:attr/textAppearanceLarge" />
<EditText
android:id="@+id/editText1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:ems="10" >
<requestFocus />
</EditText>
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Baixar Imagem"
android:onClick="baixarImagemClick"/>
<ImageView
android:id="@+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:src="@drawable/ic_launcher" />
</LinearLayout>Criando a tela de exibir imagens
Agora para desenharmos a nossa tela para exibir imagens, teremos que criar na pasta layout do nosso projeto o arquivo XML. Para isso, clique com o botão direito do mouse na pasta layout, escolha a opção New > Other..., vá à pasta Android e escolha a opção Android XML Layout File e dê o nome que você desejar ao XML, o deste exemplo irá se chamar detalhesproduto.
Criado o nosso XML, iremos agora desenhar a tela. Vejam na Figura 2 como ficará nossa tela de exibir imagens.
O código para deixar a tela dessa forma está na Listagem 4.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/formum"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFFFFF"
android:orientation="vertical" >
<TextView
android:id="@+id/textView7"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Imagens de Pratos"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#1E90FF" />
<TextView
android:id="@+id/textView11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="__________________________________"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#000000" />
<LinearLayout
android:id="@+id/linearLayout5"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<ImageView
android:id="@+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="0.73"
android:onClick="anterior"
android:src="@drawable/voltar" />
<ImageView
android:id="@+id/imageView1"
android:layout_width="166dp"
android:layout_height="382dp"
android:src="@drawable/ic_launcher" />
<ImageView
android:id="@+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="0.74"
android:onClick="proximo"
android:src="@drawable/avancar" />
</LinearLayout>
<LinearLayout
android:id="@+id/linearLayout6"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TextView
android:id="@+id/textView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#000000"
android:gravity="center"
android:text="Produto"
android:textAppearance="?android:attr/textAppearanceLarge" />
</LinearLayout>
</LinearLayout>Criando a classe para carregar imagens
Agora teremos que criar a nossa classe que irá baixar as imagens da internet, para isso clique com o botão direito do mouse no pacote da aplicação, escolha a opção New > Class.
Nossa classe terá como objetivo realizar download de imagens de acordo com a URL que estiver no nosso EditText e exibi-la no nosso ImageView. Para isso iremos utilizar uma AsyncTask, o download da imagem será via URL Connection e usará o requestMethod Get. Olhando o código vocês entenderão melhor, vejam como ficará o nosso código na Listagem 5.
package devmedia.weslleynepomuceno;
import java.io.InputStream;
import java.net.HttpURLConnection;
import java.net.URL;
import android.app.Activity;
import android.app.AlertDialog;
import android.app.ProgressDialog;
import android.content.SharedPreferences;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.AsyncTask;
import android.os.Bundle;
import android.view.View;
import android.widget.EditText;
import android.widget.ImageView;
public class CarregarImagemUrl extends Activity {
private EditText edtUrl;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.tela_url_img);
edtUrl = (EditText)findViewById(R.id.editText1);
// Obtendo a ultima URL digitada
SharedPreferences preferencias = getSharedPreferences(
"configuracao", MODE_PRIVATE);
String url = preferencias.getString("url_imagem", "http://");
edtUrl.setText(url);
}
@Override
protected void onDestroy() {
super.onDestroy();
// Salva a URL para utiliza-la quando essa tela for re-aberta
SharedPreferences preferencias = getSharedPreferences(
"configuracao", MODE_PRIVATE);
SharedPreferences.Editor editor = preferencias.edit();
editor.putString("url_imagem", edtUrl.getText().toString());
editor.commit();
}
public void baixarImagemClick(View v){
new DownloadImagemAsyncTask().execute(
edtUrl.getText().toString());
}
class DownloadImagemAsyncTask extends
AsyncTask<String, Void, Bitmap>{
ProgressDialog dialog;
@Override
protected void onPreExecute() {
super.onPreExecute();
dialog = ProgressDialog.show(
CarregarImagemUrl.this,
"Aguarde", "Carregando a imagem...");
}
@Override
protected Bitmap doInBackground(String... params) {
String urlString = params[0];
try {
URL url = new URL(urlString);
HttpURLConnection conexao = (HttpURLConnection)
url.openConnection();
conexao.setRequestMethod("GET");
conexao.setDoInput(true);
conexao.connect();
InputStream is = conexao.getInputStream();
Bitmap imagem = BitmapFactory.decodeStream(is);
return imagem;
} catch (Exception e) {
e.printStackTrace();
}
return null;
}
@Override
protected void onPostExecute(Bitmap result) {
super.onPostExecute(result);
dialog.dismiss();
if (result != null){
ImageView img = (ImageView)findViewById(R.id.imageView1);
img.setImageBitmap(result);
} else {
AlertDialog.Builder builder =
new AlertDialog.Builder(CarregarImagemUrl.this).
setTitle("Erro").
setMessage("Não foi possivel carregar imagem, tente
novamente mais tarde!").
setPositiveButton("OK", null);
builder.create().show();
}
}
}
}Criando a classe para exibir imagens
Agora teremos que criar a nossa classe que irá baixar as imagens da internet, para isso clique com o botão direito do mouse no pacote da aplicação e escolha a opção New > Class.
Nessa classe iremos exibir imagens que estão salvas dentro do nosso projeto. As imagens do projeto estão na pasta drawable do código fonte disponível nesse artigo.
Após ter criado a classe que irá exibir as imagens, teremos que criar nosso ImageView e um TextView, pois ao clicarmos na setinha de avançar ou voltar será atualizada no nosso ImageView a imagem seguinte que será determinada na codificação da nossa classe. Veja como ficaria o código completo da nossa Activity na Listagem 6.
package devmedia.weslleynepomuceno;
import android.app.Activity;
import android.content.pm.ActivityInfo;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;
public class PratosExibir extends Activity {
ImageView pro;
TextView nome;
String cod;
int cont;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.detalhesproduto);
this.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
nome = (TextView) findViewById(R.id.textView1);
pro = (ImageView) findViewById(R.id.imageView1);
cont = 0;
if (cont == 0) {
pro.setImageResource(R.drawable.ic_launcher);
nome.setText(getIntent().getStringExtra("nome"));
}
}
public void proximo(View v) {
cont++;
if (cont < 1) {
cont = 1;
}
if (cont == 1) {
pro.setImageResource(R.drawable.prato1);
nome.setText("PRATO 1");
}
if (cont == 2) {
pro.setImageResource(R.drawable.prato2);
nome.setText("PRATO 2");
}
if (cont == 3) {
pro.setImageResource(R.drawable.prato3);
nome.setText("PRATO 3");
}
if (cont == 4) {
pro.setImageResource(R.drawable.prato4);
nome.setText("PRATO 4");
}
if (cont == 5) {
pro.setImageResource(R.drawable.prato5);
nome.setText("PRATO 5");
}
if (cont > 5) {
cont = 5;
}
}
public void anterior(View v) {
cont--;
if (cont < 1) {
cont = 1;
}
if (cont == 1) {
pro.setImageResource(R.drawable.prato1);
nome.setText("PRATO 1");
}
if (cont == 2) {
pro.setImageResource(R.drawable.prato2);
nome.setText("PRATO 2");
}
if (cont == 3) {
pro.setImageResource(R.drawable.prato3);
nome.setText("PRATO 3");
}
if (cont == 4) {
pro.setImageResource(R.drawable.prato4);
nome.setText("PRATO 4");
}
if (cont == 5) {
pro.setImageResource(R.drawable.prato5);
nome.setText("PRATO 5");
}
if (cont > 5) {
cont = 5;
}
}
}Declarando informações no AndroidManifest.xml
Como teremos que utilizar a internet para baixar imagens de uma URL, então vamos ter que colocar no nosso AndroidManifest uma permissons de Internet. Além disso, lembre que na nossa ListActivity criamos um Array de Strings que continha ACOES. Pois bem, essas ações será vinculadas as nossas Activitys, tanto de Carregar imagem como de Exibir Imagem, para isso iremos declarar nossas Activitys no Manifest e acrescentar a tag na Activty CaregarImagemUrl (isso para este exemplo caso que possui a classe com esse nome) e acrescentar a tag &ly;action android:name = “TELA_EXI” > na Activty PratosExibir.
Veja como irá ficar nosso AndroidManifest.xml na Listagem 7.
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android
.com/apk/res/android"
package="devmedia.weslleynepomuceno"
android:versionCode="1"
android:versionName="1.0" >
<uses-sdk android:minSdkVersion="10" />
<uses-permission android:name="android.permission
.INTERNET"/>
<application
android:icon="@drawable/ic_launcher"
android:label="@string/app_name" >
<activity
android:name=".ImageViewAndroidActivity"
android:label="@string/app_name" >
<intent-filter>
<action android:name="android.intent
.action.MAIN" />
<category android:name="android.intent
category.LAUNCHER" />
</intent-filter>
</activity>
<activity
android:name=".CarregarImagemUrl"
android:label="@string/app_name" >
<intent-filter>
<action android:name="TELA_IMAGEM" />
<category android:name="android.intent
.category.DEFAULT" />
</intent-filter>
</activity>
<activity
android:name=".PratosExibir"
android:label="@string/app_name" >
<intent-filter>
<action android:name="TELA_EXI" />
<category android:name="android.intent
.category.DEFAULT" />
</intent-filter>
</activity>
</application>
</manifest>Após isso, basta executar a nossa App. A tela principal (nossa ListActivity) será exibida da seguinte forma, como mostra a Figura 3.
Conclusão
Bom pessoal, vimos dois exemplos de uso da ImageView. Trabalhar com esse componente é muito bom e muito fácil, até mesmo para quem está iniciando com programação em dispositivos móveis.
Com isso finalizamos mais um artigo, muito obrigado pela atenção de todos. Dúvidas/Sugestões? Comentem...
Um forte abraço e até breve.
Relacionado: Curso de Android: Como criar minha primeira aplicação em Android
Links Úteis
- Números mágicos: O que são e como corrigir: Confira o que são números mágicos e como reconhecer a presença dessa má prática de programação em códigos.
- Planejamento e governança em Data Warehouses: Este artigo apresenta os conceitos de uma arquitetura em um Data Warehouse, Staging Area e ETL, com exemplos em SQL Server e SSIS.
Saiba mais sobre Android ;)
- Cursos para Mobile: Aqui você encontra os melhores cursos sobre programação mobile. Aprenda a criar aplicativos mobile nativos e híbridos para Android, iOS e Windows usando Java, Cordova, Xamarin, Ionic e mais.
- Guia de Android: O Android é a plataforma oficial para desenvolvimento de aplicativos mobile do Google. Neste guia você encontrará artigos, vídeos e cursos para aprender tudo sobre esse SDK, que domina o mundo dos dispositivos móveis.
