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.

• 

  Premer 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.

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