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

• Comezamos creando o proxecto U2_13_ImageView
• 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 com.example.u2_13_imageview;
 2 
 3 import android.app.Activity;
 4 import android.os.Bundle;
 5 import android.view.Menu;
 6 import android.view.View;
 7 import android.widget.ImageView;
 8 
 9 public class U2_13_ImageView extends Activity {
10 
11 	@Override
12 	protected void onCreate(Bundle savedInstanceState) {
13 		super.onCreate(savedInstanceState);
14 		setContentView(R.layout.activity_u2_13__image_view);
15 	}
16 
17 	@Override
18 	public boolean onCreateOptionsMenu(Menu menu) {
19 		// Inflate the menu; this adds items to the action bar if it is present.
20 		getMenuInflater().inflate(R.menu.u2_13__image_view, menu);
21 		return true;
22 	}
23 
24 	public void onCambiarImaxeClick(View view) {
25 		// ImageView img = (ImageView) view;
26 
27 		ImageView img = (ImageView) findViewById(R.id.img_imaxe);
28 
29 		if (img.getTag() == "OK") {
30 			img.setTag("NO");
31 			img.setImageResource(R.drawable.no);
32 
33 		} else {
34 			img.setTag("OK");
35 			img.setImageResource(R.drawable.ok);
36 		}
37 	}
38 
39 }

• Liña 29: comprobamos cal é o Tag da imaxe cargada.
• Liña 30, 31: se a imaxe é ok.png entón cargamos a de no.png e cambiamos a etiqueta. O mesmo se fai nas liñas 34 e 35.
• A través da clase Java R accedemos ás imaxes.
• Liña 25: 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 27.

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