ImageView

Introdución

• Un control ImageView mostra en pantalla unha imaxe calquera.

• Permite ser escalada (android:scaleType) e tinguida (android:tint)

• A clase ImageView herda directamente da clase View

• Imaxe obtida de: http://www.itcsolutions.eu/2011/08/27/android-tutorial-4-procedural-vs-declarative-design-of-user-interfaces

• Referencias:
  • http://developer.android.com/reference/android/widget/ImageView.html

Caso práctico

• Partimos que xa temos creado o proxecto inicial como xa indicamos anteriormente.

Se non o temos creado antes, crea un paquete de nome UI como un subpaquete do teu paquete principal.

Dentro do paquete UI, crearemos un novo paquete de nome: ImagesViews.

• Dentro do paquete ImagesViews crear unha nova 'Empty Activity' de nome: UD02_01_ImageView de tipo Launcher e sen compatibilidade.

Modifica o arquivo AndroidManifiest.xml e engade unha label á activity como xa vimos na creación do proxecto base.

• Creamos unha aplicación que cargue por defecto unha imaxe de "OK" e un botón.
• Cando prememos no botón ou na imaxe cambia a imaxe por outra de "NON-OK" e así continuamente.

• ImageView
• 

  Iniciada a aplicación

• 

  Premer no botón cambia imaxe ou se prememos na imaxe tamén a cambia.

Recursos de imaxes

• O cartafol /res/values/drawable xa debería estar creado.

Lembrar que na vista 'Android' os cartafoles físicos están ocultos.

Se cambiamos á vista 'Project' ou 'Project Files' podemos comprobar que temos múltiples cartafoles drawable, un por cada tipo de pantalla.

Xa comentamos isto nun punto anterior da wiki.

Cando engadimos novas imaxes ao noso proxecto, deberíamos ter creada unha imaxe adaptada á resolución de cada pantalla.

Importante: Lembrar que todos os recursos teñen que ter letras en minúsculas y soamente se permiten letras, números e guión baixo.

• Recursos de imaxes
• 

  Descargar o boto ok.png

• 

  Descargar o boto no.png

• 

  Para engadir unha imaxe, a copiamos ao portapapeis.

• 

  Despois a pegamos no cartafol drawable.

• 

  Eliximos o cartafol. Con drawable se visualizará esta imaxe se non existe unha específica nunha resolución concreta.

• 

  Indicamos o nome da imaxe.

• 

  Aparece a imaxe no cartafol indicado.

• 

  Outra forma de facelo sería escollendo un recurso que se atope nese cartafol e escoller a opción Show in explorer.

• 

  Agora soamente temos que copiar as imaxes que queiramos.

• 

  A imaxe aparece automaticamente no Android Studio.

XML do layout

• Observar como se referencia á imaxe que vai cargar o control (liña12).
• Os dous controles chaman ao mesmo método no caso de facer click neles.

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent"
 5     android:orientation="vertical" >
 6 
 7     <ImageView
 8         android:id="@+id/img_imaxe"
 9         android:layout_width="wrap_content"
10         android:layout_height="wrap_content"
11         android:contentDescription="Imaxe"
12         android:src="@drawable/ok"
13         android:onClick="onCambiarImaxeClick"
14         android:tag="OK" />
15 
16     <Button
17         android:id="@+id/btn_cambiar_imaxe"
18         android:layout_width="wrap_content"
19         android:layout_height="wrap_content"
20         android:onClick="onCambiarImaxeClick"
21         android:text="Cambiar imaxe" />
22 
23 </LinearLayout>

• Liña 14: Pónselle unha etiqueta á imaxe para poder controlar por código cal é a imaxe cargada.

Código Java

 1 package es.cursoandroid.cifprodolfoucha.aprendiendo.UI.ImagesViews;
 2 
 3 import android.app.Activity;
 4 import android.os.Bundle;
 5 import android.view.View;
 6 import android.widget.ImageView;
 7 
 8 import es.cursoandroid.cifprodolfoucha.aprendiendo.R;
 9 
10 public class UD02_01_ImageView extends Activity {
11 
12     public void onCambiarImaxeClick(View view) {
13         // ImageView img = (ImageView) view;
14 
15         ImageView img = (ImageView) findViewById(R.id.img_imaxe);
16 
17         if (img.getTag() == "OK") {
18             img.setTag("NO");
19             img.setImageResource(R.drawable.no);
20 
21         } else {
22             img.setTag("OK");
23             img.setImageResource(R.drawable.ok);
24         }
25     }
26 
27     @Override
28     protected void onCreate(Bundle savedInstanceState) {
29         super.onCreate(savedInstanceState);
30         setContentView(R.layout.activity_ud02_01__image_view);
31     }
32 }

• Liña 17: comprobamos cal é o Tag da imaxe cargada.
• Liña 18, 19: se a imaxe é ok.png entón cargamos a de no.png e cambiamos a etiqueta. O mesmo se fai nas liñas 22e 23.
• A través da clase Java R accedemos ás imaxes.
• Liña 13: se o método se chama so dende a imaxe e non dende o botón poderíamos facer uso do parámetro view do método e comentar a liña 15.

• Un dos atributos que imos poder modificar nun ImageView é ScaleType.

Dito atributo en base aos valore permitidos, vai modificar o tamaño da imaxe para axustala ao seu contenedor.

Podedes consultar neste enlac€ exemplos de cómo quedaría unha imaxe aplicando diferentes valores para este atributo.

Accedendo aos recursos Drawable

• Como xa comentei anteriormente có TextView, podemos acceder a todos os recursos que se atopan en /res/ facendo uso do método getResources(), como tamén está indicado nesta entrada da Wiki.

• No caso das imaxes empregadas polo ImageView, tamén imos poder obter unha referencia a elas da forma:

1 Drawable drawable =  getResources().getDrawable(R.drawable.empresa,getTheme());
2 ImageView img = new ImageView(this);
3 img.setImageDrawable(drawable);

O primeiro argumento é o id da imaxes (fixarse que o tipo e R.drawable e no voso proxecto teredes que indicar unha imaxe que exista)

O segundo argumento é o theme da Activity que se pode obter chamando ao método getTheme().

Nota: Loxicamente poderíamos empregar o método setImageResource(int resId) para asignar un recurso drawable directamente ao ImageView, pero o exemplo é para que comprobedes como se pode obter unha referencia Drawable dende un recurso de /res/drawable.

O problema que ten o método anterior é que só está permitido se temos un MinSDK API 21. En caso contrario da un erro.

• Para evitalo, podemos facer uso da clase ContextCompact e do método getDrawable() da forma:

1 Drawable drawable = ContextCompat.getDrawable(getApplicationContext(),R.drawable.empresa);
2 ImageView img = new ImageView(this);
3 img.setImageDrawable(drawable);

Accedendo aos recursos Assets

• O cartafol Assets é un cartafol onde podemos gardar recursos de todo tipo (gráficos, audios, bases de datos,...) e estruturalos como se fose un cartafol do S.O., engadindo novos cartafoles e sobre cada un deles gardando diferentes tipos de recursos.

Podemos recordar como crear dito cartafol.

• A diferenza dos recursos empregados no cartafol /res/ estes recursos non están compilados e non poden referenciarse facendo uso da clase R.

Para poder referenciar un destes recursos debemos chamar ao método getAssets() o cal devolve un obxecto da clase AssetManager que nos serve para obter o InputStream do recurso a cargar.

No caso das imaxes, o código que nos permite convertir un InputStream a un obxecto Drawable é o seguinte:

1 ImageView imageView = findViewById(R.id.imageView);   // Unha referencia a un ImageView que se atope no Layout da Activity
2 
3 try {
4     InputStream is =  getAssets().open("nome_imaxe.jpg");     // Exemplo de recurso previamente copiado ao cartafol Assets
5     Drawable d = Drawable.createFromStream(is,null);
6     imageView.setImageDrawable(d);
7 } catch (IOException e) {
8     e.printStackTrace();
9 }

• Nota: Se a foto está dentro dun cartafol en Assets, debemos de escribir a ruta relativa dende o raíz de Assets.

Por exemplo, se temos as fotos nun cartafol fotos dentro de Assets a ruta e nome a enviar sería: fotos/nome_foto.jpg

Non debemos enviar /fotos/nome_foto.jpg

Empregando gráficos SVG cun ImageView

• Se queremos empregar gráficos vectoriais podemos 'cargalos' no noso proxecto coa ferramenta Vector Asset:

• Empregando gráficos svg
• 

  Lanzamos a ferramenta Vector Asset

• 

  Escollemos o arquivo svg descargado. Indicamos o tamaño do gráfico en dp´s e o nome do mesmo.

• 

  Indica onde vai a gardar o gráfico e con que arquivo (fixarse que xera un arquivo XML).

• 

  O arquivo XML xerado no cartafol drawable.

• 

  Un ImageView coa icona asociada.

Métodos mínimos a coñecer no manexo dos ImageView

• Referenciar a un ImageView có método findViewById.
• Modificar propiedades básicas, como ScaleType, cor de fondo...
• Xestionar o evento de Click e sabelo facer empregando interfaces anónimas ou implementando a interface na Activity.
• Xestionar o evento de LongClick (o veremos coas listas/recyclerview/spinner)
• Cambiar a imaxe cargada empregando unha imaxe de Drawable ou BitMap.
• Obter unha referencia Drawable á imaxe cargada.

                ImageView imageView = findViewById(R.id.imageView);     // Referenciamos un ImageView que se atope no Layout da Activity

                imageView.setScaleType(ImageView.ScaleType.FIT_XY);     // Cambiamos o tipo de escala.

                imageView.setBackgroundColor(Color.BLUE);               // Cambiamos a cor de fondo

                imageView.setImageResource(R.drawable.ic_launcher_background);       // Unha das formas de cambiar a imaxe a partires dunha imaxe que se atope en Drawable
                //imageView.setImageBitmap(obxecto BitMap);                            // Cambiamos a imaxe por un bitmap (veremos que coa cámara do móbil imos obter un bitmap)

                // Outra forma de obter un Drawable e asinalo a un ImageView
                Drawable imaxe = getResources().getDrawable(R.drawable.ic_launcher_background);
                imageView.setImageDrawable(imaxe);

                Drawable imaxeCargada = imageView.getDrawable();        // Agora poderíamos empregar o Drawable para cargar outro imageview con esta imaxe, por exemplo.

Enlace a la página principal de la UD2

Enlace a la página principal del curso

-- Ángel D. Fernández González e Carlos Carrión Álvarez -- (2015).