sexta-feira, 8 de agosto de 2014

Carregando imagens da web no Android













1. Criar um componente que acessa a web.
2. Fazer download do stream
3. Salvar via i/o no storage.
4. Exibir a imagem salva.

Esquece tudo isso ! :)
Vamos mostrar nesse tutorial como fazer tudo isso com poucas linhas de código.


Criando o projeto


Crie um Android Application Project.
Criamos a aplicação com o nome ImageLoader.
















Utilizando a biblioteca Android Query


Estamos utilizando a biblioteca Android Query nesse projeto.
Caso você não a conheça leia esse artigo http://blog.mobsource.com.br/2014/08/acessando-internet-e-previsao-do-tempo.html
Copie a biblioteca para a pasta libs do seu projeto.















Utilizando uma imagem "place holder"


Como a imagem que vamos exibir vem da internet, nem sempre ela é carregada imediatamente.
Para mostrar para o usuário que estamos fazendo download da imagem, utilizamos uma outra informando que estamos carregando. Utilizamos a imagem abaixo. Faça uma cópia dela para a pasta drawable do seu projeto. Se essa pasta não existir clique com o botão direito no diretório res e crie.


























Definindo as permissões


Insira no seu arquivo manifest as permissões demonstradas.




























Criando o layout


Insira um ImageView no seu layout e selecione a imagem place_holder.













































Para facilitar esse é o xml do nosso layout...



<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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:src="@drawable/place_holder" />

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/imageView1"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="42dp"
        android:text="Carregar imagem" />

</RelativeLayout>


Ou ainda para facilitar a visualização....



























Implementando tudo


Faça a implementação conforme demonstrado abaixo.


package com.example.imageloader;

import com.androidquery.AQuery;
import android.os.Bundle;
import android.app.Activity;
import android.view.View;

public class MainActivity extends Activity {

private AQuery aq;

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

aq = new AQuery(this);
aq.id(R.id.button1).clicked(buttonCarregarClick());
}

private View.OnClickListener buttonCarregarClick() {
return new View.OnClickListener() {
@Override
public void onClick(View v) {
carregarImagem();
}
};
}

private void carregarImagem() {
String url = "http://www.mobsource.com.br/images/img_logo.png";
aq.id(R.id.imageView1).image(url, true, true);
}
}


Ou ainda, para facilitar a visualização...


































Explicando tudo


Criamos o nosso componente Android Query na variável aq.
Definimos o clique do botão para carregar o método carregarImagem.
Informamos a URL da imagem que iremos fazer o download e exibir.
Identificamos o ImageView pelo id e carregamos a imagem.
Os dois últimos parâmetros booleanos se tratam de fazer cache em memória e fazer cache em disco.
Ao finalizar o download automaticamente a imagem aparece.
Rode o aplicativo e faça o teste. :)
Até mais !